-
Notifications
You must be signed in to change notification settings - Fork 2
Leaflet step 1
In Leaflet step 1 we will set up the basics to show a standard background map with Leaflet.
<!DOCTYPE html>
<html>
<head>
<title> My title </title>
</head>
<body>
<H1>Example</H1>
</body>
</html>yourDirectory and call the file index.html.
<div> in the <body>
<div id="map"></div>The <div> is a kind of frame where our map will come! This frame does not contain anything yet. We will have to give it some dimensions in order to show content. We will specify the width and height with CSS, so the <div> can be seen. Later, we will give content to the <div> with JavaScript. To be able to do that, we will need its id to be able to reference it.
main.css in yourDirectory.
With CSS we will style our <div> object. In the main.css we will reference to the <div> with a "#map" selector which indicates a object with the id="map" in the HTML. Now set the rule height(and optional width).
#map {
height: 500px;
width:100%;
} To link our CSS file with our HTML objects we will have to put a link in our HTML file.
<head>.
<link rel="stylesheet" href="main.css"/>Now we will add the JavaScrip Library Leaflet.js.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>leaflet.css Link in the <head> of your html file.
leaflet.js script library in the <body>.
JS JavaScript libraries are often placed in the head. However, it is best to place them as far as possible to the bottom of the body. This results in a faster page load because parsing the script doesn't block the loading of the rest of the page.
Now you will have:
<!doctype html>
<html>
<head>
<title>My first Leaflet map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<H1>example</H1>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
</body>
</html>The basics are done!
For a real map you need a base layer. This is the reference of your map application and consists of multiple PNG images, so-called 'tiles', which are quick to load!
<script>
//initialize the map
var map = L.map('map').setView([42.3600825, -71.0588801], 12);
//Create baselayer - tiles
var backgroundMap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a>contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 19
}
);
backgroundMap.addTo(map);
</script>ℹ️ var map = L.map("map") initializes the map variable and links it to our <div id="map"></div>. This will link the map content to the <div> content.
ℹ️ setView() centres the map ([latitude, longitude], zoom level). The projection is Google Mercator.
ℹ️ Next we add our base-layer tiles. L.tileLayer('http://...') graps one from the internet.
ℹ️ backgroundMap.addTo() adds the tile layer to the map.
Now you have made your first web map!
Do you see your map? Great!
Open the debugger
- Click with your right mouse button, choose :
Inspect Element- Or Press F12
The debugger shows you the content of your page. But also logs any errors or comments! Go to the tab
Web Consoleto see if it reports anything useful for you.Do you get:
ReferenceError: L is not definedThen shuffle around the order in your script. Put the
leaflet.js scriptabove your custom script!
Practice with different tiles, coordinates and zoom levels to make your own base map.
L.tileLayer (... ); Try out some different styles.
Another free tile provider is maps.stamen.com. They even provide 3 varieties:
- http://tile.stamen.com/toner/{z}/{x}/{y}.png
- http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg
- http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg
Or have a look at this Leaflet provider preview application.
➡️ Continue to Leaflet Step 2