1

I am having trouble reseting styles for my polygons when the "mouseout" happens.

Below is my current code:

The countriesLayer is the variable for geoJson data of coordinates of different countries.

As you can see there are 4 functions: highlightFeature, resetHighlight, zoomToFeature and lastly countriesOnEachFeature.

I don't have any problem with other 3 functions, but "resetHighlight"...

According to the Mapbox documentation, it says I just have to use geojson.resetStyle, but it doesn't seem to work.

Can anyone please help me solve this issue?

<script>
    L.mapbox.accessToken = 'pk.eyJ1IjoidGhsZWUxMTIyIiwiYSI6ImNpeWdyd2tycDAzZTUzMm12eDcybjJocTgifQ.r1njnGgI95MNlwVBTm1slw';
    var map = L.mapbox.map('map') 
        .setView([16.541430, 7.558594], 3);

    // Use styleLayer to add a Mapbox style created in Mapbox Studio
    L.mapbox.styleLayer('mapbox://styles/thlee1122/ciyhpbj15003d2sluqt6ylrqa', {zoomControl: false}).addTo(map);

    //Disable zooming and scrolling
    map.dragging.disable();
    map.touchZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();
  
  L.geoJSON(countriesLayer, {
      style: function(feature) {
        switch(feature.properties.title) {
          case 'France': return {
            color: "#3ca0d3" 
          };
          case 'China': return {
            color: "#f86767"
          };
          case "Korea": return {
            color: "#e7857f"
          };
          case "Span": return {
            color: "#fa946e"
          };
          case "United States of America": return {
            color: "#9c89cc"
          }
        }
      },

      onEachFeature: countriesOnEachFeature
    }).addTo(map);
  
    function highlightFeature(e) {
      var layer = e.target;
      layer.setStyle(
        {
          weight: 5,
          color: 'black',
          fillColor: 'grey',
          fillOpacity: 0.2
        }
      )

      if(!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
      }
    }

    function resetHighlight(e) {
      geojson.resetStyle(e.target)
    }

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

    function countriesOnEachFeature(feature, layer) {
      layer.on(
        {
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature  
        }
      )
    }
</script>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.