React Leaflet Map

Installation

npm install react-leaflet
npm install leaflet
npm install react-leaflet-draw
npm install leaflet-draw

First Steps

• create a component and the route
• copy the example https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js
• add css and js to the index.html
• give the map a fixed height and width
• try out all the components (Marker, Rectangles, Zoom Tools, etc.) https://react-leaflet.js.org/docs/example-popup-marker

Observations

• keyboard shortcuts (e.g. zoom +/-, arrow keys) are working by default
• double click to zoom is working by default
• no account or token is needed

Path

• create new markers with mouseclick and save them to the state
• make them draggable, change the state if dragged
• draw a polyline from one marker to another
• calculate the distance (not Pythagoras' theorem but spherical?)
• show the final distance to the user
• create a button to calculate the distance (just for faster debugging)
• create a button to reset the path