Tengo una ruta de datos geoJson para crear un mapa en un sitio web. Me gustaría que el panel de información se llene con información cuando el usuario hace clic en una capa en el mapa y que el panel de información y resaltado se restablezca cada vez que se haga un nuevo clic en una parte diferente del mapa. Actualmente, el panel de información se restablece cada vez que "haces el mouse fuera" de la capa. No estoy seguro de cómo codificar para que el cuadro de información permanezca poblado con la información hasta que haya un nuevo clic.
function createMap(lat,lon,zl){ map = L.map('map').setView([lat,lon], zl); L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'light-v10', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1Ijoic2FyYWhwZXJlejEiLCJhIjoiY2t0MG9hZDNnMDZ2NDJ1c2M5dzBmb201OSJ9.5fv8NqX5cfA0NMcmEW_63g' }) } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature, }); } // on mouse over, highlight the feature function highlightFeature(e) { var layer = e.target; // style to use on mouse over layer.setStyle({ weight: 2, color: '#666', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } createDashboard(layer.feature.properties); info_panel.update(layer.feature.properties); } // on mouse out, reset the style, otherwise, it will remain highlighted function resetHighlight(e) { geojson_layer.resetStyle(e.target); info_panel.update() // resets infopanel } // on mouse click on a feature, zoom in to it function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); }