dwilhelm89 / leafletslider Goto Github PK

Hi there

When you set showAllOnStart and alwaysShowDate, at the beginning the timestamp is not shown under the slider, until the slider is moved for the first time. This is because at the beginning, setting the timestamp is through the following code:

if (!_options.range && _options.alwaysShowDate) {
    $('#slider-timestamp').html(_extractTimeStamp(_options.markers[index_start].feature.properties[_options.timeAttribute], _options));
}

And this code does not consider the cases where markers don't have feature, unlike the code which is responsible for showing the timestamp when the slider is moved.

To fix this, I simply had to move the code used to set the timestamp in the slide function into a separate function, and then call it both from inside of the if statement above, and also from inside the slide function, and that fixed the issue, but I could not upload a patch/pull request for this issue.

Any idea how I can get this fixed? In case someone else wants to use this as well in future?

Cheers,
M.

I've noticed it's just drawing your points in the order they are in the json file. If the json isn't in numerical order it will still draw top down. I'm not much of a developer but any ideas on a work around?

when I insert the slider there are no markers displayed.

sliderControl = L.control.sliderControl({position:"topright", layer:document_markers_by_year, minValue: 0, follow: 1});
mymap.addControl(sliderControl);
sliderControl.startSlider();

If I move the slider the markers show up?

If I set showAllOnStart: true they all show up, but I don;t want that behaviour?

We connected the slider with a checkbox in a navbar for an interactive web map. The default is an unchecked box. When checking the box for the first time everything works fine. If we then uncheck the box and check it again, you can only move the slider once and then it is stuck. Then there is no interaction possible at all. But we do not get an error message.
The slider is connected to a geojson file.
Do we have to update the slider or anything like that?

What happens:

The code for the navbar:

<div class="navbar">
	<div class="navbar-header">
      <a class="navbar-brand" ><i class="fas fa-suitcase"></i>  Planer</a>
    </div>
	<div class="navbar-content">
		<div class="dropdown">
			<button class="dropbtn">History <i class="fa fa-caret-down"></i></button>
			<div class="dropdown-content">
			  <a>
				<label class="switch">
					<input type="checkbox" onclick="sliderOn()" id="sliderBox" autocomplete="off">
				</label>Hotels  <i class="fa fa-bed"></i></a>	
			</div>
		</div>
	</div> 
</div>

JS-code:

var sliderControl = L.control.sliderControl({layer:hotel, follow: false, range: true});

function sliderOn(){
	var checkbox = document.getElementById('sliderBox');
	
	if (checkbox.checked == true){
		map.addControl(sliderControl);
		sliderControl.startSlider();
	} else {
		sliderControl.remove();	  
	};

};	

Hi,

This is a feature request to enable displaying multiple points with the same datetime. For example, suppose I have two distinct markers that share the datetime of "2015-05-18 00:00". I'd like both of these points to be displayed simultaneously. Then on the next step, suppose the markers share the datetime of "2015-05-18 01:00" so they should be displayed simultaneously once again (but the markers with the datetime of "2015-05-18 00:00" should no longer be displayed).

Thanks!

Is it possible to show the selected time beside (or below) the slider? It would make the whole thing more readable.

Hello everyone, someone knows how to display just 1 marker instead of the current and the before of it?

Eg: M = Marker
M1 -> M2 -> M3 -> M2

How to display M2 without appearing M1? Or... how to display M3 without appering M1 and M2? Am I clear enough?

The slider must show just 1 Marker in each slider change

I tried follow:1 but it display the current marker and the before of it.

Hi again. I'm trying to call other layers to the map from Mapbox (on the same accessToken). The only example in the code is to get GEOJSON points from a file on the server (see bottom). If I just wanted to add layers in an html file, I would do the below. Any thoughts? Can't figure out the right fix.

addLayer(L.mapbox.tileLayer('jgieseking.8zyoyedn'), 'Base Map: Median Household Income 2010', 1);

