Marker

Used to put markers on the map. Extends Layer.

L.marker([50.5, 30.5]).addTo(map);

Creation

Options

Events

You can subscribe to the following events using these methods.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Interaction handlers

Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see IHandler methods). Example:

marker.dragging.disable();

Popup

Used to open popups in certain places of the map. Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want.

Usage example

If you want to just bind a popup to marker click and then open it, it's really easy:

marker.bindPopup(popupContent).openPopup();

Path overlays like polylines also have a bindPopup method. Here's a more complicated way to open a popup on a map:

var popup = L.popup()
	.setLatLng(latlng)
	.setContent('<p>Hello world!<br />This is a nice popup.</p>')
	.openOn(map);

Creation

Options

Events

Methods

In addition to shared layer methods like addTo() and remove() you can also use the following methods:

TileLayer

Used to load and display tile layers on the map. Extends Layer.

Usage example

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

Creation

URL template

A string of the following form:

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates. {r} can be used to add @2x to the URL to load retina tiles.

You can use custom keys in the template, which will be evaluated from TileLayer options, like this:

L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

Options

Events

You can subscribe to the following events using these methods.

Methods

TileLayer.WMS

Used to display WMS services as tile layers on the map. Extends TileLayer.

Usage example

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
	layers: 'nexrad-n0r-900913',
	format: 'image/png',
	transparent: true,
	attribution: "Weather data © 2012 IEM Nexrad"
});

Creation

Options

Includes all TileLayer options and additionally:

Methods

ImageOverlay

Used to load and display a single image over specific bounds of the map. Extends Layer.

Usage example

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
	imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

Creation

Options

Methods

Path

An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. Extends Layer.

Options

Events

You can subscribe to the following events using these methods.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Static properties

Polyline

A class for drawing polyline overlays on a map. Extends Path. Use Map#addLayer to add it to the map.

Usage example

// create a red polyline from an array of LatLng points
var latlngs = [
  [-122.68, 45.51],
  [-122.43, 37.77],
  [-118.2, 34.04]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

You can also pass a multi-dimensional array to represent a MultiPolyline shape:

// create a red polyline from an array of arrays of LatLng points
var latlngs = [
  [[-122.68, 45.51],
   [-122.43, 37.77],
   [-118.2, 34.04]],
  [[-73.91, 40.78],
   [-87.62, 41.83],
   [-96.72, 32.76]]
];

Creation

Options

You can use Path options and additionally the following options:

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Polygon

A class for drawing polygon overlays on a map. Extends Polyline. Use Map#addLayer to add it to the map.

Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points.

Usage example

// create a red polygon from an array of LatLng points
var latlngs = [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]];

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape:

