Usuario de JavaScript relativamente nuevo aquí, primera pregunta.
Así que tengo un mapa de folletos de coropletas que usa un control deslizante jQuery (a través de https://github.com/dwilhelm89/LeafletSlider ) para cambiar entre años. El mapa contiene aproximadamente 50 años de datos globales, con cada capa superpuesta correspondiente a un grupo de capas que contiene los datos de cada país para el año correspondiente.
El propósito del control deslizante es permitir al usuario cambiar rápidamente entre años. Sin embargo, me gustaría una señal visual para que el usuario sepa qué año se muestra en cualquier momento. ¿Es posible mostrar algo como un cuadro de texto en el mapa que muestre el nombre de la capa de superposición actual y se actualice automáticamente cada vez que cambie la capa de superposición? (el nombre de cada grupo de capas es su año respectivo)
Sé que la parte del cuadro de texto es ciertamente posible ( superposición de un cuadro de texto en un mapa de leaflet.js ), pero no estoy seguro de cómo actualizarlo dinámicamente con la información necesaria.
¡Gracias! Avísame si necesitas mi código y lo publicaré.
He usado Leaflet, Mapbox y Google Maps en algunos proyectos personales y comerciales, y cada vez que quería superponer alguna información, solo usaba elementos HTML simples. Todo lo que necesita hacer es representar los elementos que desee en la pantalla de la misma manera que lo haría normalmente, solo asegúrese de usar la position correcta y las unidades de posicionamiento aplicables y asegúrese de tener un z-index más alto en su elemento que desea mostrar, es decir, su indicador de año, que lo hace en su elemento de mapa. ¡Trátelo como lo haría con cualquier otro HTML!
Editar:
Aquí hay una captura de pantalla de ejemplo: https://imgur.com/a/2fXf5CI . Además, si aún no está utilizando una propiedad de position en su mapa de folleto, debe seguir adelante y agregar una position: relative; property al selector del mapa para que también pueda asignarle un z-index . Y luego, en los estilos de su indicador de año, asígnele un valor de z-index más alto que el que le dio a su mapa de folleto.
Bien, pensé un poco y aquí hay una solución rápida.
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: '© <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>Y recomiendo usar la versión más nueva de este complemento;) Ahí tienes el evento de método Y la forma más fácil de descargar los datos sobre el marcador.