[Mapbox]whether to choose markers or layers.

Mapbox has the concepts of Marker and Layer, both of which can be placed as point data on a map.

What are the differences between these two approaches? The following is a summary of the two approaches, with reference to the formulas.

The code in this article uses react-map-gl, which wraps Mapbox GL JS.

Marker

Marker adds points as DOM (HTML elements).
As there is no need to add data sources to the map, CSS, images, SVG, etc. can be easily added and edited.

Click events, etc. can also be set individually, which is very convenient.

The sample code makes it easy to change the events and display for each Marker.
Simply put the image or SVG you want to display in the place where the CirclePin component is called.

<Marker
  draggable={false}
  longitude={wayPoint.LatLng.lng}
  latitude={wayPoint.LatLng.lat}
  anchor='center'
  popup={popup({ lat: wayPoint.LatLng.lat, lng: wayPoint.LatLng.lng }, wayPoint.address)}
>
  <CirclePin
    onClick={() => {
      console.log("Maker onClick!!")
    }}
  />
</Marker>

Layer

Layers are rendered on the map canvas by adding data to the source.
As the DOM is not generated, the rendering cost is low and it is suitable for displaying large amounts of data.

Layer is likely to be suitable for categorising some of the data.

When updating a layer (e.g. colour), use setPaintProperty or setData to update the layer.

Adding events requires a little ingenuity. The click operation also requires the map’s click event to be defined.
Use queryRenderedFeatures to specify the target layer and search for it.

map.on('click', e => {
  const result = map.queryRenderedFeatures(e.point, { layers: ['circle-point'] })
 })
}

In the sample code, data in geojson format is displayed on the map as points.

const unclusteredPointLayer: LayerProps = {
  id: 'circle-point',
  type: 'circle',
  source: 'pointData',
  paint: {
    'circle-color': '#11b4da',
    'circle-radius': 8,
    'circle-stroke-width': 3,
    'circle-stroke-color': '#fff'
  }
}

<Source
  id='pointData'
  type='geojson'
  data={featureCollection.current}
>
  <Layer {...unclusteredPointLayer} />
</Source>

Comparing the differences between Marker and Layer.

Data set size.

Marker creates the DOM, so adding hundreds of markers can cause it to run slowly or become unresponsive.

Conversely, Layers are rendered on the canvas, so adding hundreds is unlikely to affect performance.

How many data points should be rendered? is one indicator for choosing between Marker and Layer.

Maker or Layer ?

This is the official list of which Marker or Layer to choose.

Summary

He said that Marker is suitable if you want to display the data individually and interactively, and Layer is suitable if it is a large amount of data and does not change individually.

Choose Marker or Layer after designing what you want to create.

Mapbox troubleshooting markers vs layers

Choose between Markers and Layers for point data in Mapbox GL JS | Help Learn the differences between two methods of rendering point data, markers and layers.