CODEWITHSUNDEEP
javascriptmapbox-gl-js
noeltech
noeltech

Reputation: 37

Mapbox GL - toggle-highlight specific feature on hover using the map style

Id like to highlight a specific feature of a layer which is included in my map style when hover.. something like this:

  map.on('mousemove', function(e) {
    var states = map.queryRenderedFeatures(e.point, {
     layers: ['n_Region6 Municipals']
    });
    if (states.length > 0) {      
      map.setPaintProperty('n_Region6 Municipals', 'fill-color',' 
      {"property":"NAME_2","type":"category","stops": + 
      [[states[0].properties.NAME_2 +,"blue"]]}');    
      });

with setpaintproperty paired with data driven function I got no luck.. I tried with Filter with this.

      map.addLayer({
          "id": "state-fills",
          "type": "fill",
          "source": {
            "type": "vector",
            "url": "mapbox://noeltech.c8nzzthb"
          },
          "source-layer":"R6_Pop_byMunicipal-5cqj12",
          "layout": {},
          "paint": {
                        "fill-color": "#627BC1",
                        "fill-opacity": 0
       }
   });
   map.addLayer({
    "id": "state-fills-hover",
    "type": "line",
    "source": {
      "type": "vector",
      "url": "mapbox://noeltech.c8nzzthb"
    },
    "source-layer":"R6_Pop_byMunicipal-5cqj12",
    "layout": {},
    "paint": {
      "line-color": "#627BC1",
      "line-width": 3
    },
    "filter": ["==", "NAME_2", ""]
  });
 //  map.setLayoutProperty('n_Region6 Municipals', 'visibility', 'none');

});
 map.on("mousemove", "state-fills", function(e) {
    map.setFilter("state-fills-hover", ["==", "NAME_2", 
   e.features[0].properties.NAME_2]);

it does what i want to do but it makes me add another layer and I dont want that. i want to use the layer in my map style.like the first code. how to do it in simple code?

Upvotes: 2

Views: 1508

Answers (2)

noeltech
noeltech

Reputation: 37

I got it working with this code: 

    var highlight =   {
           property: 'NAME_2',
           type: "categorical",
           stops: [[MunicipalName, 'blue']]
         };
   map.setPaintProperty('n_Region6 Municipals', 'fill-color', highlight);

the problem now is I didn't consider that it would color the rest of polygon black. IS there any simple way how to highlight a single feature without adding more layers? Highlights blue but change all the colors

Upvotes: 0

mollymerp
mollymerp

Reputation: 1602

You need to use "type":"categorical"

and the syntax would be 

map.setPaintProperty('n_Region6 Municipals', 'fill-color',{
  "property":"NAME_2",
  "type":"categorical",
  "stops":[
    [states[0].properties.NAME_2,"blue"],
    ],
  "default": "red"
});

Upvotes: 2

Related Questions