[GIS] How to enlarge the marker on mouseover in mapbox gl js

mapbox-gl-js

i have 3 markers and when i hover on the marker, i want the marker to get enlarged. can anyone help me to solve this. I had tried to change the pointer on mouseover but not getting how to enlarge marker on hover.

TS:

      mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
        var map = new mapboxgl.Map({
          container: 'maps',
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [12.568337,55.676098],
          zoom: 9
    });



  map.on('load', function () {
    map.addLayer({
      "id": "points1",
      "type": "circle",
      "paint":{
        "circle-radius":10,
        "circle-color":'rgba(55,148,179,1)'    
      },
        "source": {
        "type": "geojson",
        "data": {
          "type": "FeatureCollection",
          "features":  [{
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Point",
                "coordinates": [12.568337,55.676098]
              }
            }]
        }
      }
    });

Best Answer

At the moment there are two ways to do this.

  1. Add a unique id property to each of your Features. Create a new hover layer with larger circle-radius and a filter initially to select none of the id's. Then on mouseover set the filter on that hover layer with the id of the feature returned from the mouseover event. See https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

  2. Create a new hover layer, and use setData to move features in and out of this layer rather than by using a filter.

  3. Use Data Driven Styles on the circle-radius, setting it to 30 if the id matches the hovered feature, or 10 otherwise. https://bl.ocks.org/andrewharvey/681739a659c6e9d2b180dac310e24ff6

Related Question