Introduction to LeafletJS

  • LeafletJS is a JavaScript library which allows for the creation of and interaction with web maps.
  • It uses a simple API for building maps using Layers
  • It allows for styling of the map layers using standard CSS and manipulation with JavaScript

Simple Map Example

  • Let's make a simple map!

var map ='map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="">OpenStreetMap</a> contributors'

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')


Include the CSS and JavaScript in the Head of the HTML page

Add the CSS First

 <link rel="stylesheet" href=""/>

Then the JavaScript

Make sure you put this AFTER Leaflet's CSS

 <script src=""></script>

Then create the map container

<div id="mapid"></div>

Then use CSS to create a height for the container

#mapid {
  height: 400px;

Using a Basemap

  • Basemaps are composed of Tiles that show:
    • roads
    • features
    • labels
  • You add the basemap to the map container

Mapbox Basemap Example

    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'

Basemap providers for LeafletJS

What the L ?'map').setView([51.505, -0.09], 13)

Adding Markers

  • Markers add a point to the map
  • The text of a marker can be set using a string of HTML
let marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

Removing Markers

  • Markers can be removed by calling remove() on the marker object
let marker = L.marker([51.5, -0.09]).addTo(mymap);

Adding Polygons

  • Polygons are arbitrarily shaped regions of the map
  • They can be created and added to the map
let polygon = L.polygon([
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047],
    ], { color: 'red'}).addTo(mymap);

// delete the polygon later

Other Shapes

Several other map shapes exist:

  • Path
  • Polyline
  • Polygon
  • Rectangle
  • Circle
  • CircleMarker


  • GeoJSON is JSON with specific properties for maps
  • It is a simple means to communicate location data
  • Alternative to .shp files and the variants; .shx, .prj, .dbf, ect...
  "type": "Feature",
  "properties": {
    "name": "My Layer",
    "latitude": 44.0886,
    "longitude": -72.7317
  "geometry": {
    "type": "Polygon",
    "coordinates": [
        [-73.35218221090553, 45.00541896831666],
        [-73.18201496808604, 45.00562770855899],
        [-72.76588580182134, 45.00611110701493],
        [-72.34976762188519, 45.006605491799434],
let someLayer = L.geoJSON(geoJsonData);


  • Libraries which exists to check containment of a point in a polygon


<script src=""></script>


let layer = L.geoJson(statesData);
let results = leafletPip.pointInLayer([-88, 38], layer);

Suggested Projects