Leaflet - or how to make interactive maps

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 !

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.

Create custom markers

Using GeoJSON

Working with Map panes

...

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:

• https://leafletjs.com/examples/quick-start/
• https://www.youtube.com/watch?v=wVnimcQsuwk
• https://maptimeboston.github.io/leaflet-intro/

Leaflet with React : https://react-leaflet.js.org/

I hope it will help you!