Quick Start Guide

This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.

Setting Up The Map

Include leaflet css and javascript file in the head of the document:

<link href="../lib/leaflet/leaflet.css" rel="stylesheet">
<script src="../lib/leaflet/leaflet-src.js"></script>

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

<div id="mapid" style="height:500"></div>

Initialize the map and do some stuff with it.

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.eyJ1IjoibWFwY
m94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data © OpenStreetMap contributors, ' +
  'CC-BY-SA, ' +
  'Imagery © Mapbox',
  id: 'mapbox.streets'
}).addTo(mymap);

Map With Popup

Popups are usually used when you want to attach some information to a particular object on a map.

Additional Code

L.marker([51.5, -0.09]).addTo(mymap).bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

Map With Circle

Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object.