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

Question

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?

mollymerp · Accepted Answer · 2017-08-14 20:06:44Z

2

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"
});

answered Aug 14, 2017 at 20:06

mollymerp

1,60210 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

noeltech Over a year ago

This could work..didn't try it yet cause I got it working with passing an object carrying the fill-color parameters

noeltech · Accepted Answer · 2017-08-16 05:21:42Z

0

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

answered Aug 16, 2017 at 5:21

noeltech

375 bronze badges

4 Comments

mollymerp Over a year ago

yes. you set the default color to a color that is translucent i.e. rgba(0,0,0,0)

noeltech Over a year ago

but i want the rest to remain the same as they were..maybe data driven function is not the answer for highlighting features within the map style.

mollymerp Over a year ago

you could use data-driven styling – you would have to set default to the current value of the rest of the features, but this is not the most performant approach because it involves recomputing the feature attribute buffers for every single feature in the layer when you only need to change one feature. I would use 2 layers with filters instead.

noeltech Over a year ago

Thanks for saying that two layers and filter approach..it helps a lot someone from Mapbox confirming that is the best way to do it at this moment..

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related