Leaflet is a JavaScript library that allows you to create interactive maps in a very simple way. It is open source and mobile-friendly, which in Christian comes to be that it gets along very well with mobiles.
Leaflet was created in 2011 by Volodymyr Agafonkin, a Ukrainian developer who is currently suffering from the war in his country and who warns us of it when entering the web.
Leaflet is located in https://leafletjs.com/, and contains abundant documentation about its API, with multiple tutorials and a lot of plugins with which you can do a lot of very cool things. When entering the web, and seeing the examples, it may seem that it is poor and that little can be done with this cartographic library, but when you see examples, you quickly realize that it is very powerful. For example, we can see here some of them.
- Civilian Harm in Ukraine (bellingcat.com)
- Ukraine Interactive map – Ukraine Latest news on live map – liveuamap.com
- Multiple examples of common things that can be done and others not so common (tomik23.github.io)
In short, you just have to see the table of companies that appear on the home page itself.
How does Leaflet work?
Getting started creating a map in Leaflet is relatively straightforward. You just have to follow the start tutorial that comes on the web, but as you understand that we know some things, here I am going to break it down a little better so that there is no doubt.
Go ahead that we are going to create a map on a peeled and peeled html file, here we are not going to talk about WordPress or anything like that, we are going to go to the base to understand how it works, and so then everyone who applies it where they want and as they know.
Well, what has been said, we start from this simple html file:
<! DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>What is Leaflet</title> </head> <body> </body> </html>
As you can see, it is simple, the HTML5 doctype tag is defined, the tag that defines the language of the page, the head tags, where several parameters of the web are defined and, within which, we will have to make the call to Leaflet and, finally, the body tags, where we will show and build the map.
It’s that simple.
Call to the Leaflet bookstore.
It is possible to download the library to self-host it on the hosting itself, it would be recommended, for example, if we were creating a plugin for WordPress, so as not to make external calls. Although the JS library is very light (just 42 kb).
But let’s follow the example set by its author. So we are going to make the call to the web directly. To do this, what we will do is insert inside the head tags, just below the meta tags the call to the CSS file that accompanies Leaflet.
To do this, we will enter the following code:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
Next, and this is very important and warns us, the next line is the one that is responsible for loading the JavaScript library itself after having loaded the CSS styles file. If not, it won’t work.
Well, we are obedient and we do.
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin="></script>
In this way, we would already have our website ready to use Leaflet. But we’re still not going to be able to see anything on the web.
Be careful, it is important to warn, as can be seen in the code, that the files are being loaded for a certain version of the library. At the time of writing, this is version 1.8.0.
Painting the map
Well, let’s go to what you really want to see. Let’s paint a map of a fucking time. To do this, we go within the body tags, which is where we have to include everything we want to show on the web (in case you do not know HTML).
The map will be painted inside a div label to which we will give the name of id map or as we want, but in order not to mess around, we can call it map.
<div id="map"></div>
But this is still hardly anything, an invisible horizontal line on our map, so we must give it some measurements. We are going to do this by applying CSS styles. To do this, we return again inside the head tags, and just before the title tag, we add some style tags.
Within them we will add the measurements of the map box, which in our example we are going to make 800px wide by 500px high. Therefore, the code will be as follows:
<style>
#map {
width: 800px;
height: 500px;
}
</style>
And you will say, but so far I still do not see anything. Well, because you have to initialize the map, and tell it what we want to see. To do this, under the div tag where we are going to show the map, we will add some script tags, which is where we are really going to give the instructions to “paint” our map.
The first thing is to start the map and tell it what place in the world we want it to show us. I want the map to appear in Granada. To do this, I have to know the geographical coordinates of the place I want to show. I’m going to pull the topicazo and I’m going to show the Alhambra on my map. If I go to Google maps and right-click on it, I get a context menu where, the first thing I see are the geographical coordinates of the monument. Clicking on them copies them to the clipboard. These are: 37.17704280619901, -3.5915198660469008
The first number is latitude, that is, the horizontal lines that appear on maps, and the second number is longitude, that is, the vertical lines that appear on the map. In the case of the first, being positive indicates that it is above the equator 37º and peak, while the second indicates, being negative, that it is 3º east of the famous Greenwich meridian. The meridian 0.
The line that we are going to add within the style tags is this:
var map = L.map('map').setView([37.17704280619901, -3.5915198660469008], 13);
What we have done is define the map variable and initialize the map with the object L (from Leaflet) (in the background you can hear the walrus clapping). This basically paints the canvas inside the div, and to tell it where we want to locate the center of the map (the point that will be in the center of the map), we use the setView method, which is where we add, in brackets, the coordinates, and the degree of zoom that we want to apply to the map.
What happens is that right now you may be seeing only a gray box. This is because we have not told you what cartographic basis we want to add. For this we will use the tilelayer method.
Here we are going to directly paste this code:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,attribution
: '© OpenStreetMap'
}).addTo(map);
We are not going to go much deeper, but basically the URL where it is located (with certain parameters) is specified, the maximum zoom that is allowed and the attribution, which is the text that is seen in the corner of some maps.
The result is as follows:
As we can see, we are very far from the Alhambra, it is barely distinguishable. We can change the zoom level on the line on which we set the map view.
var map = L.map('map').setView([37.17704280619901, -3.5915198660469008], 17);
As you can see, things have changed a lot.
Well, we already have our map painted, and it has not been so difficult, if you look, the complete code has been as follows:
<! DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin="></script>
<style>
#map {
width: 800px;
height: 500px;
}
</style>
<title>What is Leaflet</title>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([37.17704280619901, -3.5915198660469008], 17);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,attribution
: '© OpenStreetMap'
}).addTo(map);
</script>
</body>
</html>
If you notice, at the end of the tileLayer method the addTo command is executed, which what it does is tell it to add that layer to the map object that we create by declaring the variable of the same name.
Can we do this in a slightly more elegant way?
Yes, I had to explain it to you, but I don’t like the espaghetti code. So we’re going to give it a little flip and we’re going to modularize the thing a little bit to make it a little more elegant. To do this, we are going to take the changes made through CSS to a style sheet that we are going to call style.css and load it externally. The code will look like this:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/> <script src=" https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> <link rel="stylesheet" href="style.css"> <title>What is Leaflet</title> </head>
On the other hand, we are going to extract all the JavaScript code with which we have shaped the map, and place it in a .js file and link it from the index file.html as it should, leaving the body as follows.
<body> <div id="map"></div> <script src="mapa.js"></script> </body>
As you can see, the index.html is the most clean. And the style.css and map.js files will look like this.
/* style.css */
#map {
width: 800px;
height: 500px;
}
map.js
var map = L.map('map').setView([37.17704280619901, -3.5915198660469008], 17);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,attribution
: '© OpenStreetMap'
}).addTo(map);
And what else can I do with Leaflet?
Obviously, Leaflet does not stay in showing a map and that’s it. Precisely its power is that we can add all kinds of markers (using the marker method, circles, polygons, small popup type posters, etc. Also, since it’s JavaScript, we can make these elements interact based on user-generated events.
But, in addition, Leaflet has a lot of plugins that allow you to do multiple actions such as searches, editing geometries, animations, making heat maps, doing geoprocessing (as in a GIS), etc.
As you can see, it is a very powerful tool that we will talk about at length in this blog, which I recommend you investigate.
Tell me, do you have experience with Leaflet? Share with me projects that you have done with this tool.