I have a geoJson data path to create a map on a website. I would like for the info panel to populate with information when the user clicks on a layer in the map and for the highlight and info panel to reset whenever there is a new click on a different portion of the map. Currently, the info panel resets whenever you "mouseout" of the layer. I am not sure how to code for the infobox to stay populated with the information until there is a new click.
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());
}