DEV Community

loading...

Leaflet - or how to make interactive maps

Maxime Guilbert
Just a dev who touches a lot of things and wants to share his experiences. (or just want to note somewhere things to don't forget)
・2 min read

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);
Enter fullscreen mode Exit fullscreen mode

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


I hope it will help you!

This post is based on the leaflet website and their tutorial.

Discussion (0)