How to move individual layer points in MapBox?

2
votes

I'm just getting started with MapBox, and I successfully created a style using MapBox Studio. This style has a layer full of points from a dataset I uploaded.

I would like to create an effect through which some of these points are in constant movement. I know I can move all points by applying a setPaintProperty to the circle-translate property. But what about individual ones?

In other words, how should I go about moving individual points I added to my map in MapBox Studio from JavaScript?

1
mapboxmapbox-gl-js

1 Answers

0
votes

The normal way to move some points would be to use .setData() to update the entire dataset.

See this example for that approach: https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/

Your alternative method, using circle-translate sounds like it would work for moving some points, if it supported data-driven styling, which it doesn't.

However, if you are ok with having a layer in which all the points move in the same way, then this should work:

let offset = [0, 0];

map.addLayer({
  id: 'somepoints',
  type: 'circle',
  paint: {
    'circle-translate': offset
  },
  filter: [...insert filter here...]
});

Whenever you need the points to move:

offset = [3, -2]; // or whatever
map.setPaintProperty('somepoints','circle-translate', offset);