$.getJSON("points.json", function(json) {
    var testlayer = L.geoJson(json),
        sliderControl = L.control.sliderControl({
            position: "topright",
            layer: testlayer
        });

Hello, I have recently added the LeafletSlider to a project I'm working on that visualizes GeoJSON files. So far it has worked well for me, thanks for writing it! I do have a question as to why a global map variable is required in startSlider. Personally, I would prefer to pass map in the constructor or as an argument in startSlider to avoid cluttering my top-level namespace. Is there a particular reason this module is not fully self-contained?

Not sure if this Project is alive, but the slider is not working in IE 11 on Windows 10. When you click the slider, the whole map scrolls just as if the slider Control wasn't there. Works fine in chrome. I'll try to have a look at the issue myself.

Hi great job on this slider. It is very useful. I wanted to report an issue though where there is a memory leak that I believe is related to not unbinding the mousedown and mouseup events in the onRemove. I happen to be creating a removing the old slider control and creating a new slider control when my data is updated, and I saw the memory usage increasing. Using the Chrome dev tools, I found that it was related to the slider control. I made an update to the code to unbind the listeners in the onRemove, and the memory leak has gone away. If you want me to send you my version of the code, please let me know.

Hello! Is there a way to display more data (markers) that share the same datetime?

It looks like it creates a "step slider" for each marker in the layerGroup. So ... to solve this, I did the following:

    if (date.includes(layer.options.time)) {
                options.markers[index_temp] = layer;
            }
            else {
                options.markers[index_temp] = layer;
                date.push(layer.options.time)
                ++index_temp;
            }

• I am manipulating the size of the slider if there are equal times. If the datetime exists it doesn't increase the size and if it doesn't exist it increases. And it worked!!

But now ... data that shares the same datetime is not displayed, just one marker instead of two (for example)! How can I make this work?

PS:
I have 2 layers (polygon and custom marker) with the same datetime : 04/07/2020 13:00:00, but only the polygon is displayed, I just want to displayed both at the same time.

Thank you! Hope you can help me!

Love using Leaflet. Slider works well for desktop, but I find I can't use it with a touch screen - I just end up moving the map around. Is there any workaround?

I have a time-series choropleth that works well with the plugin. However, I'd like to do two of these side-by-side on a website. But I keep getting error messages and can see the slider, but can't click on it/slide it. Is there some kind of trick to using this work multiple maps?

Hi, I try to use the leadletslider for the markers based on time. The marker_list is a list of the markers like
L.marker(latlng, { time: feature.properties.time, icon: treeIcon });

I tried to sorted the marker_list based on the time, but once passed into the layerGroup, the seq is not persistent.

var layerGroup = L.layerGroup(marker_list);
var sliderControl = L.control.sliderControl({
        position: 'sliderright',
        timeAttribute: "time",
        layer: layerGroup,
        range: true,
        timeStrLength: 22,
        showAllOnStart:true
   });

mymap.addControl(sliderControl);
sliderControl.options.markers.sort(function(a, b) {
        return (a.feature.properties.time > b.feature.properties.time);
});
sliderControl.startSlider();

I also try the method others recommended to sort the markers after addControl, and the slider is still not in time order, how can I fix it? Thanks

How can I change the marker in this plugin?

Any way I can place the slider off the map?

Apparently you have to add these two stylesheets in index.html for the time-slider to show up (for my case):

Hey,

Thanks for this great plugin.
I would really appreciate if you can help me in clustering the markers inside layerGroup.
I search over internet but nothing worked well.

so will be glad if you can help me out in this.

also is there any way that i can put a play button on map and on click event slider starts moving till the end.

Thanks,
Jay

The gh-pages branch no longer works, because of access rules.
This request has been blocked; the content must be served over HTTPS.

Hi! Great tool.

Is it possible to have all objects that share the same time to show at once? Lets say I have 5 objects, two of the have the same time, I want both of them to be visible at the same time. Also is there a function I could call to step forward or backward one timestep instead of using the slider?

Best Regards,

Kristian

Hi Dennis,

thank you so much for creating such a great plugin! This is exactly what I need for a project I am working on. I have implemented in my code and it works great. However, I do have a small issue that I hope you would give me some help. When I open the map in IE (i'm using IE version 11.0.31), the map moves when I slide the timer slider. However, I don't have the problem with Chrome.

Below is a simple demo code that I mocked up using your instruction codes:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
        <script src="SliderControl.js"></script>
    </head>

    <body>
        <h2 id="Time slider test"></h2>

        <div id="map" style="height: 600px; border: 1px solid #AAA;"></div>

        <script>
            var map=L.map("map").setView([51.6, -0.09], 10);

            var streetLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
                maxZoom: 18,
                id: '********',
                accessToken: '**********'
            }).addTo(map);

            var marker1 = L.marker([51.5, -0.09], {time: "2013-01-22 08:42:26+01"});
            var marker2 = L.marker([51.6, -0.09], {time: "2013-01-22 10:00:26+01"});
            var marker3 = L.marker([51.7, -0.09], {time: "2013-01-22 10:03:29+01"});

            var pointA = new L.LatLng(51.8, -0.09);
            var pointB = new L.LatLng(51.9, -0.2);
            var pointList = [pointA, pointB];

            var polyline = new L.Polyline(pointList, {
                    time: "2013-01-22 10:24:59+01",
                    color: 'red',
                    weight: 3,
                    opacity: 1,
                    smoothFactor: 1
            });

            layerGroup = L.layerGroup([marker1, marker2, marker3]);
            var sliderControl = L.control.sliderControl({layer: layerGroup}).addTo(map);
            sliderControl.startSlider();
        </script>
    </body>
</html>

If I wanted to briefly stop the process of markers being added to the map, what portion of the code would I need to alter?

For instance, I understand that lines 131 through 165 of the code control markers from being cleared from the slider. I'm interested in the opposite...

Thanks for a cool plug-in. Saved me a bunch of time!

To consider:
The current demo uses 1.0.0 as the leaflet base. I ran into an issue where LayerGroups did not set options correctly in 1.0.0 (which is needed for setting timestamps correctly). Updating to 1.3.4 fixed the issue for me (this was corrected in leaflet sometime between 1.0.0 and 1.3.4), so perhaps moving the demo up to the current version might prevent others from running into the same bug.

The example is broken and should probably be updated to point to tiles.openstreetmap.org

I am using the sample code from your Github page

var marker1 = L.marker([51.5, -0.09]);
var marker2 = L.marker([51.6, -0.09]);
var marker3 = L.marker([51.7, -0.09]);
var marker4 = L.marker([51.8, -0.09]);

var pointA = new L.LatLng(51.8, -0.09);
var pointB = new L.LatLng(51.9, -0.2);
var pointList = [pointA, pointB];

var polyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 1,
    smoothFactor: 1
});


