1

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]
              }
            }]
        }
      }
    });
Bhrungarajni
  • 111
  • 1
  • 3

1 Answers1

2

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

AndrewHarvey
  • 2,219
  • 12
  • 15
  • i updated my question, please let me know whether that is correct? i am not getting my requirement – Bhrungarajni Jan 25 '18 at 06:12
  • I wouldn't be adding a different layer for each Feature. Unless you need performance I'd stick my my first suggestion just like the Mapbox example. – AndrewHarvey Jan 25 '18 at 10:16