When I'm working with maps with Javascript, a tool that I really like is Leaflet.
Why? Because it's really easy to start with, and if you want you can do a lot of cool things!
Starting with Leaflet
Initialization
To start with Leaflet, you just need 3 things :
-
do the imports
- import the css and the scripts
- define a div which will contains the map
- A div block with a width and a height
- Initialize the map
Starting to play!
The first thing you can do is add a marker to your map !
var marker = L.marker([51.5, -0.09]).addTo(mymap);
This little line of code is enough!
Then you can add circles, polygons and popup!
Go further
If you are interested, in the Leaflet website there are a lot of tutorials to do more things with the library.
Why using Leaflet?
First, it's an opensource project! So it's a perfect entry for some POCs or first projects!
Second, the library offers a lot of functionalities with are enough for a lot of projects.
Then, it's an opensource project! So if you are looking for some specific functionalities, you can develop it and share with the community!
Links
- Leaflet
- website : https://leafletjs.com/examples/quick-start/
- github : https://github.com/Leaflet/Leaflet
- Tutorials:
- Leaflet with React : https://react-leaflet.js.org/
I hope it will help you!
This post is based on the leaflet website and their tutorial.
Top comments (0)