layerGroup = L.layerGroup([marker1, marker2, marker3, marker4, polyline]);
var sliderControl = L.control.sliderControl({ layer: layerGroup });
map.addControl(sliderControl);
sliderControl.startSlider();

any suggestions?

Thanks

Hi there

This is a feature request, what I think would be great is adding a control to either the start or end date for the visible bits. This way you could see any continuous part of time, from a day, a week, or a month. Bonus would be if you could set it to, say, a month, then drag that month along, so that you see a month at a time.

Cheers,

Alex

Is there a way to autoplay the slider and repeat for continuous animation?

I have my json features and I would to view them by the "year" in order from (1979-2019) using the slider. My slider works but the years are jumbled in a random order.

Does anyone know how to achieve this?

Is it possible to use json with a start and a end time, not only a Event on a specific date.
So my json looks like:
I like to use the "range: true"

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "starttime": "2018-01-22 08:42:26", "endtime": "2018-01-24 12:40:01" }, "geometry": { "type": "Point", "coordinates": [ 13.582512743, 46.933292258, 1 ] } },

I get this error when I tried to use version 0.6.4:

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined leaflet.js:6
o.Util.stamp leaflet.js:6
o.Map.o.Class.extend.addLayer leaflet.js:6
$.slider.slide SliderControl.js:88
$.Widget._trigger jquery-ui.js:822
$.widget._slide jquery-ui.js:12454
(anonymous function) jquery-ui.js:432
$.widget._mouseCapture jquery-ui.js:12342
(anonymous function) jquery-ui.js:432
$.widget._mouseDown jquery-ui.js:929
(anonymous function) jquery-ui.js:432
(anonymous function) jquery-ui.js:891
b.event.dispatch jquery-1.9.1.min.js:3
v.handle jquery-1.9.1.min.js:3

