React Map GL

Install

npm install react-map-gl npm install @mapbox/polyline

First steps

• create route and component
  
• copy example from https://github.com/visgl/react-map-gl
  
• more information: https://github.com/mapbox/mapbox-gl-js
• Mapbox Account
  • create an account at account.mapbox.com to get an access token to display the map
    
  • limit the token to localhost
• add navigation controls
  
• add a marker and make sure it doesn't move
  
• add css to hide the copyright in the corner and replace it with a static copyright information
• move the map token to another file and add this file to the gitignore

Parameters

list of parameters and map styles: https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters

observations

• keyboard shortcuts are enabled by default https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler
  
• mouse zoom is enabled by default
  
• there is a geo location button to locate your position (in the last project it was very difficult to get the position due to permission problems)
  
• the documentation for the react mapbox is not very detailed (and the mapbox documentation doesn't work for the react mapbox) but there are many good examples
  
• don't use the maps state coordinates for the marker

Directions API

• https://docs.mapbox.com/playground/directions/
• send a request to the api with the coordinates (pay attention to lat/lng)
• get back a json with the route and some details
• push the route to the states path to create markers