CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-glmapbox-marker
mweinberg
mweinberg

Reputation: 171

How to display stacked locations in a mapbox layer?

I'm very new to mapboxgl and trying to create a map that allows users to filter points over time. I customized this tutorial with my data to get the initial map up and running:

https://docs.mapbox.com/help/tutorials/show-changes-over-time/

everything worked really well until I loaded my data and realized that many points shared the same coordinates.

Some googling revealed this answer:

Multiple markers - Same coordinates

Both the idea of using offsets or spidering feel like reasonable solutions. Unfortunately, it is not clear to me how to apply those to the data as I loaded it. I believe that the relevant portion of the script is:

map.on('load', function() {
  map.addLayer({
    id: 'year',
    type: 'circle',
    source: {
      type: 'geojson',
      data: './grandpascan.geojson' // replace this with the url of your own geojson
    },
    paint: {
      'circle-radius': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'Pages']],
        0, 4,
        5, 24
      ],
      'circle-color': [
        'interpolate',
        ['linear'],
        ['number', ['get', 'Pages']],
        0, '#2DC4B2',
        1, '#3BB3C3',
        2, '#669EC4',
        3, '#8B88B6',
        4, '#A2719B',
        5, '#AA5E79'
      ],
      'circle-opacity': 0.8
  },

If that is correct, how can I identify those points for styling? They do not appear to be markers that can easily addressed in CSS, although I may be completely misunderstanding how this all fits together.

thanks!

Upvotes: 2

Views: 1186

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126527

The code here is creating a layer within the map, of type circle. You could offset locations using the circle-translate property.

If you want to use CSS transforms to offset markers, you should create them as Marker objects which exist in HTML, outside the map.

Upvotes: 2

Related Questions