How to cerate hover effect in geojson mapbox

Question

I am using MAP-BOX to draw map on the screen. I want to create some effect on mouse-hover. I created line using geojson source and react-map-gl as a wrapper. I want to set some opacity to the line on mouse hover.

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': '#E95617',
      'line-width': 2,
      'line-dasharray':[1,2,3]
  }
}

export const route1={
    
  type: "Feature",
  properties: {
      id="route1"
  },
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168,31.780632],
        [76.993894,31.781929],
        [76.997771,31.783204 ],
        //------ more data
    ]
  }
}

import ReactMapGL,{Source, Layer} from "react-map-gl";
const Routes=()=>{
    return <ReactMapGL {...props}>
        <Source type="geojson" data={tempdata.route1}>
            <Layer {...tempdata.layer}/>
        </Source>

        <Source type="geojson" data={tempdata.route2}>
            <Layer {...tempdata.layer1}/>
        </Source>
    </ReactMapGL>
}

When i opened browser console and looked for id route and route then it reports me null. I did not saw any example or documentation to add class-name into geojson source. How can i create hover effect?

https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/ it provides a way, but we need to use native api. — Rahul, Nov 04 '20 at 03:26

score 2 · Answer 1 · answered Jan 15 '21 at 20:04

To add a hover effect you will want to use their Feature-state API. Firstly, here is the [link(https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/) to a great run through from Mapbox, but I will go through the steps below

I have not used react-map-gl but I hope this still applies as the comment above suggested that you needed to use the Mapbox API to set it up.

I think you need to put your id property outside of the properties property. Plus Mapbox ids must be integers.

Therefore something like this might work:

const sourceData = {
  type: "Feature",
  properties: {
      id=1
  },
 id:1
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168,31.780632],
        [76.993894,31.781929],
        [76.997771,31.783204 ],
        //------ more data
    ]
  }
}

That might fix most of it.

The second part is that you have no hover effect. You can add this to the code that sets up the layer in the first place.

    map.addLayer({
      id: <name of the layer>,
      type: "fill",
      source: <name of the source> ,
      paint: {
        "fill-color": ["get", "colour"],
        "fill-opacity": [
          "case",
          ["boolean", ["feature-state", "hover"], false],
          1,
          0.4,
        ],
      },
    });

This is the code that applies the hover opacity change. The default is false when there is no hover, so 0.4 is applied by default and then an opacity of 1 on hover.

"fill-opacity": [
          "case",
          ["boolean", ["feature-state", "hover"], false],
          1,
          0.4,
        ],

To get this setup, perhaps follow these steps:

Create a Map ref hook

 const mapContainerRef = useRef(null);

Setup your map ref on page render

  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [lng, lat],
      zoom: zoom,
    });
},[])

3. Add your map source and layer
```javascript
useEffect(()=>{

map.addSource
map.addLayer

},[map])

As I said, a solid walkthrough from Mapbox using their native API and more simple documentation of their feature-state api(which is what the hover effect uses).

How to cerate hover effect in geojson mapbox

1 Answers1