CODEWITHSUNDEEP
javascriptwordpressleaflet
Melinda
Melinda

Reputation: 93

Leaflet map click change color and then remove when clicking again

I am using Leaflet for a map of the USA and I have click function to zoom in and change color of a state. This works but I cannot get the color to go back to previous color when clicking on another state. Currently every time I click on a state the color changes and does not remove the previous color change.

This is my code:

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{z}/{x}/{y}.png?access_token=...', {
    maxZoom: 8,
    minZoom: 4,
    attribution: ' ',
    id: 'mapbox.light',
    attribution: '<a target="_blank" href="https://www.mapbox.com/">Mapbox</a>'
}).addTo(map);

    // get color depending on population density value
    function getColor(d) {
        return d < 1 ? '#173e34' : //green
                       '#e1cb7f'; //yellow

    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 1,
            color: '#fff',
            dashArray: '',
            fillOpacity: 0.9,
            fillColor: 'red'
        });

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

        info.update(layer.feature.properties.availability);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

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

    }

    function onEachFeature(feature, layer) {
            layer.on({
                //mouseover: highlightFeature,
                //mouseout: resetHighlight,
                click: function(e){
                    map.fitBounds(e.target.getBounds());
                            var layer = e.target;
                    layer.setStyle({
                    weight: 1,
                    color: '#fff',
                    dashArray: '',
                    fillOpacity: 0.9,
                    fillColor: 'red'
                   });
                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                    }
                    info.update(layer.feature.properties.availability);
                            }
                    });
                }

    geojson = L.geoJson(statesData, {
        style: style,
        pointToLayer: function (feature, latlng) {
                        return L.marker(latlng, {icon: myIcon});
        },
        onEachFeature: onEachFeature
}).addTo(map);

This is the page with the map: https://www.thekeithcorp.com/interactive-map/

Any help would be appreciated, Thanks!

EDIT

I tried this but still not working, what have I done wrong?

  var prevLayerClicked = null;


function onEachFeature(feature, layer) {
        layer.on({
            //mouseover: highlightFeature,
            //mouseout: resetHighlight,
            click: function(e){
                 if (prevLayerClicked !== null) {
                                // Reset style
                                prevLayerClicked.setStyle({
                                            weight: 2,
                                            opacity: 1,
                                            color: 'white',
                                            dashArray: '',
                                            fillOpacity: 1.9,
                                            fillColor: getColor(feature.properties.availability)});

        }
                map.fitBounds(e.target.getBounds());
                var layer = e.target;

                        layer.setStyle({
                            weight: 1,
                            color: '#fff',
                            dashArray: '',
                            fillOpacity: 0.9,
                            fillColor: 'red'
                        });

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

    info.update(layer.feature.properties.availability);
    prevLayerClicked = layer;
                }
    });
}

Upvotes: 2

Views: 8094

Answers (3)

Melinda
Melinda

Reputation: 93

Got this to work using this:

var prevLayerClicked = null;

function onEachFeature(feature, layer) {
  layer.on({

    // mouseover: highlightFeature,
    // mouseout: resetHighlight,

    click: function(e){
      if (prevLayerClicked !== null) {
          // Reset style
        prevLayerClicked.setStyle({
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '',
          fillOpacity: 1.9,
          fillColor: getColor(feature.properties.availability)
        });
      }
      map.fitBounds(e.target.getBounds());
      var layer = e.target;
      layer.setStyle({
        weight: 1,
        color: '#fff',
        dashArray: '',
        fillOpacity: 0.9,
        fillColor: 'red'
      });
      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
      //info.update(layer.feature.properties.availability);
      prevLayerClicked = layer;
    }
  });
}

Had to remove:

info.update(layer.feature.properties.availability);

Upvotes: 5

Evhz
Evhz

Reputation: 9246

The following code is working with [email protected].
Add a property in layer object to keep the click/selected state: 

var mystyle = { 
  default: {
    "color": "#ff7800",
    "weight": 2,
    "opacity": 0.5
  },
  click: {
    "color": "#123456",
    "weight": 3,
    "opacity": 0.7
  }
}

layer.on('click', function(e) {
  if(e.layer.selected) {
    e.layer.setStyle(style.default);
    e.layer.selected = false;
  } else {
    e.layer.setStyle(style.click);
    e.layer.selected = true;
  }
});

Upvotes: 2

Baptiste
Baptiste

Reputation: 1785

You should try something like that:

var prevLayerClicked = null;

function onEachFeature(feature, layer) {
    layer.on({
        click: function(e){
            // If you have a layer inside  this variable
            if (prevLayerClicked !== null) {
                // Reset style
                prevLayerClicked.setStyle({yourPreviousStyleHere});
            }

            // Do your things here
            map.fitBounds(e.target.getBounds());
            var layer = e.target;
            [...]

            // Store clicked layer into this variable
            prevLayerClicked = layer;
        }
    });
}

Upvotes: 5

Related Questions