Add text box on leaflet map with selected overlay layer name

Question

Relatively new JavaScript user here, first question.

So I have a choropleth leaflet map that uses a jQuery slider (via https://github.com/dwilhelm89/LeafletSlider ) to shift between years. The map contains about 50 years of global data, with each overlay layer corresponding to a layergroup containing each country's data for the appropriate year.

The purpose of the slider is to allow the user to quickly shift between years. However, I would like a visual cue to let the user know what year is being displayed at any moment. Is it possible to display something like a text box on the map that displays the name of the current overlay layer and automatically updates whenever the overlay layer switches? (the name of each layergroup is its respective year)

I know the textbox part is certainly possible ( Overlaying a text box on a leaflet.js map ), but I'm not sure how to dynamically update it with the necessary info.

Thanks. Let me know if you need my code and I'll post it.

Answer 1

I've used Leaflet, Mapbox, and Google Maps on some personal and commercial projects, and whenever I wanted to overlay some information, I'd just use simple HTML elements. All you need to do is render whatever elements you want on the screen the same way you would normally, just ensure that you use correct position and applicable positioning units and ensure you have a higher z-index on your element that you want to show, ie your year indicator, than you do on your map element. Treat it just like you would any other HTML!

Edit:

Here is an example screenshot: https://imgur.com/a/2fXf5CI . Also, if you aren't already using a position property on your Leaflet map, you should go ahead and add a position: relative; property to the selector for the map so that you can also assign it a z-index . And then, in your year indicator's styles, give it a higher z-index value than the one you gave to your Leaflet map.

Answer 2

Okay, I thought a bit and here's a quick solution.

 var sliderControl = null; var map = L.map("map").setView([51.95, 7.6], 9); L.tileLayer("//{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); //Fetch some data from a GeoJSON file $.getJSON( "https://dwilhelm89.github.io/LeafletSlider/points.json", function (json) { var testlayer = L.geoJson(json); var sliderControl = L.control.sliderControl({ position: "topright", layer: testlayer, range: true, }); //Make sure to add the slider to the map;-) map.addControl(sliderControl); //An initialize the slider sliderControl.startSlider(); } ); map.on("layeradd", function () { map.eachLayer(function (layer) { if (layer instanceof L.Marker) { let desc = document.querySelector(".description"); // desc.textContent = JSON.stringify(layer.getLatLng()); desc.textContent = layer.feature.properties.time; } }); }); // create legend const legend = L.control({ position: "bottomleft" }); legend.onAdd = function () { let div = L.DomUtil.create("div", "description"); div.className = "description"; return div; }; legend.addTo(map);

 *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } html { height: 100%; } body, html, #map { width: 100%; height: 100%; margin: 0; padding: 0; }.description { border: 1px solid black; background: #fff; }

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" /> <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css"> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script> <script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script> <div id="map"></div>

And I recommend using the newer version of this plugin;) There you have the method event And the easier way to download the data about the marker.