Geek Answers Handbook

How to remove markers when using the leaflet slider to display changes over time

I am using the Leaflet Slider from Dennis Wilhelm to try and show data changes over five years on the Leaflet map.

I try to get this when the user moves the cursor over the slider, some markers disappear and some appear. So far, I realized that a new marker appears on top of the old marker. So my question is:

How to remove markers when using the sheet slider to display changes over time? What changes should I make in the original SliderControl.js?

Thanks in advance!

Below is a link to the Dennis Wilhelm slider code:

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

+4
source share
3 answers

It may be late, but for those who are looking for it now. If you want to display changes over time and want to show specific points at a time, pass the parameter followas true, so the slider will only show one point at a time.

var sliderControl = L.control.sliderControl({
   position: "topleft",
   layer: layername,
   follow: true
});
+1
source

When I need to update the markers in a sheet, I will add my markers to the layergroup . Then I add this layer group to the map once and clear it before adding new markers. Below is a code snippet of how it might look. Thus, all markers are cleared before adding new ones. Hope this helps you.

var map = L.map('map').setView([0, 0], 2);
var markerLayerGroup = new L.LayerGroup();

map.addLayer(markerLayerGroup);

function addMarkers() {
   markerLayerGroup.clearLayers();
   markerLayerGroup.addLayer(markerVariable);
}
0

range: true , .

This is suboptimal, however, provided that you need to move 2 sliders, both the left and right slider, which represent the limits of the period that you are interested in viewing, and not just one, for example, for a snapshot at the end of the month.

Also, one increment of the slider will add 1 point to the map, and not immediately add a whole batch.

I expect there are solutions to these problems by extending the class, but I have not had time to do this yet.

here is my code:

var sliderControl = L.control.sliderControl({
   position: "topleft",
   layer: membMarksCurrent,
   range: true
});

map.addControl(sliderControl);
sliderControl.startSlider();
0
source

More articles:


All Articles