how to Add Connecting Lines to Map Markers using react-map-gl

Question

How to Add Connecting Lines to Map Markers using react-map-gl?

For example : I have 3 markers (mark1, mark2 ,mark3)

mark1 should ne connected to mark2 & mark3 . mark2 should be connected to mark1 &mark 3.... Can any one please help me out...

Answer 1

Couple of ways:

1) Probably the best way is to use the deck.gl LineLayer. Deck.gl is meant to be used with react-map-gl, so I imagine this is react-map-gl's intended solution.
2) Set a ref on your map, then add a layer to the map:

   <ReactMapGL
      id={'map'}
      ref={'map'}
      onLoad={this.addLines}
     .... />

   addLines = () => {
     const map = this.refs.map.getMap()
     map.addLayer({
       "id": "route",
       "type": "line",
       "source": {
       "type": "geojson",
          "data": {
             "type": "Feature",
             "properties": {},
             "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.48369693756104, 37.83381888486939],
                    [116.48348236083984, 37.83317489144141],
                ]
              }
            }
      },
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "#888",
        "line-width": 8
      }
    });
  }

3) Set geojson through the mapStyles prop as seen in this example