Mapbox, bounce corresponding marker when hovering over sidebar element

Viewed 167

I want to highlight a marker on a map, when I hover the correspondent item on a sidebar.

I have the same items showing in the map, and also on a side bar.

So i want that whem you hover over a item on a sidebar, the corresponding marker bounces, or moves or does something.

I have a map.on('load', function() {...}

Where i load a source markers, activate culsters, and add some layers,

The source is a geojson file I build with data from my backend.

Where i load a source, activate culsters, and add some layers:

  map.on('load', function() {
    map.addSource('users', {
    type: "geojson",
    data: markers,
    cluster: true,
    });

      map.addLayer({
        id: "singles",
        type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color': '#ddffc8',
          }
      });

    map.addLayer({
      id: "clusters",
      type: "circle",
      source: "users",
      filter: ["has", "point_count"],
      paint: {
        "circle-color": '#ddffc8',
        'circle-radius': {
            'base': 10,
            'stops': [[5, 20], [15, 500]]
        },
      }
    });

    map.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "users",
      filter: ["has", "point_count"],
      layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
      "text-size": 12
      }
    })
})

I can acces the GeoJson, but its only a json file with the info of each of the markers, there is no property in it like for example marker.bounce or so...

So, how can I make it so that when i hover over a sidebar item, the corrresponding markers bouces, or changes icon or does something?

Thanks.

0 Answers
Related