CODEWITHSUNDEEP
javascriptjquerycssleafletgeojson
Bsal
Bsal

Reputation: 21

Leaflet clicking on features

So, I'm trying to map bus routes using leaflet w/geojson for the coordinates. I'm having a difficult time with one aspect where, on a click, the bus line is boldened, and, ideally, the last clicked on feature returns to the default style.

What I have so far

function $onEachFeature(feature, layer) {
   layer.on({
    click: function(e) {
        //calls up the feature clicked on
        var $layer = e.target;

        var highlightStyle = {
            opacity: 1,
            weight: 5
        };

        $layer.bringToFront();
        $layer.setStyle(highlightStyle);
    }
 }); 
}

//imagine all the leaflet map tile code here

//this is where the features get added in and the $oneachfeature function
var busFeature = L.geoJson(busRoutes, {
     style: defaultBusRouteColor,
     onEachFeature : $onEachFeature
});

busFeature.addTo(map);

Above, what I have now successfully changes the style of the feature to what's in highlightStyle. However, when another feature is clicked, the style remains. How do I remove the previously clicked on feature's style so that only one feature at a time has the style highlightStyle?

Things I've already tried: using addClass/removeClass to jQuery methods, layer.resetStyle() with leaflet, and a bunch of other things that still didn't work. Note: this would ideally be used in a mobile version, as the desktop version uses a hover function that emphasizes the features, with no problem. this:

function $oneachfeature(feature, layer){
   layer.on({
      mouseover: function (e){makes feature bold}
 });
   layer.on({
      mouseout: function (e){makes feature normal again}
 });
}

Any suggestions?

Upvotes: 1

Views: 9382

Answers (3)

Brian Mayrose
Brian Mayrose

Reputation: 59

Remove previous Highlight before adding the next:

.removeLayer() works to remove the previously set geoJSON selection using .addTo()

theMap = yourMap.Map
geoJson = yourMap.geoJSON();

onclick() {
    const highlightedFeature = {
      'color': '#12FF38',
      'fillColor': '#30D8E0',
      'fillOpacity': 0.3
    };

    this.theMap.removeLayer(this.geoJson);

    this.geoJson = yourMap.geoJSON( Feature, {
       style: highlightedFeature
    });
        
    this.geoJson.addTo(this.theMap);
}

Upvotes: 0

Gmak
Gmak

Reputation: 1

using resetStyle() would seem to be an easier solution...simply reset the style of the layer before applying the new style to the feature. This requires only a sinlge line of code adding to your original function:

function $onEachFeature(feature, layer) {
    layer.on({
    click: function(e) {
        //calls up the feature clicked on
        var $layer = e.target;

        var highlightStyle = {
            opacity: 1,
            weight: 5
        };
        busFeature.resetStyle();
        $layer.bringToFront();
        $layer.setStyle(highlightStyle);
    }
}); 
}

Upvotes: 0

iH8
iH8

Reputation: 28688

Store a reference to the highlighted layer so you can later call resetStyle on it:

// Variable to store selected
var selected

// Create new geojson layer
new L.GeoJSON(collection, {
  // Set default style
  'style': function () {
    return {
      'color': 'yellow',
    }
  }
}).on('click', function (e) {
  // Check for selected
  if (selected) {
    // Reset selected to default style
    e.target.resetStyle(selected)
  }
  // Assign new selected
  selected = e.layer
  // Bring selected to front
  selected.bringToFront()
  // Style selected
  selected.setStyle({
    'color': 'red'
  })
}).addTo(map)

Upvotes: 7

Related Questions