Leaflet quick start guide

[ Source: Leaflet tutorial ]

Setup

CSS

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />

JS Leafleft library

<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>

JS script

var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamVzY2FjZW5hIiwiYSI6ImNpcnc0aGY0aDAwaG1ocW0xNzgwYWZrOXcifQ.dowcr7bOEgJfRtWF4GCU2Q', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'jescacena.14i0d24m', accessToken: 'pk.eyJ1IjoiamVzY2FjZW5hIiwiYSI6ImNpcnc0aGY0aDAwaG1ocW0xNzgwYWZrOXcifQ.dowcr7bOEgJfRtWF4GCU2Q' }).addTo(mymap);

Simple map

Markers, circles and polygons

Working with popups

Dealing with events

Click anywhere in the map