CODEWITHSUNDEEP
mapbox-gl-js
sthomps
sthomps

Reputation: 4840

How to draw points connected by dash line?

Im using Mapbox GL JS to draw a map. I have several sequences of points I'd like to draw on the map. Each point should appear on the map as a circle. A sequence of points should be connected with a dashed line. Also, each sequence of points should be colored using a different color.

Here is a sample of my geojson:

const geoJson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: 1,
      },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-77.0366048812866, 38.89873175227713],
          [-77.03364372253417, 38.89876515143842],
          [-77.03364372253417, 38.89549195896866],
          [-77.02982425689697, 38.89549195896866],
          [-77.02400922775269, 38.89387200688839],
          [-77.01519012451172, 38.891416957534204],
          [-77.01521158218382, 38.892068305429156],
          [-77.00813055038452, 38.892051604275686],
          [-77.00832366943358, 38.89143365883688],
          [-77.00818419456482, 38.89082405874451],
          [-77.00815200805664, 38.88989712255097],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: 2,
      },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-77.027035, 38.913438],
          [-77.015877, 38.917178],
          [-77.009525, 38.917980],
        ],
      },
    },
  ],
};

I can change the geojson if needed but this is my starting point.

Upvotes: 3

Views: 12547

Answers (1)

sthomps
sthomps

Reputation: 4840

To get points with dashed lines I ended up adding 2 layers:

  // lines
  map.addLayer({
    id: 'my-points',
    type: 'line',
    source: 'my-data',
    paint: {
      'line-color': 'gray',
      'line-width': 1,
      'line-dasharray': [2, 1],
    },
  });

  // circles
  map.addLayer({
    id: 'my-lines',
    type: 'circle',
    source: 'my-data',
    paint: {
      'circle-color': 'red',
      'circle-radius': 3,
    },
  });

Upvotes: 7

Related Questions