DEV Community

Cover image for Getting Started with Leaflet
Stevie G
Stevie G

Posted on • Edited on

Getting Started with Leaflet

#javascript #beginners #leaflet #map

Start a basic HTML template

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Getting Started with Leaflet JS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
Enter fullscreen mode Exit fullscreen mode

Include Leaflet JavaScript file after Leaflet’s CSS (before the closing </body> tag):

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js'></script>
Enter fullscreen mode Exit fullscreen mode

Put a div element with the id map where you want your map to be:

<div id="map"></div>
Enter fullscreen mode Exit fullscreen mode

Make sure the map container has a defined height, for example by setting it in CSS:

body { padding: 0; margin: 0; } html, body, #map { height: 100%; }
Enter fullscreen mode Exit fullscreen mode

Now you’re ready to initialize the map and do some stuff with it.

Lets start by setting up the BaseMap services. See (Docs) for more info:

//Init Overlays var overlays = {}; //Init BaseMaps var basemaps = { "OpenStreetMaps": L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { minZoom: 2, maxZoom: 19, id: "osm.streets" } ), "Google-Map": L.tileLayer( "https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}", { minZoom: 2, maxZoom: 19, id: "google.street" } ), "Google-Satellite": L.tileLayer( "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", { minZoom: 2, maxZoom: 19, id: "google.satellite" } ), "Google-Hybrid": L.tileLayer( "https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}", { minZoom: 2, maxZoom: 19, id: "google.hybrid" } ) };
Enter fullscreen mode Exit fullscreen mode

Next we setup the map options such as center and zoom.

//Map Options var mapOptions = { zoomControl: false, attributionControl: false, center: [-29.0529434318608, 152.01910972595218], zoom: 10, layers: [basemaps.OpenStreetMaps] };
Enter fullscreen mode Exit fullscreen mode

Finally we can initialise the map

//Render Main Map var map = L.map("map", mapOptions);
Enter fullscreen mode Exit fullscreen mode

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

var marker = L.marker([-29.0529434318608, 152.01910972595218]).addTo(map);
Enter fullscreen mode Exit fullscreen mode

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
Enter fullscreen mode Exit fullscreen mode

For more information please see the Leaflet Quick Start Guide

See it in action on CodePen

Join me on HashNode

Top comments (0)