I'm pretty new to Leaflet so can you help me on that one? Can't figure out what to do.

Best regards,

Olivier

I really don't understand js, but can't see any other references to the uppercase version in the code

Firstly, thank you for your work at making this handy control. There appears, however, to be a mismatch between what point appears and at which time it appears. Specifically, in your example the second point (at 7.602516645, 51.94962073) appears at time 10:03:29 (which corresponds to the third point in points.json) and at the fourth position on the slider. Simply adjusting offsets in the startSlider portion of SliderControl.js felt kludge...do you think there's a better fix?

i managed to run the demo from gh-pages branch locally but i wonder:

How could i add the functionality of clickable hyperlinks (url) to the datapoints in the points.json file so that the user can click on the markers and visit the url?

if i add an url property to the poinsts.json file:

        {
            "type": "Feature",
            "properties": {
                "time": "2013-01-22 11:39:27+01",
                "url": "http://github.com"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    7.950666426,
                    52.169228982,
                    1
                ]
            }
        }

it is not clickable.

How can we change the icon of these markers?

Is it possible to change the slider thickness or length? Thanks for your support.

[[{"id":1,"lng":42.474886,"lat":37.878424,"time":1590994287,"color":"green","renk":"green","radius":5,"info":"nam"}], [{"id":1,"lng":42.831962,"lat":39.920364,"time":1591080687,"color":"green","renk":"green","radius":5,"info":[]}, {"id":1,"lng":42.831962,"lat":39.920364,"time":1591080687,"color":"green","renk":"green","radius":5,"info":[]}, {"id":1,"lng":42.831962,"lat":39.920364,"time":1591080687,"color":"green","renk":"green","radius":5,"info":[]}, {"id":1,"lng":40.696816,"lat":38.403603,"time":1591167082,"color":"green","renk":"green","radius":5,"info":[]}, {"id":1,"lng":40.696816,"lat":39.403603,"time":1591170681,"color":"green","renk":"green","radius":5,"info":[]}, {"id":1,"lng":40.696816,"lat":40.403603,"time":1591174267,"color":"green","renk":"green","radius":5,"info":[]}], [{"id":2,"lng":42.831962,"lat":39.920364,"time":1591080688,"color":"blue","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":38.503603,"time":1591167077,"color":"blue","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":38.523603,"time":1591170687,"color":"blue","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":40.803603,"time":1591174280,"color":"blue","dir":60,"renk":"blue","radius":10,"info":[]}], [{"id":2,"lng":42.831962,"lat":36.920364,"time":1591080688,"color":"yellow","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":36.503603,"time":1591167077,"color":"yellow","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":36.523603,"time":1591170687,"color":"yellow","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":40.696816,"lat":36.803603,"time":1591174280,"color":"yellow","dir":60,"renk":"blue","radius":10,"info":[]}], [{"id":2,"lng":44.831962,"lat":36.920364,"time":1591080688,"color":"orange","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":44.696816,"lat":36.503603,"time":1591167077,"color":"orange","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":44.696816,"lat":36.523603,"time":1591170687,"color":"orange","dir":60,"renk":"blue","radius":10,"info":[]}, {"id":2,"lng":44.696816,"lat":36.803603,"time":1591174280,"color":"orange","dir":60,"renk":"blue","radius":10,"info":[]}], [{"id":3,"lng":47.133951,"lat":42.403603,"time":1570994287,"color":"red","renk":"red","radius":8,"info":[]}, {"id":3,"lng":48.896782,"lat":41.025706,"time":1591080685,"color":"red","dir":180,"renk":"red","radius":8,"info":[]}, {"id":3,"lng":48.388503,"lat":40.915416,"time":1591167087,"color":"red","dir":180,"renk":"red","radius":8,"info":[]}, {"id":3,"lng":45.300416,"lat":37.010493,"time":1591170688,"color":"red","dir":180,"renk":"red","radius":8,"info":[]}, {"id":3,"lng":40.182588,"lat":37.935770,"time":1591174287,"color":"red","dir":180,"renk":"red","radius":8,"info":[]}]]

