Map
The central class of the API — it is used to create a map on a page and manipulate it.
Usage example
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
Creation
Factory | Description |
---|---|
L.map( |
Instantiates a map object given the DOM ID of a <div> element
and optionally an object literal with Map options . |
L.map( |
Instantiates a map object given an instance of a <div> HTML element
and optionally an object literal with Map options . |
Options
Option | Type | Default | Description |
---|---|---|---|
preferCanvas |
Boolean
| false |
Whether Path s should be rendered on a Canvas renderer.
By default, all Path s are rendered in a SVG renderer. |
Control options
Option | Type | Default | Description |
---|---|---|---|
attributionControl |
Boolean
| true |
Whether a attribution control is added to the map by default. |
zoomControl |
Boolean
| true |
Whether a zoom control is added to the map by default. |
Interaction Options
Option | Type | Default | Description |
---|---|---|---|
closePopupOnClick |
Boolean
| true |
Set it to false if you don't want popups to close when user clicks the map. |
zoomSnap |
Number
| 1 |
Forces the map's zoom level to always be a multiple of this, particularly
right after a fitBounds() or a pinch-zoom.
By default, the zoom level snaps to the nearest integer; lower values
(e.g. 0.5 or 0.1 ) allow for greater granularity. A value of 0
means the zoom level will not be snapped after fitBounds or a pinch-zoom. |
zoomDelta |
Number
| 1 |
Controls how much the map's zoom level will change after a
zoomIn() , zoomOut() , pressing +
or - on the keyboard, or using the zoom controls.
Values smaller than 1 (e.g. 0.5 ) allow for greater granularity. |
trackResize |
Boolean
| true |
Whether the map automatically handles browser window resize to update itself. |
boxZoom |
Boolean
| true |
Whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing the shift key. |
doubleClickZoom |
Boolean|String
| true |
Whether the map can be zoomed in by double clicking on it and
zoomed out by double clicking while holding shift. If passed
'center' , double-click zoom will zoom to the center of the
view regardless of where the mouse was. |
dragging |
Boolean
| true |
Whether the map is draggable with mouse/touch or not. |
Map State Options
Option | Type | Default | Description |
---|---|---|---|
crs |
CRS
| L.CRS.EPSG3857 |
The Coordinate Reference System to use. Don't change this if you're not sure what it means. |
center |
LatLng
| undefined |
Initial geographic center of the map |
zoom |
Number
| undefined |
Initial map zoom level |
minZoom |
Number
| undefined |
Minimum zoom level of the map. Overrides any minZoom option set on map layers. |
maxZoom |
Number
| undefined |
Maximum zoom level of the map. Overrides any maxZoom option set on map layers. |
layers |
Layer[]
| [] |
Array of layers that will be added to the map initially |
maxBounds |
LatLngBounds
| null |
When this option is set, the map restricts the view to the given
geographical bounds, bouncing the user back when they try to pan
outside the view. To set the restriction dynamically, use
setMaxBounds method. |
renderer |
Renderer
| * |
The default method for drawing vector layers on the map. L.SVG
or L.Canvas by default depending on browser support. |
Animation Options
Option | Type | Default | Description |
---|---|---|---|
fadeAnimation |
Boolean
| true |
Whether the tile fade animation is enabled. By default it's enabled in all browsers that support CSS3 Transitions except Android. |
markerZoomAnimation |
Boolean
| true |
Whether markers animate their zoom with the zoom animation, if disabled they will disappear for the length of the animation. By default it's enabled in all browsers that support CSS3 Transitions except Android. |
transform3DLimit |
Number
| 2^23 |
Defines the maximum size of a CSS translation transform. The default
value should not be changed unless a web browser positions layers in
the wrong place after doing a large panBy . |
zoomAnimation |
Boolean
| true |
Whether the map zoom animation is enabled. By default it's enabled in all browsers that support CSS3 Transitions except Android. |
zoomAnimationThreshold |
Number
| 4 |
Won't animate zoom if the zoom difference exceeds this value. |
Panning Inertia Options
Option | Type | Default | Description |
---|---|---|---|
inertia |
Boolean
| * |
If enabled, panning of the map will have an inertia effect where the map builds momentum while dragging and continues moving in the same direction for some time. Feels especially nice on touch devices. Enabled by default unless running on old Android devices. |
inertiaDeceleration |
Number
| 3000 |
The rate with which the inertial movement slows down, in pixels/second². |
inertiaMaxSpeed |
Number
| Infinity |
Max speed of the inertial movement, in pixels/second. |
easeLinearity |
Number
| 0.2 |
|
worldCopyJump |
Boolean
| false |
With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible. |
maxBoundsViscosity |
Number
| 0.0 |
If maxBounds is set, this option will control how solid the bounds
are when dragging the map around. The default value of 0.0 allows the
user to drag outside the bounds at normal speed, higher values will
slow down map dragging outside bounds, and 1.0 makes the bounds fully
solid, preventing the user from dragging outside the bounds. |
Keyboard Navigation Options
Option | Type | Default | Description |
---|---|---|---|
keyboard |
Boolean
| true |
Makes the map focusable and allows users to navigate the map with keyboard
arrows and + /- keys. |
keyboardPanDelta |
Number
| 80 |
Amount of pixels to pan when pressing an arrow key. |
Mousewheel options
Option | Type | Default | Description |
---|---|---|---|
scrollWheelZoom |
Boolean|String
| true |
Whether the map can be zoomed by using the mouse wheel. If passed 'center' ,
it will zoom to the center of the view regardless of where the mouse was. |
wheelDebounceTime |
Number
| 40 |
Limits the rate at which a wheel can fire (in milliseconds). By default user can't zoom via wheel more often than once per 40 ms. |
wheelPxPerZoomLevel |
Number
| 60 |
How many scroll pixels (as reported by L.DomEvent.getWheelDelta) mean a change of one full zoom level. Smaller values will make wheel-zooming faster (and vice versa). |
Touch interaction options
Option | Type | Default | Description |
---|---|---|---|
tap |
Boolean
| true |
Enables mobile hacks for supporting instant taps (fixing 200ms click
delay on iOS/Android) and touch holds (fired as contextmenu events). |
tapTolerance |
Number
| 15 |
The max number of pixels a user can shift their finger during touch for it to be considered a valid tap. |
touchZoom |
Boolean|String
| * |
Whether the map can be zoomed by touch-dragging with two fingers. If
passed 'center' , it will zoom to the center of the view regardless of
where the touch events (fingers) were. Enabled for touch-capable web
browsers except for old Androids. |
bounceAtZoomLimits |
Boolean
| true |
Set it to false if you don't want the map to zoom beyond min/max zoom and then bounce back when pinch-zooming. |
Events
Layer events
Event | Data | Description |
---|---|---|
baselayerchange
| ||
overlayadd
| ||
overlayremove
| ||
layeradd
| ||
layerremove
|
Map state change events
Event | Data | Description |
---|---|---|
zoomlevelschange
| ||
resize
| ||
unload
| ||
viewreset
| ||
load
| ||
zoomstart
| ||
movestart
| ||
zoom
| ||
move
| ||
zoomend
| ||
moveend
|
Popup events
Event | Data | Description |
---|---|---|
popupopen
| ||
popupclose
| ||
autopanstart
|
Tooltip events
Event | Data | Description |
---|---|---|
tooltipopen
| ||
tooltipclose
|
Interaction events
Event | Data | Description |
---|---|---|
click
| ||
dblclick
| ||
mousedown
| ||
mouseup
| ||
mouseover
| ||
mouseout
| ||
mousemove
| ||
contextmenu
| ||
keypress
| ||
preclick
|
Animation Options
Event | Data | Description |
---|---|---|
zoomanim
|
Location events
Event | Data | Description |
---|---|---|
locationerror
| ||
locationfound
|
Methods
Method | Returns | Description |
---|---|---|
getRenderer( |
Renderer |
Returns the instance of |
Methods for Layers and Controls
Method | Returns | Description |
---|---|---|
addControl( |
this |
Adds the given control to the map |
removeControl( |
this |
Removes the given control from the map |
addLayer( |
this |
Adds the given layer to the map |
removeLayer( |
this |
Removes the given layer from the map. |
hasLayer( |
Boolean |
Returns |
eachLayer( |
this |
Iterates over the layers of the map, optionally specifying context of the iterator function.
|
openPopup( |
this |
Opens the specified popup while closing the previously opened (to make sure only one is opened at one time for usability). |
openPopup( |
this |
Creates a popup with the specified content and options and opens it in the given point on a map. |
closePopup( |
this |
Closes the popup previously opened with openPopup (or the given one). |
openTooltip( |
this |
Opens the specified tooltip. |
openTooltip( |
this |
Creates a tooltip with the specified content and options and open it. |
closeTooltip( |
this |
Closes the tooltip given as parameter. |
Methods for modifying map state
Method | Returns | Description |
---|---|---|
setView( |
this |
Sets the view of the map (geographical center and zoom) with the given animation options. |
setZoom( |
this |
Sets the zoom of the map. |
zoomIn( |
this |
Increases the zoom of the map by |
zoomOut( |
this |
Decreases the zoom of the map by |
setZoomAround( |
this |
Zooms the map while keeping a specified geographical point on the map stationary (e.g. used internally for scroll zoom and double-click zoom). |
setZoomAround( |
this |
Zooms the map while keeping a specified pixel on the map (relative to the top-left corner) stationary. |
fitBounds( |
this |
Sets a map view that contains the given geographical bounds with the maximum zoom level possible. |
fitWorld( |
this |
Sets a map view that mostly contains the whole world with the maximum zoom level possible. |
panTo( |
this |
Pans the map to a given center. |
panBy( |
this |
Pans the map by a given number of pixels (animated). |
setMaxBounds( |
this |
Restricts the map view to the given bounds (see the maxBounds option). |
setMinZoom( |
this |
Sets the lower limit for the available zoom levels (see the minZoom option). |
setMaxZoom( |
this |
Sets the upper limit for the available zoom levels (see the maxZoom option). |
panInsideBounds( |
this |
Pans the map to the closest view that would lie inside the given bounds (if it's not already), controlling the animation using the options specified, if any. |
invalidateSize( |
this |
Checks if the map container size changed and updates the map if so —
call it after you've changed the map size dynamically, also animating
pan by default. If |
invalidateSize( |
this |
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default. |
stop() |
this |
Stops the currently running |
flyTo( |
this |
Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation. |
flyToBounds( |
this |
Sets the view of the map with a smooth animation like |
Other Methods
Method | Returns | Description |
---|---|---|
addHandler( |
this |
Adds a new |
remove() |
this |
Destroys the map and clears all related event listeners. |
createPane( |
HTMLElement |
Creates a new map pane with the given name if it doesn't exist already,
then returns it. The pane is created as a children of |
getPane( |
HTMLElement |
Returns a map pane, given its name or its HTML element (its identity). |
getPanes() |
Object |
Returns a plain object containing the names of all panes as keys and the panes as values. |
getContainer() |
HTMLElement |
Returns the HTML element that contains the map. |
whenReady( |
this |
Runs the given function |
Methods for Getting Map State
Method | Returns | Description |
---|---|---|
getCenter() |
LatLng |
Returns the geographical center of the map view |
getZoom() |
Number |
Returns the current zoom level of the map view |
getBounds() |
LatLngBounds |
Returns the geographical bounds visible in the current map view |
getMinZoom() |
Number |
Returns the minimum zoom level of the map (if set in the |
getMaxZoom() |
Number |
Returns the maximum zoom level of the map (if set in the |
getBoundsZoom( |
Number |
Returns the maximum zoom level on which the given bounds fit to the map
view in its entirety. If |
getSize() |
Point |
Returns the current size of the map container (in pixels). |
getPixelBounds() |
Bounds |
Returns the bounds of the current map view in projected pixel coordinates (sometimes useful in layer and overlay implementations). |
getPixelOrigin() |
Point |
Returns the projected pixel coordinates of the top left point of the map layer (useful in custom layer and overlay implementations). |
getPixelWorldBounds( |
Bounds |
Returns the world's bounds in pixel coordinates for zoom level |
Conversion Methods
Method | Returns | Description |
---|---|---|
getZoomScale( |
Number |
Returns the scale factor to be applied to a map transition from zoom level
|
getScaleZoom( |
Number |
Returns the zoom level that the map would end up at, if it is at |
project( |
Point |
Projects a geographical coordinate |
unproject( |
LatLng |
Inverse of |
layerPointToLatLng( |
LatLng |
Given a pixel coordinate relative to the origin pixel, returns the corresponding geographical coordinate (for the current zoom level). |
latLngToLayerPoint( |
Point |
Given a geographical coordinate, returns the corresponding pixel coordinate relative to the origin pixel. |
wrapLatLng( |
LatLng |
Returns a |
distance( |
Number |
Returns the distance between two geographical coordinates according to the map's CRS. By default this measures distance in meters. |
containerPointToLayerPoint( |
Point |
Given a pixel coordinate relative to the map container, returns the corresponding pixel coordinate relative to the origin pixel. |
layerPointToContainerPoint( |
Point |
Given a pixel coordinate relative to the origin pixel, returns the corresponding pixel coordinate relative to the map container. |
containerPointToLatLng( |
Point |
Given a pixel coordinate relative to the map container, returns the corresponding geographical coordinate (for the current zoom level). |
latLngToContainerPoint( |
Point |
Given a geographical coordinate, returns the corresponding pixel coordinate relative to the map container. |
mouseEventToContainerPoint( |
Point |
Given a MouseEvent object, returns the pixel coordinate relative to the map container where the event took place. |
mouseEventToLayerPoint( |
Point |
Given a MouseEvent object, returns the pixel coordinate relative to the origin pixel where the event took place. |
mouseEventToLatLng( |
LatLng |
Given a MouseEvent object, returns geographical coordinate where the event took place. |
Geolocation methods
Method | Returns | Description |
---|---|---|
locate( |
this |
Tries to locate the user using the Geolocation API, firing a |
stopLocate() |
this |
Stops watching location previously initiated by |
Method | Returns | Description |
---|---|---|
on( |
this |
Adds a listener function ( |
on( |
this |
Adds a set of type/listener pairs, e.g. |
off( |
this |
Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to |
off( |
this |
Removes a set of type/listener pairs. |
off() |
this |
Removes all listeners to all events on the object. |
fire( |
this |
Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event might can optionally be propagated to event parents. |
listens( |
Boolean |
Returns |
once(…) |
this |
Behaves as |
addEventParent( |
this |
Adds an event parent - an |
removeEventParent( |
this |
Removes an event parent, so it will stop receiving propagated events |
addEventListener(…) |
this |
Alias to |
removeEventListener(…) |
this |
Alias to |
clearAllEventListeners(…) |
this |
Alias to |
addOneTimeEventListener(…) |
this |
Alias to |
fireEvent(…) |
this |
Alias to |
hasEventListeners(…) |
Boolean |
Alias to |
Properties
Handlers
Property | Type | Description |
---|---|---|
boxZoom
| ||
doubleClickZoom
| ||
dragging
| ||
keyboard
| ||
scrollWheelZoom
| ||
tap
| ||
touchZoom
|
Map panes
Pane | Type | Z-index | Description |
---|---|---|---|
mapPane |
HTMLElement
| 'auto' |
Pane that contains all other map panes |
tilePane |
HTMLElement
| 200 |
Pane for GridLayer s and TileLayer s |
overlayPane |
HTMLElement
| 400 |
Pane for vector overlays (Path s), like Polyline s and Polygon s |
shadowPane |
HTMLElement
| 500 |
Pane for overlay shadows (e.g. Marker shadows) |
markerPane |
HTMLElement
| 600 |
Pane for Icon s of Marker s |
tooltipPane |
HTMLElement
| 650 |
Pane for tooltip. |
popupPane |
HTMLElement
| 700 |
Pane for Popup s. |
Locate options
Map
take in an options
parameter. This
is a plain javascript object with the following optional components:Option | Type | Default | Description |
---|---|---|---|
watch |
Boolean
| false |
If true , starts continous watching of location changes (instead of detecting it
once) using W3C watchPosition method. You can later stop watching using
map.stopLocate() method. |
setView |
Boolean
| false |
If true , automatically sets the map view to the user location with respect to
detection accuracy, or to world view if geolocation failed. |
maxZoom |
Number
| Infinity |
The maximum zoom for automatic view setting when using setView option. |
timeout |
Number
| 10000 |
Number of milliseconds to wait for a response from geolocation before firing a
locationerror event. |
maximumAge |
Number
| 0 |
Maximum age of detected location. If less than this amount of milliseconds
passed since last geolocation response, locate will return a cached location. |
enableHighAccuracy |
Boolean
| false |
Enables high accuracy, see description in the W3C spec. |
Zoom options
Map
methods which modify the zoom level take in an options
parameter. This is a plain javascript object with the following optional
components:Option | Type | Default | Description |
---|---|---|---|
animate |
Boolean
|
|
If not specified, zoom animation will happen if the zoom origin is inside the
current view. If true , the map will attempt animating zoom disregarding where
zoom origin is. Setting false will make it always reset the view completely
without animation. |
Pan options
Map
methods which modify the center of the map take in an options
parameter. This is a plain javascript object with the following optional
components:Option | Type | Default | Description |
---|---|---|---|
animate |
Boolean
|
|
If true , panning will always be animated if possible. If false , it will
not animate panning, either resetting the map view if panning more than a
screen away, or just setting a new offset for the map pane (except for panBy
which always does the latter). |
duration |
Number
| 0.25 |
Duration of animated panning, in seconds. |
easeLinearity |
Number
| 0.25 |
The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, the less the more bowed the curve. |
noMoveStart |
Boolean
| false |
If true , panning won't fire movestart event on start (used internally for
panning inertia). |
Zoom/pan options
Option | Type | Default | Description |
---|---|---|---|
animate |
Boolean
|
|
If not specified, zoom animation will happen if the zoom origin is inside the
current view. If true , the map will attempt animating zoom disregarding where
zoom origin is. Setting false will make it always reset the view completely
without animation. |
Option | Type | Default | Description |
---|---|---|---|
duration |
Number
| 0.25 |
Duration of animated panning, in seconds. |
easeLinearity |
Number
| 0.25 |
The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, the less the more bowed the curve. |
noMoveStart |
Boolean
| false |
If true , panning won't fire movestart event on start (used internally for
panning inertia). |
FitBounds options
Option | Type | Default | Description |
---|---|---|---|
paddingTopLeft |
Point
| [0, 0] |
Sets the amount of padding in the top left corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to. |
paddingBottomRight |
Point
| [0, 0] |
The same for the bottom right corner of the map. |
padding |
Point
| [0, 0] |
Equivalent of setting both top left and bottom right padding to the same value. |
maxZoom |
Number
| null |
The maximum possible zoom to use. |
Option | Type | Default | Description |
---|---|---|---|
animate |
Boolean
|
|
If not specified, zoom animation will happen if the zoom origin is inside the
current view. If true , the map will attempt animating zoom disregarding where
zoom origin is. Setting false will make it always reset the view completely
without animation. |
Option | Type | Default | Description |
---|---|---|---|
duration |
Number
| 0.25 |
Duration of animated panning, in seconds. |
easeLinearity |
Number
| 0.25 |
The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, the less the more bowed the curve. |
noMoveStart |
Boolean
| false |
If true , panning won't fire movestart event on start (used internally for
panning inertia). |
map.getPane
ormap.getPanes
methods. New panes can be created with themap.createPane
method. Every map has the following default panes that differ only in zIndex.