How can I move markers programmatically on map?

[emehmet]

Hi,

I try to move markers on map with react.js. Markers will move when I change react.js state variables. How can I do this?

[manubb]

You do not give much details but you can try something like:

pixiOverlay.redraw({
  type: 'positionUpdate',
  positions: this.state.positions
});

in some lifecycle method like componentDidUpdate.

Then in the draw callback, you can update the marker positions:

drawCallback(utils, event) {
  const container = utils.getContainer();
  const renderer = utils.getRenderer();
  const project = utils.latLngToLayerPoint;
  ...
  if (event.type === 'positionUpdate') {
    const newPositions = event.positions;
    markers.forEach((marker, index) => {
      const projected = project(newPositions[index]);
      marker.x = projected.x;
      marker.y = projected.y;
  }
  ...
  renderer.render(container);
}

[emehmet]

That's exactly what I said about :) Thanks for your helps.

[emehmet]

Hi, In this way I moved Markers. But after the move mouse events are canceled. And when I Zoom in or zoom out, the markers returned to the old places.

[manubb]

When the zoom changes or at the end of a drag, the draw callback is executed and you probably reset the marker positions there. You should init the markers positions in the draw callback with:

  ...
  if (event.type === 'add') {
    // set initial positions
  }
  ...

I do not understand what you mean by:

after the move mouse events are canceled.

[manubb]

I'm closing this issue. Reopen it if you need to but please provide detailed informations on your problem.

[emehmet]

I was trying to move markers on the example of US-cities. It's worked fine on QuickStart example. But It doesn't work on US-cities example properly.