Fly to specific marker when using layers

Question

I use layers to clusterize my markers. I initialize like this:

    this.map.addSource('markers', {
      type: 'geojson',
      data: this.getData(),
      cluster: true,
      clusterMaxZoom: 14 // Max zoom to cluster points on
    });

    // Add circles for clusters
    this.map.addLayer({
      id: 'clusters',
      type: 'circle',
      source: 'markers',
      filter: ['has', 'point_count'],
      //...
    });

    this.map.addLayer({
      id: 'unclustered-point',
      type: 'circle',
      source: 'markers',
      filter: ['!', ['has', 'point_count']],
      //...
    });

I also have a popup when a marker is clicked:

    this.map.on('click', 'unclustered-point', (e) => {
      // ...

      new mapboxgl.Popup({ offset: 20 })
        .setLngLat(coordinates)
        .setDOMContent(popupContent)
        .addTo(this.map);
    });

Next to the map, I have a table with all my markers. When the user click on it, I want to fly to this one on the map and open its dedicated popup. I have an identifier (which I set on the properties in my geojson).

I couldn't find any solution about this. Any ideas?

I can fly to the marker using this, but I am not very satisfied about this solution, and, mostly, I cannot open the popup.

  const marker: markerProps = (this.map.getSource('marker') as any)._data.features
    .map(feature => feature.properties)
    .find(props => props.id === id);

  this.map.flyTo({ center: [props.lon, props.lat], zoom: 14 });

If you have props.lon and props.lat once you do flyTo, what is stopping you of creating a new Popup? If you can provide a minimal reproducible example in fiddle or codepen it'll be easier to help you to identify the error. — jscastro

aroth aroth · Accepted Answer · 2020-08-07T20:14:19

There is an example in the Mapbox docs that does something very similar to what you are describing here: https://docs.mapbox.com/help/tutorials/building-a-store-locator/#define-interactivity-functions

Fly to specific marker when using layers

1 Answers