Slider can be made with the geojson category, but how can I make a slider in the data in the above format

Hi, I really liked your time slider. It works perfectly with what I needed. However, I was just curious as to how I could add a feature where it could auto play, doesn't need to loop.

Hey,

I have one another issue.
Can i work with multiple layers in slidercontrol.

As right now i am not able to figure out any solution.

Thanks,
Jay

If the data is not in time order, as the slider is moved appear in the order presented in the json. This may be hard to work around, but should be noted in the ReadMe.

This can be demonstrated by moving one of the Features from near the bottom to the top in the demo. It's easy to see because the sample is of something moving more or less in a line across the page.

This Stackoverflow discussion describes a fix. Maybe it could be used to add an option to sort.

If I could get it working for my own case maybe I could be more specific. But I'm lost in Leaflet and JS at the moment.

@Falke-Design

Using example code from your updated repo or README,

var marker1 = L.marker([51.5, -0.09], {time: "2013-01-22 08:42:26+01"});
var marker2 = L.marker([51.6, -0.09], {time: "2013-01-22 10:00:26+01"});
var marker3 = L.marker([51.7, -0.09], {time: "2013-01-22 10:03:29+01"});

var pointA = new L.LatLng(51.8, -0.09);
var pointB = new L.LatLng(51.9, -0.2);
var pointList = [pointA, pointB];

var polyline = new L.Polyline(pointList, {
    time: "2013-01-22 10:24:59+01",
    color: 'red',
    weight: 3,
    opacity: 1,
    smoothFactor: 1
});


layerGroup = L.layerGroup([marker1, marker2, marker3, polyline ]);
var sliderControl = L.control.sliderControl({layer:layerGroup});
myMap.addControl(sliderControl);
sliderControl.startSlider();

the page returns this error:

SliderControl.js:55 Uncaught TypeError: Cannot read property 'properties' of undefined
at compare (SliderControl.js:55)
at Array.sort ()
at i.onAdd (SliderControl.js:85)
at i.addTo (leaflet.js:5)
at i.addControl (leaflet.js:5)
at (index):59

Error does not appear when using geoJSON().

Any idea what's going on?

