leaflet
Version:
JavaScript library for mobile-friendly interactive maps
1,315 lines (1,216 loc) • 224 kB
HTML
---
layout: v2
title: Documentation
bodyclass: api-page
---
<h2>API Reference</h2>
<p>This reference reflects <strong>Leaflet 0.7.x</strong>.</p>
<p>Docs for 1.0 are <a href='reference-1.0.0.html'>available here</a>.
<div id="toc" class="clearfix">
<div class="toc-col map-col">
<h4>Map</h4>
<ul>
<li><a href="#map-usage">Usage example</a></li>
<li><a href="#map-constructor">Creation</a></li>
<li><a href="#map-options">Options</a></li>
<li><a href="#map-events">Events</a></li>
</ul>
<h4>Map Methods</h4>
<ul>
<li><a href="#map-set-methods">Modifying map state</a></li>
<li><a href="#map-get-methods">Getting map state</a></li>
<li><a href="#map-stuff-methods">Layers and controls</a></li>
<li><a href="#map-conversion-methods">Conversion methods</a></li>
<li><a href="#map-misc-methods">Other methods</a></li>
</ul>
<h4>Map Misc</h4>
<ul>
<li><a href="#map-properties">Properties</a></li>
<li><a href="#map-panes">Panes</a></li>
</ul>
</div>
<div class="toc-col">
<h4>UI Layers</h4>
<ul>
<li><a href="#marker">Marker</a></li>
<li><a href="#popup">Popup</a></li>
</ul>
<h4>Raster Layers</h4>
<ul>
<li><a href="#tilelayer">TileLayer</a></li>
<li><a href="#tilelayer-wms">TileLayer.WMS</a></li>
<li><a href="#tilelayer-canvas">TileLayer.Canvas</a></li>
<li><a href="#imageoverlay">ImageOverlay</a></li>
</ul>
<h4>Vector Layers</h4>
<ul>
<li><a href="#path">Path</a></li>
<li><a href="#polyline">Polyline</a></li>
<li><a href="#multipolyline">MultiPolyline</a></li>
<li><a href="#polygon">Polygon</a></li>
<li><a href="#multipolygon">MultiPolygon</a></li>
<li><a href="#rectangle">Rectangle</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#circlemarker">CircleMarker</a></li>
</ul>
</div>
<div class="toc-col">
<h4>Other Layers</h4>
<ul>
<li><a href="#layergroup">LayerGroup</a></li>
<li><a href="#featuregroup">FeatureGroup</a></li>
<li><a href="#geojson">GeoJSON</a></li>
</ul>
<h4>Basic Types</h4>
<ul>
<li><a href="#latlng">LatLng</a></li>
<li><a href="#latlngbounds">LatLngBounds</a></li>
<li><a href="#point">Point</a></li>
<li><a href="#bounds">Bounds</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#divicon">DivIcon</a></li>
</ul>
<h4>Controls</h4>
<ul>
<li><a href="#control">Control</a></li>
<li><a href="#control-zoom">Zoom</a></li>
<li><a href="#control-attribution">Attribution</a></li>
<li><a href="#control-layers">Layers</a></li>
<li><a href="#control-scale">Scale</a></li>
</ul>
</div>
<div class="toc-col">
<h4>Events</h4>
<ul>
<li><a href="#events">Event methods</a></li>
<li><a href="#event-objects">Event objects</a></li>
</ul>
<h4>Utility</h4>
<ul>
<li><a href="#class">Class</a></li>
<li><a href="#browser">Browser</a></li>
<li><a href="#util">Util</a></li>
<li><a href="#transformation">Transformation</a></li>
<li><a href="#lineutil">LineUtil</a></li>
<li><a href="#polyutil">PolyUtil</a></li>
</ul>
<h4>DOM Utility</h4>
<ul>
<li><a href="#domevent">DomEvent</a></li>
<li><a href="#domutil">DomUtil</a></li>
<li><a href="#posanimation">PosAnimation</a></li>
<li><a href="#draggable">Draggable</a></li>
</ul>
</div>
<div class="toc-col last-col">
<h4>Interfaces</h4>
<ul>
<li><a href="#ihandler">IHandler</a></li>
<li><a href="#ilayer">ILayer</a></li>
<!--<li><a class="nodocs" href="#">IFeature</a></li>-->
<li><a href="#icontrol">IControl</a></li>
<li><a href="#iprojection">IProjection</a></li>
<li><a href="#icrs">ICRS</a></li>
</ul>
<h4>Misc</h4>
<ul>
<li><a href="#global">global switches</a></li>
<li><a href="#noconflict">noConflict</a></li>
<li><a href="#version">version</a></li>
</ul>
</div>
</div>
<!--<a href="#toc" id="back-to-top">↑</a>-->
<hr />
<h2 id="map-class">Map</h2>
<p>The central class of the API — it is used to create a map on a page and manipulate it.</p>
<h3 id="map-usage">Usage example</h3>
<pre><code class="javascript">// 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
});</code></pre>
<h3 id="map-constructor" class="left">Creation</h3>
<table data-id='map'>
<tr>
<th>Factory</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>L.map</b>(
<nobr><HTMLElement|String> <i>id</i>,</nobr>
<nobr><<a href="#map-options">Map options</a>> <i>options?</i> )</nobr>
</code></td>
<td>Instantiates a map object given a div element (or its id) and optionally an object literal with map options described below.</td>
</tr>
</table>
<h3 id="map-options">Options</h3>
<h4>Map State Options</h4>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>center</b></code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>Initial geographical center of the map.</td>
</tr>
<tr>
<td><code><b>zoom</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>Initial map zoom.</td>
</tr>
<tr>
<td><code><b>layers</b></code></td>
<td><code><a href="#ilayer">ILayer</a>[]</code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>Layers that will be added to the map initially.</td>
</tr>
<tr>
<td><code><b>minZoom</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>Minimum zoom level of the map. Overrides any <code>minZoom</code> set on map layers.</td>
</tr>
<tr>
<td><code><b>maxZoom</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>Maximum zoom level of the map. This overrides any <code>maxZoom</code> set on map layers.</td>
</tr>
<tr id="map-maxbounds">
<td><code><b>maxBounds</b></code></td>
<td><code><a href="#latlngbounds">LatLngBounds</a></code></td>
<td><code><span class="hljs-literal">null</span></code></td>
<td>When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view. To set the restriction dynamically, use <a href="#map-setmaxbounds">setMaxBounds</a> method.</td>
</tr>
<tr>
<td><code><b>crs</b></code></td>
<td><code><a href="#icrs">CRS</a></code></td>
<td><code>L.CRS.<br/>EPSG3857</code></td>
<td>Coordinate Reference System to use. Don't change this if you're not sure what it means.</td>
</tr>
</table>
<h4>Interaction Options</h4>
<table data-id='map'>
<tr>
<th class="width140">Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>dragging</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map be draggable with mouse/touch or not.</td>
</tr>
<tr>
<td><code><b>touchZoom</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map can be zoomed by touch-dragging with two fingers.</td>
</tr>
<tr>
<td><code><b>scrollWheelZoom</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map can be zoomed by using the mouse wheel. If passed <code><span class="hljs-string">'center'</span></code>, it will zoom to the center of the view regardless of where the mouse was.</td>
</tr>
<tr>
<td><code><b>doubleClickZoom</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map can be zoomed in by double clicking on it and zoomed out by double clicking while holding shift. If passed <code><span class="hljs-string">'center'</span></code>, double-click zoom will zoom to the center of the view regardless of where the mouse was.</td>
</tr>
<tr>
<td><code><b>boxZoom</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map can be zoomed to a rectangular area specified by dragging the mouse while pressing shift.</td>
</tr>
<tr>
<td><code><b>tap</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Enables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as <code>contextmenu</code> events).</td>
</tr>
<tr>
<td><code><b>tapTolerance</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">15</span></code></td>
<td>The max number of pixels a user can shift his finger during touch for it to be considered a valid tap.</td>
</tr>
<tr>
<td><code><b>trackResize</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the map automatically handles browser window resize to update itself.</td>
</tr>
<tr>
<td><code><b>worldCopyJump</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>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.</td>
</tr>
<tr>
<td><code><b>closePopupOnClick</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Set it to <code><span class="hljs-literal">false</span></code> if you don't want popups to close when user clicks the map.</td>
</tr>
<tr>
<td><code><b>bounceAtZoomLimits</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Set it to <code><span class="hljs-literal">false</span></code> if you don't want the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.</td>
</tr>
</table>
<h4>Keyboard Navigation Options</h4>
<table data-id='map'>
<tr>
<th class="width140">Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>keyboard</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Makes the map focusable and allows users to navigate the map with keyboard arrows and <code>+</code>/<code>-</code> keys.</td>
</tr>
<tr>
<td><code><b>keyboardPanOffset</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">80</span></code></td>
<td>Amount of pixels to pan when pressing an arrow key.</td>
</tr>
<tr>
<td><code><b>keyboardZoomOffset</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">1</span></code></td>
<td>Number of zoom levels to change when pressing <code>+</code> or <code>-</code> key.</td>
</tr>
</table>
<h4>Panning Inertia Options</h4>
<table data-id='map'>
<tr>
<th class="width140">Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>inertia</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>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.</td>
</tr>
<tr>
<td><code><b>inertiaDeceleration</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">3000</span></code></td>
<td>The rate with which the inertial movement slows down, in pixels/second<sup>2</sup>.</td>
</tr>
<tr>
<td><code><b>inertiaMaxSpeed</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">1500</span></code></td>
<td>Max speed of the inertial movement, in pixels/second.</td>
</tr>
<tr>
<td><code><b>inertiaThreshold</b></code></td>
<td><code>Number</code></td>
<td><code>depends</code></td>
<td>Number of milliseconds that should pass between stopping the movement and releasing the mouse or touch to prevent inertial movement. <code><span class="hljs-number">32</span></code> for touch devices and <code><span class="hljs-number">14</span></code> for the rest by default.</td>
</tr>
</table>
<h4>Control options</h4>
<table data-id='map'>
<tr>
<th class="width140">Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>zoomControl</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the <a href="#control-zoom">zoom control</a> is added to the map by default.</td>
</tr>
<tr>
<td><code><b>attributionControl</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">true</span></code></td>
<td>Whether the <a href="#control-attribution">attribution control</a> is added to the map by default.</td>
</tr>
</table>
<h4>Animation options</h4>
<table data-id='map'>
<tr>
<th class="width140">Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>fadeAnimation</b></code></td>
<td><code>Boolean</code></td>
<td>depends</td>
<td>Whether the tile fade animation is enabled. By default it's enabled in all browsers that support CSS3 Transitions except Android.</td>
</tr>
<tr>
<td><code><b>zoomAnimation</b></code></td>
<td><code>Boolean</code></td>
<td>depends</td>
<td>Whether the tile zoom animation is enabled. By default it's enabled in all browsers that support CSS3 Transitions except Android.</td>
</tr>
<tr>
<td><code><b>zoomAnimationThreshold</b></code></td>
<td><code>Number</code></td>
<td><span class="hljs-number">4</span></td>
<td>Won't animate zoom if the zoom difference exceeds this value.</td>
</tr>
<tr>
<td><code><b>markerZoomAnimation</b></code></td>
<td><code>Boolean</code></td>
<td>depends</td>
<td>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.</td>
</tr>
</table>
<h3 id="map-events">Events</h3>
<p>You can subscribe to the following events using <a href="#events">these methods</a>.</p>
<table data-id='map'>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>click</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the user clicks (or taps) the map.</td>
</tr>
<tr>
<td><code><b>dblclick</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the user double-clicks (or double-taps) the map.</td>
</tr>
<tr>
<td><code><b>mousedown</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the user pushes the mouse button on the map.</td>
</tr>
<tr>
<td><code><b>mouseup</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the user releases the mouse button on the map.</td>
</tr>
<tr>
<td><code><b>mouseover</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the mouse enters the map.</td>
</tr>
<tr>
<td><code><b>mouseout</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the mouse leaves the map.</td>
</tr>
<tr>
<td><code><b>mousemove</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired while the mouse moves over the map.</td>
</tr>
<tr>
<td><code><b>contextmenu</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired when the user pushes the right mouse button on the map, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).</td>
</tr>
<tr>
<td><code><b>focus</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the user focuses the map either by tabbing to it or clicking/panning.</td>
</tr>
<tr>
<td><code><b>blur</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map loses focus.</td>
</tr>
<tr>
<td><code><b>preclick</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code></td>
<td>Fired before mouse click on the map (sometimes useful when you want something to happen on click before any existing click handlers start running).</td>
</tr>
<tr>
<td><code><b>load</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map is initialized (when its center and zoom are set for the first time).</td>
</tr>
<tr>
<td><code><b>unload</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map is destroyed with <a href="#map-remove">remove</a> method.</td>
</tr>
<tr id="map-viewreset">
<td><code><b>viewreset</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map needs to redraw its content (this usually happens on map zoom or load). Very useful for creating custom overlays.</td>
</tr>
<tr>
<td><code><b>movestart</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the view of the map starts changing (e.g. user starts dragging the map).</td>
</tr>
<tr>
<td><code><b>move</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired on any movement of the map view.</td>
</tr>
<tr id="map-moveend">
<td><code><b>moveend</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the view of the map stops changing (e.g. user stopped dragging the map).</td>
</tr>
<tr>
<td><code><b>dragstart</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the user starts dragging the map.</td>
</tr>
<tr>
<td><code><b>drag</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired repeatedly while the user drags the map.</td>
</tr>
<tr>
<td><code><b>dragend</b></code></td>
<td><code><a href="#dragend-event">DragEndEvent</a></code></td>
<td>Fired when the user stops dragging the map.</td>
</tr>
<tr>
<td><code><b>zoomstart</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map zoom is about to change (e.g. before zoom animation).</td>
</tr>
<tr>
<td><code><b>zoomend</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map zoom changes.</td>
</tr>
<tr>
<td><code><b>zoomlevelschange</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the number of zoomlevels on the map is changed due to adding or removing a layer.</td>
</tr>
<tr>
<td><code><b>resize</b></code></td>
<td><code><a href="#resize-event">ResizeEvent</a></code></td>
<td>Fired when the map is resized.</td>
</tr>
<tr>
<td><code><b>autopanstart</b></code></td>
<td><code><a href="#event">Event</a></code></td>
<td>Fired when the map starts autopanning when opening a popup.</td>
</tr>
<tr>
<td><code><b>layeradd</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code></td>
<td>Fired when a new layer is added to the map.</td>
</tr>
<tr>
<td><code><b>layerremove</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code></td>
<td>Fired when some layer is removed from the map.</td>
</tr>
<tr>
<td><code><b>baselayerchange</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when the base layer is changed through the <a href="#control-layers">layer control</a>.</td>
</tr>
<tr>
<td><code><b>overlayadd</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when an overlay is selected through the <a href="#control-layers">layer control</a>.</td>
</tr>
<tr>
<td><code><b>overlayremove</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when an overlay is deselected through the <a href="#control-layers">layer control</a>.</td>
</tr>
<tr>
<td><code><b>locationfound</b></code></td>
<td><code><a href="#location-event">LocationEvent</a></code>
<td>Fired when geolocation (using the <a href="#map-locate">locate</a> method) went successfully.</td>
</tr>
<tr>
<td><code><b>locationerror</b></code></td>
<td><code><a href="#error-event">ErrorEvent</a></code>
<td>Fired when geolocation (using the <a href="map-locate">locate</a> method) failed.</td>
</tr>
<tr>
<td><code><b>popupopen</b></code></td>
<td><code><a href="#popup-event">PopupEvent</a></code></td>
<td>Fired when a popup is opened (using <code>openPopup</code> method).</td>
</tr>
<tr>
<td><code><b>popupclose</b></code></td>
<td><code><a href="#popup-event">PopupEvent</a></code></td>
<td>Fired when a popup is closed (using <code>closePopup</code> method).</td>
</tr>
</table>
<h3 id="map-set-methods">Methods for Modifying Map State</h3>
<table data-id='map'>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>setView</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>center</i>,</nobr>
<nobr><Number> <i>zoom?</i>,</nobr>
<nobr><<a href="#map-zoompanoptions">zoom/pan options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Sets the view of the map (geographical center and zoom) with the given animation options.</td>
</tr>
<tr>
<td><code><b>setZoom</b>(
<nobr><Number> <i>zoom</i></nobr>,
<nobr><<a href="#map-zoomoptions">zoom options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Sets the zoom of the map.</td>
</tr>
<tr>
<td><code><b>zoomIn</b>(
<nobr><Number> <em>delta?</em></nobr>,
<nobr><<a href="#map-zoomoptions">zoom options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Increases the zoom of the map by <code>delta</code> (<code><span class="hljs-number">1</span></code> by default).</td>
</tr>
<tr>
<td><code><b>zoomOut</b>(
<nobr><Number> <em>delta?</em></nobr>,
<nobr><<a href="#map-zoomoptions">zoom options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Decreases the zoom of the map by <code>delta</code> (<code><span class="hljs-number">1</span></code> by default).</td>
</tr>
<tr>
<td><code><b>setZoomAround</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i>, </nobr>
<nobr><Number> <i>zoom</i></nobr>,
<nobr><<a href="#map-zoomoptions">zoom options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Zooms the map while keeping a specified point on the map stationary (e.g. used internally for scroll zoom and double-click zoom).</td>
</tr>
<tr id="map-fitbounds">
<td><code><b>fitBounds</b>(
<nobr><<a href="#latlngbounds">LatLngBounds</a>> <i>bounds</i></nobr>,
<nobr><<a href="#map-fitboundsoptions">fitBounds options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Sets a map view that contains the given geographical bounds with the maximum zoom level possible.</td>
</tr>
<tr id="map-fitworld">
<td><code><b>fitWorld</b>(
<nobr><<a href="#map-fitboundsoptions">fitBounds options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Sets a map view that mostly contains the whole world with the maximum zoom level possible.</td>
</tr>
<tr>
<td><code><b>panTo</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i></nobr>,
<nobr><<a href="#map-panoptions">pan options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Pans the map to a given center. Makes an animated pan if new center is not more than one screen away from the current one.</td>
</tr>
<tr id="map-paninsidebounds">
<td><code><b>panInsideBounds</b>(
<nobr><<a href="#latlngbounds">LatLngBounds</a>> <i>bounds</i></nobr>,
<nobr><<a href="#map-panoptions">pan options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>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 specific, if any.</td>
</tr>
<tr>
<td><code><b>panBy</b>(
<nobr><<a href="#point">Point</a>> <i>point</i></nobr>,
<nobr><<a href="#map-panoptions">pan options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Pans the map by a given number of pixels (animated).</td>
</tr>
<tr>
<td><code><b>invalidateSize</b>(
<nobr><Boolean> <i>animate</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>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.</td>
</tr>
<tr>
<td><code><b>invalidateSize</b>(
<nobr><<a href="#map-zoompanoptions">zoom/pan options</a>> <i>options</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>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 <code>options.pan</code> is <code><span class="hljs-literal">false</span></code>, panning will not occur. If <code>options.debounceMoveend</code> is <code><span class="hljs-literal">true</span></code>, it will delay <code>moveend</code> event so that it doesn't happen often even if the method is called many times in a row.</td>
</tr>
<tr id="map-setmaxbounds">
<td><code><b>setMaxBounds</b>(
<nobr><<a href="#latlngbounds">LatLngBounds</a>> <i>bounds</i></nobr><!--,
<nobr><<a href="#map-zoompanoptions">zoom/pan options</a>> <i>options?</i> )</nobr>-->
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Restricts the map view to the given bounds (see <a href="#map-maxbounds">map maxBounds</a> option)<!--, animating the map view if bounds are changed. The given animation options are passed through to `setView` or `panInsideBounds`, depending on map zoom level, and can be used to control how the map animates during this change-->.</td>
</tr>
<tr id="map-locate">
<td><code><b>locate</b>(
<nobr><<a href="#map-locate-options">Locate options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Tries to locate the user using the <a href="https://en.wikipedia.org/wiki/W3C_Geolocation_API">Geolocation API</a>, firing a <code>locationfound</code> event with location data on success or a <code>locationerror</code> event on failure, and optionally sets the map view to the user's location with respect to detection accuracy (or to the world view if geolocation failed). See <a href="#map-locate-options">Locate options</a> for more details.</td>
</tr>
<tr>
<td><code><b>stopLocate</b>()</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Stops watching location previously initiated by <code><b>map.locate</b>({watch: true})</code> and aborts resetting the map view if <code>map.locate</code> was called with <code>{setView: true}</code>.</td>
</tr>
<tr id="map-remove">
<td><code><b>remove</b>()</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Destroys the map and clears all related event listeners.</td>
</tr>
</table>
<h3 id="map-get-methods">Methods for Getting Map State</h3>
<table data-id='map'>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>getCenter</b>()</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns the geographical center of the map view.</td>
</tr>
<tr>
<td><code><b>getZoom</b>()</code></td>
<td><code>Number</code></td>
<td>Returns the current zoom of the map view.</td>
</tr>
<tr>
<td><code><b>getMinZoom</b>()</code></td>
<td><code>Number</code></td>
<td>Returns the minimum zoom level of the map.</td>
</tr>
<tr>
<td><code><b>getMaxZoom</b>()</code></td>
<td><code>Number</code></td>
<td>Returns the maximum zoom level of the map.</td>
</tr>
<tr>
<td><code><b>getBounds</b>()</code></td>
<td><code><a href="#latlngbounds">LatLngBounds</a></code></td>
<td>Returns the LatLngBounds of the current map view.</td>
</tr>
<tr>
<td><code><b>getBoundsZoom</b>(
<nobr><<a href="#latlngbounds">LatLngBounds</a>> <i>bounds</i>,</nobr>
<nobr><Boolean> <i>inside?</i> )</nobr>
</code></td>
<td><code>Number</code></td>
<td>Returns the maximum zoom level on which the given bounds fit to the map view in its entirety. If <code>inside</code> (optional) is set to <code><span class="hljs-literal">true</span></code>, the method instead returns the minimum zoom level on which the map view fits into the given bounds in its entirety.</td>
</tr>
<tr>
<td><code><b>getSize</b>()</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the current size of the map container.</td>
</tr>
<tr>
<td><code><b>getPixelBounds</b>()</code></td>
<td><code><a href="#bounds">Bounds</a></code></td>
<td>Returns the bounds of the current map view in projected pixel coordinates (sometimes useful in layer and overlay implementations).</td>
</tr>
<tr>
<td><code><b>getPixelOrigin</b>()</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the projected pixel coordinates of the top left point of the map layer (useful in custom layer and overlay implementations).</td>
</tr>
</table>
<h3 id="map-stuff-methods">Methods for Layers and Controls</h3>
<table data-id='map'>
<tr>
<th class="width250">Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr id="map-addlayer">
<td><code><b>addLayer</b>(
<nobr><<a href="#ilayer">ILayer</a>> <i>layer</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Adds the given layer to the map.</td>
</tr>
<tr>
<td><code><b>removeLayer</b>(
<nobr><<a href="#ilayer">ILayer</a>> <i>layer</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Removes the given layer from the map.</td>
</tr>
<tr>
<td><code><b>hasLayer</b>(
<nobr><<a href="#ilayer">ILayer</a>> <i>layer</i> )</nobr>
</code></td>
<td><code>Boolean</code></td>
<td>Returns <code><span class="hljs-literal">true</span></code> if the given layer is currently added to the map.</td>
</tr>
<tr>
<td><code><b>eachLayer</b>(
<nobr><Function> <i>fn</i></nobr>,
<nobr><Object> <i>context?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Iterates over the layers of the map, optionally specifying context of the iterator function.
<pre><code>map.eachLayer(function (layer) {
layer.bindPopup('Hello');
});</code></pre>
</td>
</tr>
<tr id="map-openpopup">
<td><code><b>openPopup</b>(
<nobr><<a href="#popup">Popup</a>> <i>popup</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Opens the specified popup while closing the previously opened (to make sure only one is opened at one time for usability).</td>
</tr>
<tr id="map-openpopup2">
<td><code><b>openPopup</b>(
<nobr><String> <i>html</i> </nobr> | <nobr><HTMLElement> <i>el</i>,
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i></nobr>,
<nobr><<a href="#popup-options">Popup options</a>> <i>options?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Creates a popup with the specified options and opens it in the given point on a map.</td>
</tr>
<tr id="map-closepopup">
<td><code><b>closePopup</b>(
<nobr><<a href="#popup">Popup</a>> <i>popup?</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Closes the popup previously opened with <a href="#map-openpopup">openPopup</a> (or the given one).</td>
</tr>
<tr id="map-addcontrol">
<td><code><b>addControl</b>(
<nobr><<a href="#icontrol">IControl</a>> <i>control</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Adds the given control to the map.</td>
</tr>
<tr>
<td><code><b>removeControl</b>(
<nobr><<a href="#icontrol">IControl</a>> <i>control</i> )</nobr>
</code></td>
<td><code><span class="hljs-keyword">this</span></code></td>
<td>Removes the given control from the map.</td>
</tr>
</table>
<h3 id="map-conversion-methods">Conversion Methods</h3>
<table data-id='map'>
<tr>
<th class="width200">Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>latLngToLayerPoint</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the map layer point that corresponds to the given geographical coordinates (useful for placing overlays on the map).</td>
</tr>
<tr>
<td><code><b>layerPointToLatLng</b>(
<nobr><<a href="#point">Point</a>> <i>point</i> )</nobr>
</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns the geographical coordinates of a given map layer point.</td>
</tr>
<tr>
<td><code><b>containerPointToLayerPoint</b>(
<nobr><<a href="#point">Point</a>> <i>point</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Converts the point relative to the map container to a point relative to the map layer.</td>
</tr>
<tr>
<td><code><b>layerPointToContainerPoint</b>(
<nobr><<a href="#point">Point</a>> <i>point</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Converts the point relative to the map layer to a point relative to the map container.</td>
</tr>
<tr>
<td><code><b>latLngToContainerPoint</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the map container point that corresponds to the given geographical coordinates.</td>
</tr>
<tr>
<td><code><b>containerPointToLatLng</b>(
<nobr><<a href="#point">Point</a>> <i>point</i> )</nobr>
</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns the geographical coordinates of a given map container point.</td>
</tr>
<tr>
<td><code><b>project</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i>,</nobr>
<nobr><Number> <i>zoom?</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Projects the given geographical coordinates to absolute pixel coordinates for the given zoom level (current zoom level by default).</td>
</tr>
<tr>
<td><code><b>unproject</b>(
<nobr><<a href="#point">Point</a>> <i>point</i>,</nobr>
<nobr><Number> <i>zoom?</i> )</nobr>
</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Projects the given absolute pixel coordinates to geographical coordinates for the given zoom level (current zoom level by default).</td>
</tr>
<tr>
<td><code><b>mouseEventToContainerPoint</b>(
<nobr><MouseEvent> <i>event</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the pixel coordinates of a mouse click (relative to the top left corner of the map) given its event object.</td>
</tr>
<tr>
<td><code><b>mouseEventToLayerPoint</b>(
<nobr><MouseEvent> <i>event</i> )</nobr>
</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the pixel coordinates of a mouse click relative to the map layer given its event object.
</tr>
<tr>
<td><code><b>mouseEventToLatLng</b>(
<nobr><MouseEvent> <i>event</i> )</nobr>
</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns the geographical coordinates of the point the mouse clicked on given the click's event object.</td>
</tr>
</table>
<h3 id="map-misc-methods">Other Methods</h3>
<table data-id='map'>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>getContainer</b>()</code></td>
<td><code>HTMLElement</code></td>
<td>Returns the container element of the map.</td>
</tr>
<tr>
<td><code><b>getPanes</b>()</code></td>
<td><code><a href="#map-panes">MapPanes</a></code></td>
<td>Returns an object with different map panes (to render overlays in).</td>
</tr>
<tr>
<td><code><b>whenReady</b>(
<nobr><Function> <i>fn</i></nobr>,
<nobr><Object> <i>context?</i> )</nobr></code></td>
<td><code>this</code></td>
<td>Runs the given callback when the map gets initialized with a place and zoom, or immediately if it happened already, optionally passing a function context.</td>
</tr>
</table>
<h3 id="map-locate-options">Locate options</h3>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>watch</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>If <code><span class="hljs-literal">true</span></code>, starts continuous watching of location changes (instead of detecting it once) using W3C <code>watchPosition</code> method. You can later stop watching using <code><b>map.stopLocate</b>()</code> method.</td>
</tr>
<tr>
<td><code><b>setView</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>If <code><span class="hljs-literal">true</span></code>, automatically sets the map view to the user location with respect to detection accuracy, or to world view if geolocation failed.</td>
</tr>
<tr>
<td><code><b>maxZoom</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">Infinity</span></code></td>
<td>The maximum zoom for automatic view setting when using `setView` option.</td>
</tr>
<tr>
<td><code><b>timeout</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">10000</span></code></td>
<td>Number of milliseconds to wait for a response from geolocation before firing a <code>locationerror</code> event.</td>
</tr>
<tr>
<td><code><b>maximumAge</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">0</span></code></td>
<td>Maximum age of detected location. If less than this amount of milliseconds passed since last geolocation response, <code>locate</code> will return a cached location.</td>
</tr>
<tr>
<td><code><b>enableHighAccuracy</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>Enables high accuracy, see <a href="http://dev.w3.org/geo/api/spec-source.html#high-accuracy">description in the W3C spec</a>.</td>
</tr>
</table>
<h3 id="map-zoompanoptions">Zoom/pan options</h3>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>reset</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>If <code><span class="hljs-literal">true</span></code>, the map view will be completely reset (without any animations).</td>
</tr>
<tr>
<td><code><b>pan</b></code></td>
<td><code><a href="#map-panoptions">pan options</a></code></td>
<td><code>-</code></td>
<td>Sets the options for the panning (without the zoom change) if it occurs.</td>
</tr>
<tr>
<td><code><b>zoom</b></code></td>
<td><code><a href="#map-zoomoptions">zoom options</a></code></td>
<td><code>-</code></td>
<td>Sets the options for the zoom change if it occurs.</td>
</tr>
<tr>
<td><code><b>animate</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">-</span></code></td>
<td>An equivalent of passing <code>animate</code> to both zoom and pan options (see below).</td>
</tr>
</table>
<h3 id="map-panoptions">Pan options</h3>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>animate</b></code></td>
<td><code>Boolean</code></td>
<td><code>-</code></td>
<td>If <code><span class="hljs-literal">true</span></code>, panning will always be animated if possible. If <code><span class="hljs-literal">false</span></code>, 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).</td>
</tr>
<tr>
<td><code><b>duration</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">0.25</span></code></td>
<td>Duration of animated panning.</td>
</tr>
<tr>
<td><code><b>easeLinearity</b></code></td>
<td><code>Number</code></td>
<td><code><span class="hljs-number">0.25</span></code></td>
<td>The curvature factor of panning animation easing (third parameter of the <a href="http://cubic-bezier.com/">Cubic Bezier curve</a>). <span class="hljs-number">1.0</span> means linear animation, the less the more bowed the curve.</td>
</tr>
<tr>
<td><code><b>noMoveStart</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="hljs-literal">false</span></code></td>
<td>If <code><span class="hljs-literal">true</span></code>, panning won't fire <code>movestart</code> event on start (used internally for panning inertia).</td>
</tr>
</table>
<h3 id="map-zoomoptions">Zoom options</h3>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>animate</b></code></td>
<td><code>Boolean</code></td>
<td><code>-</code></td>
<td>If not specified, zoom animation will happen if the zoom origin is inside the current view. If <code><span class="hljs-literal">true</span></code>, the map will attempt animating zoom disregarding where zoom origin is. Setting <code><span class="hljs-literal">false</span></code> will make it always reset the view completely without animation.</td>
</tr>
</table>
<h3 id="map-fitboundsoptions">fitBounds options</h3>
<p>The same as <a href="#map-zoompanoptions">zoom/pan options</a> and additionally:</p>
<table data-id='map'>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>paddingTopLeft</b></code></td>
<td><code><a href="#point">Point</a></code></td>
<td><code><nobr>[<span class="hljs-number">0</span>, <span class="hljs-number">0</span>]</nobr>
<td>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.</td>
</tr>
<tr>
<td><code><b>paddingBottomRight</b></code></td>
<td><code><a href="#point">Point</a></code></td>
<td><code><nobr>[<span class="hljs-number">0</span>, <span class="hljs-number">0</span>]</nobr>
<td>The same for bottom right corner of the map.</td>
</tr>
<tr>
<td><code><b>padding</b></code></td>
<td><code><a href="#point">Point</a></code></td>
<td><code><nobr>[<span class="hljs-number">0</span>, <span class="hljs-number">0</span>]</nobr>
<td>Equivalent of setting both top left and bottom right padding to the same value.</td>
</tr>
<tr>
<td><code><b>maxZoom</b></code></td>
<td><code>Number</code></td>
<td><code><nobr><span class="hljs-literal">null</span></nobr></code></td>
<td>The maximum possible zoom to use.</td>
</tr>
</table>
<h3 id="map-properties">Properties</h3>
<p>Map properties include interaction handlers that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging or touch zoom (see <a href="#ihandler">IHandler</a> methods). Example:</p>
<pre><code class="javascript">map.doubleClickZoom.disable();</code></pre>
<p>You can also access default map controls like attribution control through map properties:</p>
<pre><code class="javascript">map.attributionControl.addAttribution("Earthquake data &copy; GeoNames");</code></pre>
<table data-id='map'>
<tr>
<th class="minwidth">Property</th>
<th class="minwidth">Type</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>dragging</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Map dragging handler (by both mouse and touch).</td>
</tr>
<tr>
<td><code><b>touchZoom</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Touch zoom handler.</td>
</tr>
<tr>
<td><code><b>doubleClickZoom</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Double click zoom handler.</td>
</tr>
<tr>
<td><code><b>scrollWheelZoom</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Scroll wheel zoom handler.</td>
</tr>
<tr>
<td><code><b>boxZoom</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Box (shift-drag with mouse) zoom handler.</td>
</tr>
<tr>
<td><code><b>keyboard</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Keyboard navigation handler.</td>
</tr>
<tr>
<td><code><b>tap</b></code></td>
<td><a href="#ihandler"><code>IHandler</code></a></td>
<td>Mobile touch hacks (quick tap and touch hold) handler.</td>
</tr>
<tr>
<td><code><b>zoomControl</b></code></td>
<td><a href="#control-zoom"><code>Control.Zoom</code></a></td>
<td>Zoom control.</td>
</tr>
<tr>
<td><code><b>attributionControl</b></code></td>
<td><a href="#control-attribution"><code>Control.Attribution</code></a></td>
<td>Attribution control.</td>
</tr>
</table>
<h3 id="map-panes">Map Panes</h3>
<p>An object literal (returned by <a href="#map-getpanes">map.getPanes</a></code>) that contains different map panes that you can use to put your custom overlays in. The difference is mostly in zIndex order that such overlays get.</p>
<table data-id='map'>
<tr>
<th class="width100">Property</th>
<th class="width100">Type</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>mapPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane that contains all other map panes.</td>
</tr>
<tr>
<td><code><b>tilePane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane for tile layers.</td>
</tr>
<tr>
<td><code><b>objectsPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane that contains all the panes except tile pane.</td>
</tr>
<tr>
<td><code><b>shadowPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane for overlay shadows (e.g. marker shadows).</td>
</tr>
<tr>
<td><code><b>overlayPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane for overlays like polylines and polygons.</td>
</tr>
<tr>
<td><code><b>markerPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane for marker icons.</td>
</tr>
<tr>
<td><code><b>popupPane</b></code></td>
<td><code>HTMLElement</code></td>
<td>Pane for popups.</td>
</tr>
</table>
<h2 id="marker">Marker</h2>
<p>Used to put markers on the map.</p>
<pre><code class="javascript">L.marker([50.5, 30.5]).addTo(map);</code></pre>
<h3>Creation</h3>
<table data-id='marker'>
<tr>
<th class="width200">Factory</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>L.marker</b>(
<nobr><<a href="#latlng">LatLng</a>> <i>latlng</i>,</nobr>
<nobr><<a href="#marker-options">Marker options</a>> <i>options?</i> )</nobr>
</code></td>
<td>Instantiates a Marker object given a geographical point and optionally a