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.