leaflet
Version:
JavaScript library for mobile-friendly interactive maps
1,383 lines (1,258 loc) • 822 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="../docs/docs/css/normalize.css" />
<link rel="stylesheet" href="../docs/docs/css/main.css" />
<link rel="stylesheet" href="../docs/docs/css/reference.css" />
<script src="../docs/docs/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../docs/docs/highlight/styles/github-gist.css" />
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
</head>
<body class='api-page'>
<div class='container'>
<!-- CUT HERE FOR docs/reference-*.html -->
<h2>Leaflet API reference</h2>
<div id="toc" class="clearfix">
<div class="toc-col map-col">
<h4>Map</h4>
<ul>
<li><a href="#map-example">Usage example</a></li>
<li><a href="#map-factory">Creation</a></li>
<li><a href="#map-option">Options</a></li>
<li><a href="#map-event">Events</a></li>
</ul>
<h4>Map Methods</h4>
<ul>
<li><a href="#map-methods-for-modifying-map-state">Modifying map state</a></li>
<li><a href="#map-methods-for-getting-map-state">Getting map state</a></li>
<li><a href="#map-methods-for-layers-and-controls">Layers and controls</a></li>
<li><a href="#map-conversion-methods">Conversion methods</a></li>
<li><a href="#map-other-methods">Other methods</a></li>
</ul>
<h4>Map Misc</h4>
<ul>
<li><a href="#map-property">Properties</a></li>
<li><a href="#map-pane">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>
<li><a href="#tooltip">Tooltip</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="#imageoverlay">ImageOverlay</a></li>
<li><a href="#videooverlay">VideoOverlay</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="#polygon">Polygon</a></li>
<li><a href="#rectangle">Rectangle</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#circlemarker">CircleMarker</a></li>
<li><a href="#svgoverlay">SVGOverlay</a></li>
<li><a href="#svg">SVG</a></li>
<li><a href="#canvas">Canvas</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>
<li><a href="#gridlayer">GridLayer</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-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>Shared Methods</h4> -->
<!-- <ul> -->
<!-- <li><a href="#evented">Event</a></li> -->
<!-- <li><a href="#layers">Layer</a></li> -->
<!-- <li><a href="#popup">Popup</a></li> -->
<!-- </ul> -->
<h4>Utility</h4>
<ul>
<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>Base Classes</h4>
<ul>
<li><a href="#class">Class</a></li>
<li><a href="#evented">Evented</a></li>
<li><a href="#layer">Layer</a></li>
<li><a href="#interactive-layer">Interactive layer</a></li>
<li><a href="#control">Control</a></li>
<li><a href="#handler">Handler</a></li>
<!--<li><a class="nodocs" href="#">IFeature</a></li>-->
<li><a href="#projection">Projection</a></li>
<li><a href="#crs">CRS</a></li>
<li><a href="#renderer">Renderer</a></li>
</ul>
<h4>Misc</h4>
<ul>
<li><a href="#event-objects">Event objects</a></li>
<li><a href="#global-switches">global switches</a></li>
<li><a href="#noconflict">noConflict</a></li>
<li><a href="#version">version</a></li>
</ul>
</div>
</div>
<h2 id='map'>Map</h2><p>The central class of the API — it is used to create a map on a page and manipulate it.</p>
<section>
<h3 id='map-example'>Usage example</h3>
<section >
<pre><code class="lang-js">// 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>
</section>
</section><section>
<h3 id='map-factory'>Creation</h3>
<section >
<table><thead>
<tr>
<th>Factory</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-l-map'>
<td><code><b>L.map</b>(<nobr><String></nobr> <i>id</i>, <nobr><Map options></nobr> <i>options?</i>)</code></td>
<td>Instantiates a map object given the DOM ID of a <code><div></code> element
and optionally an object literal with <code>Map options</code>.</td>
</tr>
<tr id='map-l-map'>
<td><code><b>L.map</b>(<nobr><HTMLElement></nobr> <i>el</i>, <nobr><Map options></nobr> <i>options?</i>)</code></td>
<td>Instantiates a map object given an instance of a <code><div></code> HTML element
and optionally an object literal with <code>Map options</code>.</td>
</tr>
</tbody></table>
</section>
</section><section>
<h3 id='map-option'>Options</h3>
<section >
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-prefercanvas'>
<td><code><b>preferCanvas</b></code></td>
<td><code>Boolean</code></td>
<td><code>false</code></td>
<td>Whether <a href="#path"><code>Path</code></a>s should be rendered on a <a href="#canvas"><code>Canvas</code></a> renderer.
By default, all <code>Path</code>s are rendered in a <a href="#svg"><code>SVG</code></a> renderer.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-control-options'>Control options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-attributioncontrol'>
<td><code><b>attributionControl</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether a <a href="#control-attribution">attribution control</a> is added to the map by default.</td>
</tr>
<tr id='map-zoomcontrol'>
<td><code><b>zoomControl</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether a <a href="#control-zoom">zoom control</a> is added to the map by default.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-interaction-options'>Interaction Options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-closepopuponclick'>
<td><code><b>closePopupOnClick</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Set it to <code>false</code> if you don't want popups to close when user clicks the map.</td>
</tr>
<tr id='map-zoomsnap'>
<td><code><b>zoomSnap</b></code></td>
<td><code>Number</code></td>
<td><code>1</code></td>
<td>Forces the map's zoom level to always be a multiple of this, particularly
right after a <a href="#map-fitbounds"><code>fitBounds()</code></a> or a pinch-zoom.
By default, the zoom level snaps to the nearest integer; lower values
(e.g. <code>0.5</code> or <code>0.1</code>) allow for greater granularity. A value of <code>0</code>
means the zoom level will not be snapped after <code>fitBounds</code> or a pinch-zoom.</td>
</tr>
<tr id='map-zoomdelta'>
<td><code><b>zoomDelta</b></code></td>
<td><code>Number</code></td>
<td><code>1</code></td>
<td>Controls how much the map's zoom level will change after a
<a href="#map-zoomin"><code>zoomIn()</code></a>, <a href="#map-zoomout"><code>zoomOut()</code></a>, pressing <code>+</code>
or <code>-</code> on the keyboard, or using the <a href="#control-zoom">zoom controls</a>.
Values smaller than <code>1</code> (e.g. <code>0.5</code>) allow for greater granularity.</td>
</tr>
<tr id='map-trackresize'>
<td><code><b>trackResize</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether the map automatically handles browser window resize to update itself.</td>
</tr>
<tr id='map-boxzoom'>
<td><code><b>boxZoom</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether the map can be zoomed to a rectangular area specified by
dragging the mouse while pressing the shift key.</td>
</tr>
<tr id='map-doubleclickzoom'>
<td><code><b>doubleClickZoom</b></code></td>
<td><code>Boolean|String</code></td>
<td><code>true</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>'center'</code>, double-click zoom will zoom to the center of the
view regardless of where the mouse was.</td>
</tr>
<tr id='map-dragging'>
<td><code><b>dragging</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether the map be draggable with mouse/touch or not.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-map-state-options'>Map State Options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-crs'>
<td><code><b>crs</b></code></td>
<td><code><a href='#crs'>CRS</a></code></td>
<td><code>L.CRS.EPSG3857</code></td>
<td>The <a href="#crs">Coordinate Reference System</a> to use. Don't change this if you're not
sure what it means.</td>
</tr>
<tr id='map-center'>
<td><code><b>center</b></code></td>
<td><code><a href='#latlng'>LatLng</a></code></td>
<td><code>undefined</code></td>
<td>Initial geographic center of the map</td>
</tr>
<tr id='map-zoom'>
<td><code><b>zoom</b></code></td>
<td><code>Number</code></td>
<td><code>undefined</code></td>
<td>Initial map zoom level</td>
</tr>
<tr id='map-minzoom'>
<td><code><b>minZoom</b></code></td>
<td><code>Number</code></td>
<td><code>*</code></td>
<td>Minimum zoom level of the map.
If not specified and at least one <a href="#gridlayer"><code>GridLayer</code></a> or <a href="#tilelayer"><code>TileLayer</code></a> is in the map,
the lowest of their <code>minZoom</code> options will be used instead.</td>
</tr>
<tr id='map-maxzoom'>
<td><code><b>maxZoom</b></code></td>
<td><code>Number</code></td>
<td><code>*</code></td>
<td>Maximum zoom level of the map.
If not specified and at least one <a href="#gridlayer"><code>GridLayer</code></a> or <a href="#tilelayer"><code>TileLayer</code></a> is in the map,
the highest of their <code>maxZoom</code> options will be used instead.</td>
</tr>
<tr id='map-layers'>
<td><code><b>layers</b></code></td>
<td><code>Layer[]</code></td>
<td><code>[]</code></td>
<td>Array of layers that will be added to the map initially</td>
</tr>
<tr id='map-maxbounds'>
<td><code><b>maxBounds</b></code></td>
<td><code><a href='#latlngbounds'>LatLngBounds</a></code></td>
<td><code>null</code></td>
<td>When this option is set, the map restricts the view to the given
geographical bounds, bouncing the user back if the user tries to pan
outside the view. To set the restriction dynamically, use
<a href="#map-setmaxbounds"><code>setMaxBounds</code></a> method.</td>
</tr>
<tr id='map-renderer'>
<td><code><b>renderer</b></code></td>
<td><code><a href='#renderer'>Renderer</a></code></td>
<td><code>*</code></td>
<td>The default method for drawing vector layers on the map. <a href="#svg"><code>L.SVG</code></a>
or <a href="#canvas"><code>L.Canvas</code></a> by default depending on browser support.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-animation-options'>Animation Options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-zoomanimation'>
<td><code><b>zoomAnimation</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Whether the map zoom animation is enabled. By default it's enabled
in all browsers that support CSS3 Transitions except Android.</td>
</tr>
<tr id='map-zoomanimationthreshold'>
<td><code><b>zoomAnimationThreshold</b></code></td>
<td><code>Number</code></td>
<td><code>4</code></td>
<td>Won't animate zoom if the zoom difference exceeds this value.</td>
</tr>
<tr id='map-fadeanimation'>
<td><code><b>fadeAnimation</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></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 id='map-markerzoomanimation'>
<td><code><b>markerZoomAnimation</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></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>
<tr id='map-transform3dlimit'>
<td><code><b>transform3DLimit</b></code></td>
<td><code>Number</code></td>
<td><code>2^23</code></td>
<td>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 <code>panBy</code>.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-panning-inertia-options'>Panning Inertia Options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-inertia'>
<td><code><b>inertia</b></code></td>
<td><code>Boolean</code></td>
<td><code>*</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. Enabled by default unless running on old Android devices.</td>
</tr>
<tr id='map-inertiadeceleration'>
<td><code><b>inertiaDeceleration</b></code></td>
<td><code>Number</code></td>
<td><code>3000</code></td>
<td>The rate with which the inertial movement slows down, in pixels/second².</td>
</tr>
<tr id='map-inertiamaxspeed'>
<td><code><b>inertiaMaxSpeed</b></code></td>
<td><code>Number</code></td>
<td><code>Infinity</code></td>
<td>Max speed of the inertial movement, in pixels/second.</td>
</tr>
<tr id='map-easelinearity'>
<td><code><b>easeLinearity</b></code></td>
<td><code>Number</code></td>
<td><code>0.2</code></td>
<td></td>
</tr>
<tr id='map-worldcopyjump'>
<td><code><b>worldCopyJump</b></code></td>
<td><code>Boolean</code></td>
<td><code>false</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 id='map-maxboundsviscosity'>
<td><code><b>maxBoundsViscosity</b></code></td>
<td><code>Number</code></td>
<td><code>0.0</code></td>
<td>If <code>maxBounds</code> is set, this option will control how solid the bounds
are when dragging the map around. The default value of <code>0.0</code> allows the
user to drag outside the bounds at normal speed, higher values will
slow down map dragging outside bounds, and <code>1.0</code> makes the bounds fully
solid, preventing the user from dragging outside the bounds.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-keyboard-navigation-options'>Keyboard Navigation Options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-keyboard'>
<td><code><b>keyboard</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</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 id='map-keyboardpandelta'>
<td><code><b>keyboardPanDelta</b></code></td>
<td><code>Number</code></td>
<td><code>80</code></td>
<td>Amount of pixels to pan when pressing an arrow key.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-mouse-wheel-options'>Mouse wheel options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-scrollwheelzoom'>
<td><code><b>scrollWheelZoom</b></code></td>
<td><code>Boolean|String</code></td>
<td><code>true</code></td>
<td>Whether the map can be zoomed by using the mouse wheel. If passed <code>'center'</code>,
it will zoom to the center of the view regardless of where the mouse was.</td>
</tr>
<tr id='map-wheeldebouncetime'>
<td><code><b>wheelDebounceTime</b></code></td>
<td><code>Number</code></td>
<td><code>40</code></td>
<td>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.</td>
</tr>
<tr id='map-wheelpxperzoomlevel'>
<td><code><b>wheelPxPerZoomLevel</b></code></td>
<td><code>Number</code></td>
<td><code>60</code></td>
<td>How many scroll pixels (as reported by <a href="#domevent-getwheeldelta">L.DomEvent.getWheelDelta</a>)
mean a change of one full zoom level. Smaller values will make wheel-zooming
faster (and vice versa).</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-touch-interaction-options'>Touch interaction options</h4>
<table><thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-tap'>
<td><code><b>tap</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</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 id='map-taptolerance'>
<td><code><b>tapTolerance</b></code></td>
<td><code>Number</code></td>
<td><code>15</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 id='map-touchzoom'>
<td><code><b>touchZoom</b></code></td>
<td><code>Boolean|String</code></td>
<td><code>*</code></td>
<td>Whether the map can be zoomed by touch-dragging with two fingers. If
passed <code>'center'</code>, 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.</td>
</tr>
<tr id='map-bounceatzoomlimits'>
<td><code><b>bounceAtZoomLimits</b></code></td>
<td><code>Boolean</code></td>
<td><code>true</code></td>
<td>Set it to false if you don't want the map to zoom beyond min/max zoom
and then bounce back when pinch-zooming.</td>
</tr>
</tbody></table>
</section>
</section><section>
<h3 id='map-event'>Events</h3>
<section class='collapsable'>
<h4 id='map-layer-events'>Layer events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-baselayerchange'>
<td><code><b>baselayerchange</b></code></td>
<td><code><a href='#layerscontrolevent'>LayersControlEvent</a></code></td>
<td>Fired when the base layer is changed through the <a href="#control-layers">layers control</a>.</td>
</tr>
<tr id='map-overlayadd'>
<td><code><b>overlayadd</b></code></td>
<td><code><a href='#layerscontrolevent'>LayersControlEvent</a></code></td>
<td>Fired when an overlay is selected through the <a href="#control-layers">layers control</a>.</td>
</tr>
<tr id='map-overlayremove'>
<td><code><b>overlayremove</b></code></td>
<td><code><a href='#layerscontrolevent'>LayersControlEvent</a></code></td>
<td>Fired when an overlay is deselected through the <a href="#control-layers">layers control</a>.</td>
</tr>
<tr id='map-layeradd'>
<td><code><b>layeradd</b></code></td>
<td><code><a href='#layerevent'>LayerEvent</a></code></td>
<td>Fired when a new layer is added to the map.</td>
</tr>
<tr id='map-layerremove'>
<td><code><b>layerremove</b></code></td>
<td><code><a href='#layerevent'>LayerEvent</a></code></td>
<td>Fired when some layer is removed from the map</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-map-state-change-events'>Map state change events</h4>
<div class='section-comments'></div>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-zoomlevelschange'>
<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 id='map-resize'>
<td><code><b>resize</b></code></td>
<td><code><a href='#resizeevent'>ResizeEvent</a></code></td>
<td>Fired when the map is resized.</td>
</tr>
<tr id='map-unload'>
<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 id='map-load'>
<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 id='map-zoomstart'>
<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 id='map-movestart'>
<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 id='map-zoom'>
<td><code><b>zoom</b></code></td>
<td><code><a href='#event'>Event</a></code></td>
<td>Fired repeatedly during any change in zoom level, including zoom
and fly animations.</td>
</tr>
<tr id='map-move'>
<td><code><b>move</b></code></td>
<td><code><a href='#event'>Event</a></code></td>
<td>Fired repeatedly during any movement of the map, including pan and
fly animations.</td>
</tr>
<tr id='map-zoomend'>
<td><code><b>zoomend</b></code></td>
<td><code><a href='#event'>Event</a></code></td>
<td>Fired when the map has changed, after any animations.</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 center of the map stops changing (e.g. user stopped
dragging the map).</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-popup-events'>Popup events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-popupopen'>
<td><code><b>popupopen</b></code></td>
<td><code><a href='#popupevent'>PopupEvent</a></code></td>
<td>Fired when a popup is opened in the map</td>
</tr>
<tr id='map-popupclose'>
<td><code><b>popupclose</b></code></td>
<td><code><a href='#popupevent'>PopupEvent</a></code></td>
<td>Fired when a popup in the map is closed</td>
</tr>
<tr id='map-autopanstart'>
<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>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-tooltip-events'>Tooltip events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-tooltipopen'>
<td><code><b>tooltipopen</b></code></td>
<td><code><a href='#tooltipevent'>TooltipEvent</a></code></td>
<td>Fired when a tooltip is opened in the map.</td>
</tr>
<tr id='map-tooltipclose'>
<td><code><b>tooltipclose</b></code></td>
<td><code><a href='#tooltipevent'>TooltipEvent</a></code></td>
<td>Fired when a tooltip in the map is closed.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-location-events'>Location events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-locationerror'>
<td><code><b>locationerror</b></code></td>
<td><code><a href='#errorevent'>ErrorEvent</a></code></td>
<td>Fired when geolocation (using the <a href="#map-locate"><code>locate</code></a> method) failed.</td>
</tr>
<tr id='map-locationfound'>
<td><code><b>locationfound</b></code></td>
<td><code><a href='#locationevent'>LocationEvent</a></code></td>
<td>Fired when geolocation (using the <a href="#map-locate"><code>locate</code></a> method)
went successfully.</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-interaction-events'>Interaction events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-click'>
<td><code><b>click</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the user clicks (or taps) the map.</td>
</tr>
<tr id='map-dblclick'>
<td><code><b>dblclick</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the user double-clicks (or double-taps) the map.</td>
</tr>
<tr id='map-mousedown'>
<td><code><b>mousedown</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the user pushes the mouse button on the map.</td>
</tr>
<tr id='map-mouseup'>
<td><code><b>mouseup</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the user releases the mouse button on the map.</td>
</tr>
<tr id='map-mouseover'>
<td><code><b>mouseover</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the mouse enters the map.</td>
</tr>
<tr id='map-mouseout'>
<td><code><b>mouseout</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired when the mouse leaves the map.</td>
</tr>
<tr id='map-mousemove'>
<td><code><b>mousemove</b></code></td>
<td><code><a href='#mouseevent'>MouseEvent</a></code></td>
<td>Fired while the mouse moves over the map.</td>
</tr>
<tr id='map-contextmenu'>
<td><code><b>contextmenu</b></code></td>
<td><code><a href='#mouseevent'>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 id='map-keypress'>
<td><code><b>keypress</b></code></td>
<td><code><a href='#keyboardevent'>KeyboardEvent</a></code></td>
<td>Fired when the user presses a key from the keyboard that produces a character value while the map is focused.</td>
</tr>
<tr id='map-keydown'>
<td><code><b>keydown</b></code></td>
<td><code><a href='#keyboardevent'>KeyboardEvent</a></code></td>
<td>Fired when the user presses a key from the keyboard while the map is focused. Unlike the <code>keypress</code> event,
the <code>keydown</code> event is fired for keys that produce a character value and for keys
that do not produce a character value.</td>
</tr>
<tr id='map-keyup'>
<td><code><b>keyup</b></code></td>
<td><code><a href='#keyboardevent'>KeyboardEvent</a></code></td>
<td>Fired when the user releases a key from the keyboard while the map is focused.</td>
</tr>
<tr id='map-preclick'>
<td><code><b>preclick</b></code></td>
<td><code><a href='#mouseevent'>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>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-other-events'>Other Events</h4>
<table><thead>
<tr>
<th>Event</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-zoomanim'>
<td><code><b>zoomanim</b></code></td>
<td><code><a href='#zoomanimevent'>ZoomAnimEvent</a></code></td>
<td>Fired at least once per zoom animation. For continuous zoom, like pinch zooming, fired once per frame during zoom.</td>
</tr>
</tbody></table>
</section>
</section><section>
<h3 id='map-method'>Methods</h3>
<section >
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-getrenderer'>
<td><code><b>getRenderer</b>(<nobr><<a href='#path'>Path</a>></nobr> <i>layer</i>)</code></td>
<td><code><a href='#renderer'>Renderer</a></code></td>
<td><p>Returns the instance of <a href="#renderer"><code>Renderer</code></a> that should be used to render the given
<a href="#path"><code>Path</code></a>. It will ensure that the <a href="#renderer"><code>renderer</code></a> options of the map and paths
are respected, and that the renderers do exist on the map.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-methods-for-layers-and-controls'>Methods for Layers and Controls</h4>
<div class='section-comments'></div>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-addcontrol'>
<td><code><b>addControl</b>(<nobr><<a href='#control'>Control</a>></nobr> <i>control</i>)</code></td>
<td><code>this</code></td>
<td><p>Adds the given control to the map</p>
</td>
</tr>
<tr id='map-removecontrol'>
<td><code><b>removeControl</b>(<nobr><<a href='#control'>Control</a>></nobr> <i>control</i>)</code></td>
<td><code>this</code></td>
<td><p>Removes the given control from the map</p>
</td>
</tr>
<tr id='map-addlayer'>
<td><code><b>addLayer</b>(<nobr><<a href='#layer'>Layer</a>></nobr> <i>layer</i>)</code></td>
<td><code>this</code></td>
<td><p>Adds the given layer to the map</p>
</td>
</tr>
<tr id='map-removelayer'>
<td><code><b>removeLayer</b>(<nobr><<a href='#layer'>Layer</a>></nobr> <i>layer</i>)</code></td>
<td><code>this</code></td>
<td><p>Removes the given layer from the map.</p>
</td>
</tr>
<tr id='map-haslayer'>
<td><code><b>hasLayer</b>(<nobr><<a href='#layer'>Layer</a>></nobr> <i>layer</i>)</code></td>
<td><code>Boolean</code></td>
<td><p>Returns <code>true</code> if the given layer is currently added to the map</p>
</td>
</tr>
<tr id='map-eachlayer'>
<td><code><b>eachLayer</b>(<nobr><Function></nobr> <i>fn</i>, <nobr><Object></nobr> <i>context?</i>)</code></td>
<td><code>this</code></td>
<td><p>Iterates over the layers of the map, optionally specifying context of the iterator function.</p>
<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>></nobr> <i>popup</i>)</code></td>
<td><code>this</code></td>
<td><p>Opens the specified popup while closing the previously opened (to make sure only one is opened at one time for usability).</p>
</td>
</tr>
<tr id='map-openpopup'>
<td><code><b>openPopup</b>(<nobr><String|HTMLElement></nobr> <i>content</i>, <nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><<a href='#popup-option'>Popup options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Creates a popup with the specified content and options and opens it in the given point on a map.</p>
</td>
</tr>
<tr id='map-closepopup'>
<td><code><b>closePopup</b>(<nobr><<a href='#popup'>Popup</a>></nobr> <i>popup?</i>)</code></td>
<td><code>this</code></td>
<td><p>Closes the popup previously opened with <a href="#map-openpopup">openPopup</a> (or the given one).</p>
</td>
</tr>
<tr id='map-opentooltip'>
<td><code><b>openTooltip</b>(<nobr><<a href='#tooltip'>Tooltip</a>></nobr> <i>tooltip</i>)</code></td>
<td><code>this</code></td>
<td><p>Opens the specified tooltip.</p>
</td>
</tr>
<tr id='map-opentooltip'>
<td><code><b>openTooltip</b>(<nobr><String|HTMLElement></nobr> <i>content</i>, <nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><<a href='#tooltip-option'>Tooltip options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Creates a tooltip with the specified content and options and open it.</p>
</td>
</tr>
<tr id='map-closetooltip'>
<td><code><b>closeTooltip</b>(<nobr><<a href='#tooltip'>Tooltip</a>></nobr> <i>tooltip?</i>)</code></td>
<td><code>this</code></td>
<td><p>Closes the tooltip given as parameter.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-methods-for-modifying-map-state'>Methods for modifying map state</h4>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-setview'>
<td><code><b>setView</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>center</i>, <nobr><Number></nobr> <i>zoom</i>, <nobr><<a href='#zoom/pan-options'>Zoom/pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the view of the map (geographical center and zoom) with the given
animation options.</p>
</td>
</tr>
<tr id='map-setzoom'>
<td><code><b>setZoom</b>(<nobr><Number></nobr> <i>zoom</i>, <nobr><<a href='#zoom/pan-options'>Zoom/pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the zoom of the map.</p>
</td>
</tr>
<tr id='map-zoomin'>
<td><code><b>zoomIn</b>(<nobr><Number></nobr> <i>delta?</i>, <nobr><<a href='#zoom-options'>Zoom options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Increases the zoom of the map by <code>delta</code> (<a href="#map-zoomdelta"><code>zoomDelta</code></a> by default).</p>
</td>
</tr>
<tr id='map-zoomout'>
<td><code><b>zoomOut</b>(<nobr><Number></nobr> <i>delta?</i>, <nobr><<a href='#zoom-options'>Zoom options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Decreases the zoom of the map by <code>delta</code> (<a href="#map-zoomdelta"><code>zoomDelta</code></a> by default).</p>
</td>
</tr>
<tr id='map-setzoomaround'>
<td><code><b>setZoomAround</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><Number></nobr> <i>zoom</i>, <nobr><<a href='#zoom-options'>Zoom options</a>></nobr> <i>options</i>)</code></td>
<td><code>this</code></td>
<td><p>Zooms the map while keeping a specified geographical point on the map
stationary (e.g. used internally for scroll zoom and double-click zoom).</p>
</td>
</tr>
<tr id='map-setzoomaround'>
<td><code><b>setZoomAround</b>(<nobr><<a href='#point'>Point</a>></nobr> <i>offset</i>, <nobr><Number></nobr> <i>zoom</i>, <nobr><<a href='#zoom-options'>Zoom options</a>></nobr> <i>options</i>)</code></td>
<td><code>this</code></td>
<td><p>Zooms the map while keeping a specified pixel on the map (relative to the top-left corner) stationary.</p>
</td>
</tr>
<tr id='map-fitbounds'>
<td><code><b>fitBounds</b>(<nobr><<a href='#latlngbounds'>LatLngBounds</a>></nobr> <i>bounds</i>, <nobr><<a href='#fitbounds-options'>fitBounds options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets a map view that contains the given geographical bounds with the
maximum zoom level possible.</p>
</td>
</tr>
<tr id='map-fitworld'>
<td><code><b>fitWorld</b>(<nobr><<a href='#fitbounds-options'>fitBounds options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets a map view that mostly contains the whole world with the maximum
zoom level possible.</p>
</td>
</tr>
<tr id='map-panto'>
<td><code><b>panTo</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><<a href='#pan-options'>Pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Pans the map to a given center.</p>
</td>
</tr>
<tr id='map-panby'>
<td><code><b>panBy</b>(<nobr><<a href='#point'>Point</a>></nobr> <i>offset</i>, <nobr><<a href='#pan-options'>Pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Pans the map by a given number of pixels (animated).</p>
</td>
</tr>
<tr id='map-flyto'>
<td><code><b>flyTo</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><Number></nobr> <i>zoom?</i>, <nobr><<a href='#zoom/pan-options'>Zoom/pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the view of the map (geographical center and zoom) performing a smooth
pan-zoom animation.</p>
</td>
</tr>
<tr id='map-flytobounds'>
<td><code><b>flyToBounds</b>(<nobr><<a href='#latlngbounds'>LatLngBounds</a>></nobr> <i>bounds</i>, <nobr><<a href='#fitbounds-options'>fitBounds options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the view of the map with a smooth animation like <a href="#map-flyto"><code>flyTo</code></a>,
but takes a bounds parameter like <a href="#map-fitbounds"><code>fitBounds</code></a>.</p>
</td>
</tr>
<tr id='map-setmaxbounds'>
<td><code><b>setMaxBounds</b>(<nobr><<a href='#latlngbounds'>LatLngBounds</a>></nobr> <i>bounds</i>)</code></td>
<td><code>this</code></td>
<td><p>Restricts the map view to the given bounds (see the <a href="#map-maxbounds">maxBounds</a> option).</p>
</td>
</tr>
<tr id='map-setminzoom'>
<td><code><b>setMinZoom</b>(<nobr><Number></nobr> <i>zoom</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the lower limit for the available zoom levels (see the <a href="#map-minzoom">minZoom</a> option).</p>
</td>
</tr>
<tr id='map-setmaxzoom'>
<td><code><b>setMaxZoom</b>(<nobr><Number></nobr> <i>zoom</i>)</code></td>
<td><code>this</code></td>
<td><p>Sets the upper limit for the available zoom levels (see the <a href="#map-maxzoom">maxZoom</a> option).</p>
</td>
</tr>
<tr id='map-paninsidebounds'>
<td><code><b>panInsideBounds</b>(<nobr><<a href='#latlngbounds'>LatLngBounds</a>></nobr> <i>bounds</i>, <nobr><<a href='#pan-options'>Pan options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>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.</p>
</td>
</tr>
<tr id='map-paninside'>
<td><code><b>panInside</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><options></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Pans the map the minimum amount to make the <a href="#latlng"><code>latlng</code></a> visible. Use
<code>padding</code>, <code>paddingTopLeft</code> and <code>paddingTopRight</code> options to fit
the display to more restricted bounds, like <a href="#map-fitbounds"><code>fitBounds</code></a>.
If <code>latlng</code> is already within the (optionally padded) display bounds,
the map will not be panned.</p>
</td>
</tr>
<tr id='map-invalidatesize'>
<td><code><b>invalidateSize</b>(<nobr><<a href='#zoom/pan-options'>Zoom/pan options</a>></nobr> <i>options</i>)</code></td>
<td><code>this</code></td>
<td><p>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>false</code>, panning will not occur.
If <code>options.debounceMoveend</code> is <code>true</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.</p>
</td>
</tr>
<tr id='map-invalidatesize'>
<td><code><b>invalidateSize</b>(<nobr><Boolean></nobr> <i>animate</i>)</code></td>
<td><code>this</code></td>
<td><p>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.</p>
</td>
</tr>
<tr id='map-stop'>
<td><code><b>stop</b>()</code></td>
<td><code>this</code></td>
<td><p>Stops the currently running <code>panTo</code> or <code>flyTo</code> animation, if any.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-geolocation-methods'>Geolocation methods</h4>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-locate'>
<td><code><b>locate</b>(<nobr><<a href='#locate-options'>Locate options</a>></nobr> <i>options?</i>)</code></td>
<td><code>this</code></td>
<td><p>Tries to locate the user using the Geolocation API, firing a <a href="#map-locationfound"><code>locationfound</code></a>
event with location data on success or a <a href="#map-locationerror"><code>locationerror</code></a> 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).
Note that, if your page doesn't use HTTPS, this method will fail in
modern browsers (<a href="https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins">Chrome 50 and newer</a>)
See <a href="#locate-options"><code>Locate options</code></a> for more details.</p>
</td>
</tr>
<tr id='map-stoplocate'>
<td><code><b>stopLocate</b>()</code></td>
<td><code>this</code></td>
<td><p>Stops watching location previously initiated by <code>map.locate({watch: true})</code>
and aborts resetting the map view if map.locate was called with
<code>{setView: true}</code>.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-other-methods'>Other Methods</h4>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-addhandler'>
<td><code><b>addHandler</b>(<nobr><String></nobr> <i>name</i>, <nobr><Function></nobr> <i>HandlerClass</i>)</code></td>
<td><code>this</code></td>
<td><p>Adds a new <a href="#handler"><code>Handler</code></a> to the map, given its name and constructor function.</p>
</td>
</tr>
<tr id='map-remove'>
<td><code><b>remove</b>()</code></td>
<td><code>this</code></td>
<td><p>Destroys the map and clears all related event listeners.</p>
</td>
</tr>
<tr id='map-createpane'>
<td><code><b>createPane</b>(<nobr><String></nobr> <i>name</i>, <nobr><HTMLElement></nobr> <i>container?</i>)</code></td>
<td><code>HTMLElement</code></td>
<td><p>Creates a new <a href="#map-pane">map pane</a> with the given name if it doesn't exist already,
then returns it. The pane is created as a child of <code>container</code>, or
as a child of the main map pane if not set.</p>
</td>
</tr>
<tr id='map-getpane'>
<td><code><b>getPane</b>(<nobr><String|HTMLElement></nobr> <i>pane</i>)</code></td>
<td><code>HTMLElement</code></td>
<td><p>Returns a <a href="#map-pane">map pane</a>, given its name or its HTML element (its identity).</p>
</td>
</tr>
<tr id='map-getpanes'>
<td><code><b>getPanes</b>()</code></td>
<td><code>Object</code></td>
<td><p>Returns a plain object containing the names of all <a href="#map-pane">panes</a> as keys and
the panes as values.</p>
</td>
</tr>
<tr id='map-getcontainer'>
<td><code><b>getContainer</b>()</code></td>
<td><code>HTMLElement</code></td>
<td><p>Returns the HTML element that contains the map.</p>
</td>
</tr>
<tr id='map-whenready'>
<td><code><b>whenReady</b>(<nobr><Function></nobr> <i>fn</i>, <nobr><Object></nobr> <i>context?</i>)</code></td>
<td><code>this</code></td>
<td><p>Runs the given function <code>fn</code> when the map gets initialized with
a view (center and zoom) and at least one layer, or immediately
if it's already initialized, optionally passing a function context.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-methods-for-getting-map-state'>Methods for Getting Map State</h4>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-getcenter'>
<td><code><b>getCenter</b>()</code></td>
<td><code><a href='#latlng'>LatLng</a></code></td>
<td><p>Returns the geographical center of the map view</p>
</td>
</tr>
<tr id='map-getzoom'>
<td><code><b>getZoom</b>()</code></td>
<td><code>Number</code></td>
<td><p>Returns the current zoom level of the map view</p>
</td>
</tr>
<tr id='map-getbounds'>
<td><code><b>getBounds</b>()</code></td>
<td><code><a href='#latlngbounds'>LatLngBounds</a></code></td>
<td><p>Returns the geographical bounds visible in the current map view</p>
</td>
</tr>
<tr id='map-getminzoom'>
<td><code><b>getMinZoom</b>()</code></td>
<td><code>Number</code></td>
<td><p>Returns the minimum zoom level of the map (if set in the <code>minZoom</code> option of the map or of any layers), or <code>0</code> by default.</p>
</td>
</tr>
<tr id='map-getmaxzoom'>
<td><code><b>getMaxZoom</b>()</code></td>
<td><code>Number</code></td>
<td><p>Returns the maximum zoom level of the map (if set in the <code>maxZoom</code> option of the map or of any layers).</p>
</td>
</tr>
<tr id='map-getboundszoom'>
<td><code><b>getBoundsZoom</b>(<nobr><<a href='#latlngbounds'>LatLngBounds</a>></nobr> <i>bounds</i>, <nobr><Boolean></nobr> <i>inside?</i>, <nobr><<a href='#point'>Point</a>></nobr> <i>padding?</i>)</code></td>
<td><code>Number</code></td>
<td><p>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>true</code>, the method
instead returns the minimum zoom level on which the map view fits into
the given bounds in its entirety.</p>
</td>
</tr>
<tr id='map-getsize'>
<td><code><b>getSize</b>()</code></td>
<td><code><a href='#point'>Point</a></code></td>
<td><p>Returns the current size of the map container (in pixels).</p>
</td>
</tr>
<tr id='map-getpixelbounds'>
<td><code><b>getPixelBounds</b>()</code></td>
<td><code><a href='#bounds'>Bounds</a></code></td>
<td><p>Returns the bounds of the current map view in projected pixel
coordinates (sometimes useful in layer and overlay implementations).</p>
</td>
</tr>
<tr id='map-getpixelorigin'>
<td><code><b>getPixelOrigin</b>()</code></td>
<td><code><a href='#point'>Point</a></code></td>
<td><p>Returns the projected pixel coordinates of the top left point of
the map layer (useful in custom layer and overlay implementations).</p>
</td>
</tr>
<tr id='map-getpixelworldbounds'>
<td><code><b>getPixelWorldBounds</b>(<nobr><Number></nobr> <i>zoom?</i>)</code></td>
<td><code><a href='#bounds'>Bounds</a></code></td>
<td><p>Returns the world's bounds in pixel coordinates for zoom level <code>zoom</code>.
If <code>zoom</code> is omitted, the map's current zoom level is used.</p>
</td>
</tr>
</tbody></table>
</section><section class='collapsable'>
<h4 id='map-conversion-methods'>Conversion Methods</h4>
<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='map-getzoomscale'>
<td><code><b>getZoomScale</b>(<nobr><Number></nobr> <i>toZoom</i>, <nobr><Number></nobr> <i>fromZoom</i>)</code></td>
<td><code>Number</code></td>
<td><p>Returns the scale factor to be applied to a map transition from zoom level
<code>fromZoom</code> to <code>toZoom</code>. Used internally to help with zoom animations.</p>
</td>
</tr>
<tr id='map-getscalezoom'>
<td><code><b>getScaleZoom</b>(<nobr><Number></nobr> <i>scale</i>, <nobr><Number></nobr> <i>fromZoom</i>)</code></td>
<td><code>Number</code></td>
<td><p>Returns the zoom level that the map would end up at, if it is at <code>fromZoom</code>
level and everything is scaled by a factor of <code>scale</code>. Inverse of
<a href="#map-getZoomScale"><code>getZoomScale</code></a>.</p>
</td>
</tr>
<tr id='map-project'>
<td><code><b>project</b>(<nobr><<a href='#latlng'>LatLng</a>></nobr> <i>latlng</i>, <nobr><Number></nobr> <i>zoom</i>)</code></td>
<td><code><a href='#point'>Point</a></code></td>
<td><p>Projects a geographical coordinate <a href="#latlng"><code>LatLng</code></a> according to the projection
of the map's CRS