MAPBOX how to draw multiples lines and change color

Question

I will like to use MapBox maps (javascript API) to draw a route on a map with multiples colours, each color will mean a different transportation mode, for example: 1) bus 2) car 3) train

I found this code as example: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-draw/

Hope someone can give advice.

Thanks J.Rico

Answer 1

I would suggest using Polyline functionality from mapbox api, you need to provide a set of points (latitude,longitude) that constitute your route, here is some snippet of code that may help you from mapbox, you can see reference in mapbox api website

1. Points array for the route

   // Create array of lat,lon points
   var line_points = [
      [38.893596444352134, -77.0381498336792],
      [38.89337933372204, -77.03792452812195],
      [38.89316222242831, -77.03761339187622],
      [38.893028615148424, -77.03731298446655],
      [38.892920059048464, -77.03691601753235],
      [38.892903358095296, -77.03637957572937],
      [38.89301191422077, -77.03592896461487],
      [38.89316222242831, -77.03549981117249],
      [38.89340438498248, -77.03514575958252],
      [38.893596444352134, -77.0349633693695]
   ];
   

2. Choose the color you want

   // Define polyline options
   // http://leafletjs.com/reference.html#polyline
   var polyline_options = {
      color: '#000'
   };
   

3. Draw the route

   // Defining a polygon here instead of a polyline will connect the
   // endpoints and fill the path.
   // http://leafletjs.com/reference.html#polygon
   var polyline = L.polyline(line_points, polyline_options).addTo(map);
   

Good luck.