var latlngs = [
  [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
  [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
];

Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape.

var latlngs = [
  [ // first polygon
    [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
    [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
  ],
  [ // second polygon
    [[-109.05, 37],[-109.03, 41],[-102.05, 41],[-102.04, 37],[-109.05, 38]]
  ]
];

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), Polyline methods like setLatLngs() and getLatLngs(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Rectangle

A class for drawing rectangle overlays on a map. Extends Polygon. Use Map#addLayer to add it to the map.

Usage example

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

// zoom the map to the rectangle bounds
map.fitBounds(bounds);

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Circle

A class for drawing circle overlays on a map. Extends CircleMarker. Use Map#addLayer to add it to the map.

L.circle([50.5, 30.5], 200).addTo(map);

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

CircleMarker

A circle of a fixed size with radius specified in pixels. Extends Path. Use Map#addLayer to add it to the map.

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

LayerGroup

Used to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well. Extends Layer.

L.layerGroup([marker1, marker2])
	.addLayer(polyline)
	.addTo(map);

Creation

Methods

group.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});

FeatureGroup

Extended layerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method. Extends Layer.

L.featureGroup([marker1, marker2, polyline])
	.bindPopup('Hello world!')
	.on('click', function() { alert('Clicked on a group!'); })
	.addTo(map);

Creation

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Events

You can subscribe to the following events using these methods.

GeoJson

Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.

L.geoJson(data, {
	style: function (feature) {
		return {color: feature.properties.color};
	}
}).bindPopup(function (layer) {
	return layer.feature.properties.description;
}).addTo(map);

Each feature layer created by it gets a feature property that links to the GeoJSON feature data the layer was created from (so that you can access its properties later).

Creation

Options

Additionally accepts all Path options for polylines and polygons.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Static methods

GridLayer

Generic class for handling a tiled grid of HTML elements. This is the base class for all tile layers and replaces TileLayer.Canvas.

GridLayer can be extended to create a tiled grid of HTML Elements like <canvas>, <img> or <div>.GridLayer will handle creating and animating these DOM elements for you.

Synchronous usage example

To create a custom layer, extend GridLayer and implement the createTile() method, which will be passed a Point object with the x, y, and z (zoom level) coordinates to draw your tile.

var CanvasLayer = L.GridLayer.extend({
	createTile: function(coords){
		// create a <canvas> element for drawing
		var tile = L.DomUtil.create('canvas', 'leaflet-tile');

		// setup tile width and height according to the options
		var size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;

		// get a canvas context and draw something on it using coords.x, coords.y and coords.z
		var ctx = canvas.getContext('2d');

		// return the tile so it can be rendered on screen
		return tile;
	}
});

Asynchronous usage example

Tile creation can also be asynchronous, this is useful when using a third-party drawing library. Once the tile has finished drawing it must be passed to the done() callback.

var CanvasLayer = L.GridLayer.extend({
	// createTile has a 'done' parameter when on async mode
	createTile: function(coords, done){
		var error;

		// create a <canvas> element for drawing
		var tile = L.DomUtil.create('canvas', 'leaflet-tile');

		// setup tile width and height according to the options
		var size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;

		// For this example simply wait one second before tile is ready
		window.setTimeout(function(){
			// draw something and pass the tile to the done() callback
			done(error, tile);
		}, 1000);

		// return the tile so its progress can be tracked
		return tile;
	}
});

Constructor

Options

Methods

Events

LatLng

Represents a geographical point with a certain latitude and longitude.

var latlng = L.latLng(50.5, 30.5);

All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise), so these lines are equivalent:

map.panTo([50, 30]);
map.panTo({lon: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));

Creation

Properties

Methods

LatLngBounds

Represents a rectangular geographical area on a map.

var southWest = L.latLng(40.712, -74.227),
	northEast = L.latLng(40.774, -74.125),
	bounds = L.latLngBounds(southWest, northEast);

All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:

map.fitBounds([
	[40.712, -74.227],
	[40.774, -74.125]
]);

Creation

Methods

Point

Represents a point with x and y coordinates in pixels.

var point = L.point(200, 300);

All Leaflet methods and options that accept Point objects also accept them in a simple Array form (unless noted otherwise), so these lines are equivalent:

map.panBy([200, 300]);
map.panBy(L.point(200, 300));

Creation

Properties

Methods

Bounds

Represents a rectangular area in pixel coordinates.

var p1 = L.point(10, 10),
	p2 = L.point(40, 60),
	bounds = L.bounds(p1, p2);

All Leaflet methods that accept Bounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:

otherBounds.intersects([[10, 10], [40, 60]]);

Creation

Properties

Methods

Icon

Represents an icon to provide when creating a marker.

var myIcon = L.icon({
	iconUrl: 'my-icon.png',
	iconRetinaUrl: 'my-icon@2x.png',
	iconSize: [38, 95],
	iconAnchor: [22, 94],
	popupAnchor: [-3, -76],
	shadowUrl: 'my-icon-shadow.png',
	shadowRetinaUrl: 'my-icon-shadow@2x.png',
	shadowSize: [68, 95],
	shadowAnchor: [22, 94]
});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

L.Icon.Default extends L.Icon and is the blue icon Leaflet uses for markers by default.

Creation

Options

DivIcon

Represents a lightweight icon for markers that uses a simple div element instead of an image.

var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

By default, it has a 'leaflet-div-icon' class and is styled as a little white square with a shadow.

Creation

Options

Control.zoom

A basic zoom control with two buttons (zoom in and zoom out). It is put on the map by default unless you set its zoomControl option to false. Extends Control.

Creation

Options

Control.Attribution

The attribution control allows you to display attribution data in a small text box on a map. It is put on the map by default unless you set its attributionControl option to false, and it fetches attribution texts from layers with getAttribution method automatically. Extends Control.

Creation

Options

Methods

Control.Layers

The layers control gives users the ability to switch between different base layers and switch overlays on/off (check out the detailed example). Extends Control.

var baseLayers = {
	"Mapbox": mapbox,
	"OpenStreetMap": osm
};

var overlays = {
	"Marker": marker,
	"Roads": roadsLayer
};

L.control.layers(baseLayers, overlays).addTo(map);

Creation

Methods

Options

Layer Config

An object literal with layer names as keys and layer objects as values:

{
	"<someName1>": layer1,
	"<someName2>": layer2
}

The layer names can contain HTML, which allows you to add additional styling to the items:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

Events

You can subscribe to the following events on the Map object using these methods.

Control.Scale

A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. Extends Control.

L.control.scale().addTo(map);

Creation

Options

Events methods

A set of methods shared between event-powered classes (like Map and Marker). Generally, events allow you to execute some function when something happens with an object (e.g. the user clicks on the map, causing the map to fire 'click' event).

Example

map.on('click', function(e) {
	alert(e.latlng);
});

Leaflet deals with event listeners by reference, so if you want to add a listener and then remove it, define it as a function:

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

Methods

Layer methods

var layer = L.Marker(latlng).addTo(map);
layer.addTo(map);
layer.remove();

Methods

Popup methods

var layer = L.Polgon(latlngs).bindPopup('Hi There!').addTo(map);
layer.openPopup();
layer.closePopup();

Methods

featureGroup.bindPopup(function(layer){
	return "a unique template for this layer.";
});

Browser

A namespace with properties for browser/feature detection used by Leaflet internally.

if (L.Browser.ie6) {
	alert('Upgrade your browser, dude!');
}

Util

Various utility functions, used by Leaflet internally.

Methods