1

I currently have a leaflet choropleth of the contiguous 48 states that when you hover over a state a popup on the right side of the site this is done using "cards" (https://www.w3schools.com/howto/howto_css_cards.asp)

What I'm looking to do essentially is make the state and its popup stay when you click on it. When I move across the map, the popups change as I hover over the different states.

this is my javascript code so far that is highlighting the states

function highlightFeature(e) {
var layer = e.target;
//console.log('layer')
//console.log(layer.feature.properties.values)
let boundaryProperties = layer.feature.properties
let divToUpdate = document.getElementById("rightcontainer")
console.log('divToUpdate')
console.log(divToUpdate)
layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
});

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
    layer.bringToFront();
}
updateContentsPanel(divToUpdate,boundaryProperties)
}
function resetHighlight(e) {
    boundaryGeo.resetStyle(e.target);
}

  function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
  }

  function onEachFeature(feature, layer) {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: zoomToFeature
    });
  }
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.