(example at: https://geyerbri.github.io/LeafletSlider/test.html)
(code at: https://github.com/geyerbri/LeafletSlider/blob/master/test.html)

I am trying to implement this slider on a Mapbox map that I've made, but am having trouble setting my map as the base layer because it's not an OpenStreetMap map. If I try to call a Mapbox map to myMap for the slider or the tileLayer, neither work. Ideas? Thanks!

For example, I call the following:

...
L.mapbox.accessToken = 'pk.eyJ1IjoiamdpZXNla2luZyIsImEiOiJIMzEyUzJzIn0.aHScV4IcDZF3unbDoSwjEA';
var map = L.mapbox.map('map', 'jgieseking.dw9suh8g').setView([40.7178,-73.9554], 12);
...
// then comes the leaflet code...

var sliderControl = null;
var myMap = L.map('map').setView([40.7178,-73.9554], 12);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

Hello! I'm using leaflet-slider for a project and ran into a bit of an issue. I was hoping that you could help me out.

I'm calling my markers from a MySQL database and encoding them into JSON so that they will dynamically update whenever my database is updated. All data relating to every marker is stored in one variable called "markers." I'm attempting to implement the leaflet-Slider with a layer group only consisting of my variable called "markers."

So this is what my JavaScript looks like (after the necessary JS files have been called):

<script>
var json_data = <?php echo json_encode($data); ?>;

function init() {
  var sliderControl = null;

  var map = L.map('map', { zoomControl: false })
  .setView([41.146, -98.086], 4);
  new L.Control.Zoom({ position: 'topright' }).addTo(map);

  map.scrollWheelZoom.disable(); // disables the mouse wheel scroll...
    map.once('focus', function() { map.scrollWheelZoom.enable(); });// at least until you click once on the map
      mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
      L.tileLayer(
        'http://a.tile.mapbox.com/v3/odorsey.jnj5k592/{z}/{x}/{y}.png', {
        maxZoom: 18
        }).addTo(map);
  map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

  for (var i = 0; i < json_data.length; i++) {
    var markers = L.marker([json_data[i].latitude, json_data[i].longitude], {customID: json_data[i].victimID})
    .bindPopup(json_data[i].firstName + ' ' + json_data[i].lastName + '<br>' + '<strong>Date:</strong>' + ' ' + json_data[i].dateOccurred)
    .addTo(map);
  }

  layerGroup = L.layerGroup([markers]);
  var sliderControl = L.control.sliderControl({layer:layerGroup, follow: true});
  map.addControl(sliderControl);
  sliderControl.startSlider();

  map.on('popupopen', function(centerMarker) {
    var cM = map.project(centerMarker.popup._latlng);
    cM.y -= centerMarker.popup._container.clientHeight/350
    map.setView(map.unproject(cM),13, {animate: true});
  })
} //end of function init()

However, when I try and implement all of this, I get an error in the console stating that
$(...).slider is not a function... any idea on what I might be doing wrong? Thanks in advance!

I would like to integrate the time slider into a JSONP geoserver. Here is the current code I have http://jsfiddle.net/qcwcrwge/26/ and I would like to use the time slider with a layer called feature.properties.time.

I have tried to add the time slide libraries and the lines

 var testlayer = L.geoJson(json),
        sliderControl = L.control.sliderControl({
            position: "topright",
            layer: feature.properties.time
        });

    //For a Range-Slider use the range property:
    sliderControl = L.control.sliderControl({
        position: "topright",
        layer: feature.properties.time,
        range: true
    });

    //Make sure to add the slider to the map ;-)
    myMap.addControl(sliderControl);
    //And initialize the slider
    sliderControl.startSlider();

Just after the line

}).addTo(coolPlaces);

But it does not work. Do you know what the problem can be?

Thanks.

Dear @dwilhelm89 ,

I'd like to show a map with multiple sliders that modify the colors of a choropleth map. Do you believe this is possible to hack above your plugin, or would that require a completely different architecture?

Cheers,

François

How can this be used with markers inside a canvas?

Tested with latest Firefox. (Hint: https/http mixing)

So I've been trying to get this to work with the bindPopup feature in leaflet once the data points are placed by I can't seem to get them to appear.

Currently I'm setting the data points as follows:

`var Circles = L.geoJSON(someFeatures, {
pointToLayer: function(feature, latlng) {
var col = getColor(feature);
return L.circle(latlng, {
color: col,
fillColor: col,
fillOpacity: .5,
opacity: .5,
radius: 2
});
},

onEachFeature: onEachFeature
});`

I'm displaying a few thousand points so the circles look better and perform better for me.

For the onEachFeature I'm simply just setting the pop up as follows:

function onEachFeature(feature, layer) { if (feature.properties && feature.properties.popupContent) { layer.bindPopup('test'); layer.on('mouseover', function(e) { this.openPopup(); }); } }

I had the popup being set to other things but this is my foolproof debugging mode, I know its brilliant.

So the problem I'm facing is that I'm not getting any sort of popup for a mouseover (or an click for that matter when I change the 'mouseover' to 'click'.

I know that I haven't lost the functionality to click the page because I created an event listener for:
`
mymap.on('click', function(){
alert('test');
});

`
And when I click on the map I still get a response so at least that layer is responding.

Now the current rabbit hole that I am down is that maybe because of the way that the slider creates a bunch of layers to display all the points its just overloading leaflet (keep in mind I'm dealing with thousands of points) or maybe the map is just being brought to the front and overriding the clicks (but I tried to move it to the back with mymap.bringToBack() with no change in functionality).

Just wondering if anyone else has managed to make this work/ has had a similar problem to me with this. I'll try it with a smaller data set to try and see if its a data size issue but I really don't think that's the case because you would think that the map layer would stop responding as well if that were the problem.

Also sorry about poor formatting (battery dying and I left my charger at work) I'll try and fix it tomorrow.