leafdoc

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="http://leafletjs.com/docs/css/normalize.css" /> <link rel="stylesheet" href="http://leafletjs.com/docs/css/main.css" /> <script src="http://leafletjs.com/docs/highlight/highlight.pack.js"></script> <link rel="stylesheet" href="http://leafletjs.com/docs/highlight/styles/github-gist.css" /> <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" /> <script src="http://leafletjs.com/dist/leaflet.js"></script> </head> <body class='api-page'> <div class='container'> <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="#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>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 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='domevent'>DomEvent</h2><p>Utility functions to work with the <a href="https://developer.mozilla.org/docs/Web/API/Event">DOM events</a>, used by Leaflet internally.</p> <section> <h3 id='domevent-function'>Functions</h3> <section > <table><thead> <tr> <th>Function</th> <th>Returns</th> <th>Description</th> </tr> </thead><tbody> <tr id='domevent-on'> <td><code><b>on</b>(<nobr><HTMLElement></nobr> <i>el</i>, <nobr><String></nobr> <i>types</i>, <nobr><Function></nobr> <i>fn</i>, <nobr><Object></nobr> <i>context?</i>)</nobr></code></td> <td><code>this</code></td> <td>Adds a listener function (<code>fn</code>) to a particular DOM event type of the element <code>el</code>. You can optionally specify the context of the listener (object the <code>this</code> keyword will point to). You can also pass several space-separated types (e.g. <code>'click dblclick'</code>).</td> </tr> <tr id='domevent-on'> <td><code><b>on</b>(<nobr><HTMLElement></nobr> <i>el</i>, <nobr><Object></nobr> <i>eventMap</i>, <nobr><Object></nobr> <i>context?</i>)</nobr></code></td> <td><code>this</code></td> <td>Adds a set of type/listener pairs, e.g. <code>{click: onClick, mousemove: onMouseMove}</code></td> </tr> <tr id='domevent-off'> <td><code><b>off</b>(<nobr><HTMLElement></nobr> <i>el</i>, <nobr><String></nobr> <i>types</i>, <nobr><Function></nobr> <i>fn</i>, <nobr><Object></nobr> <i>context?</i>)</nobr></code></td> <td><code>this</code></td> <td>Removes a previously added listener function. Note that if you passed a custom context to on, you must pass the same context to <code>off</code> in order to remove the listener.</td> </tr> <tr id='domevent-off'> <td><code><b>off</b>(<nobr><HTMLElement></nobr> <i>el</i>, <nobr><Object></nobr> <i>eventMap</i>, <nobr><Object></nobr> <i>context?</i>)</nobr></code></td> <td><code>this</code></td> <td>Removes a set of type/listener pairs, e.g. <code>{click: onClick, mousemove: onMouseMove}</code></td> </tr> <tr id='domevent-stoppropagation'> <td><code><b>stopPropagation</b>(<nobr><DOMEvent></nobr> <i>ev</i>)</nobr></code></td> <td><code>this</code></td> <td>Stop the given event from propagation to parent elements. Used inside the listener functions: <pre><code class="language-js">L.DomEvent.on(div, 'click', function (ev) { L.DomEvent.stopPropagation(ev); }); </code></pre></td> </tr> <tr id='domevent-disablescrollpropagation'> <td><code><b>disableScrollPropagation</b>(<nobr><HTMLElement></nobr> <i>el</i>)</nobr></code></td> <td><code>this</code></td> <td>Adds <code>stopPropagation</code> to the element's <code>'mousewheel'</code> events (plus browser variants).</td> </tr> <tr id='domevent-disableclickpropagation'> <td><code><b>disableClickPropagation</b>(<nobr><HTMLElement></nobr> <i>el</i>)</nobr></code></td> <td><code>this</code></td> <td>Adds <code>stopPropagation</code> to the element's <code>'click'</code>, <code>'doubleclick'</code>, <code>'mousedown'</code> and <code>'touchstart'</code> events (plus browser variants).</td> </tr> <tr id='domevent-preventdefault'> <td><code><b>preventDefault</b>(<nobr><DOMEvent></nobr> <i>ev</i>)</nobr></code></td> <td><code>this</code></td> <td>Prevents the default action of the DOM Event <code>ev</code> from happening (such as following a link in the href of the a element, or doing a POST request with page reload when a <code><form></code> is submitted). Use it inside listener functions.</td> </tr> <tr id='domevent-stop'> <td><code><b>stop</b>(<nobr><DOMEvent></nobr> <i>ev</i>)</nobr></code></td> <td><code>this</code></td> <td>Does <code>stopPropagation</code> and <code>preventDefault</code> at the same time.</td> </tr> <tr id='domevent-getmouseposition'> <td><code><b>getMousePosition</b>(<nobr><DOMEvent></nobr> <i>ev</i>, <nobr><HTMLElement></nobr> <i>container?</i>)</nobr></code></td> <td><code>Point</code></td> <td>Gets normalized mouse position from a DOM event relative to the <code>container</code> or to the whole page if not specified.</td> </tr> <tr id='domevent-getwheeldelta'> <td><code><b>getWheelDelta</b>(<nobr><DOMEvent></nobr> <i>ev</i>)</nobr></code></td> <td><code>Number</code></td> <td>Gets normalized wheel delta from a mousewheel DOM event, in vertical pixels scrolled (negative if scrolling down). Events from pointing devices without precise scrolling are mapped to a best guess of 60 pixels.</td> </tr> <tr id='domevent-addlistener'> <td><code><b>addListener</b>(<i>…</i>)</nobr></code></td> <td><code>this</code></td> <td>Alias to <a href="#domevent-on"><code>L.DomEvent.on</code></a></td> </tr> <tr id='domevent-removelistener'> <td><code><b>removeListener</b>(<i>…</i>)</nobr></code></td> <td><code>this</code></td> <td>Alias to <a href="#domevent-off"><code>L.DomEvent.off</code></a></td> </tr> </tbody></table> </section> </section> <div class="footer"> <p>© 2017 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Maps © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p> </div> </div> <script src="http://leafletjs.com/docs/js/docs.js"></script> <script> hljs.configure({tabReplace: ' '}); hljs.initHighlightingOnLoad(); var elems = document.querySelectorAll('h2, h3, h4, tr'); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.id) { var anchor = document.createElement('a'); anchor.setAttribute('anchor', el.id); if (!el.children.length) { // For headers, insert the anchor before. el.parentNode.insertBefore(anchor, el); } else { // For table rows, insert the anchor inside the first <td> el.querySelector('td').appendChild(anchor); // Clicking on the row (meaning "the link icon on the ::before) // jumps to the item el.parentNode.onclick = function(hash){ return function(ev) { if (ev.offsetX < 0) { window.location.hash = '#' + ev.target.parentNode.id; } }; }(el.id); } } } elems = document.querySelectorAll('div.accordion'); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; el.querySelector('label').addEventListener('click', function(c){ return function() { if (c.className === 'accordion expanded') { c.className = 'accordion collapsed'; } else { c.className = 'accordion expanded'; } }; }(el)); // el.className = 'accordion collapsed'; // el.querySelector('.accordion-content').style.display = 'none'; } </script> <style> h2 { margin-top: 2em; } h3 { margin-top: 1em; margin-bottom: .5em; } div.accordion { width: 100%; /* overflow: hidden; */ } div.accordion-overflow { width: 100%; overflow: hidden; } label, section > h4 { display: block; font-weight: 500; margin: 1em 0 0.25em; } label { cursor: pointer; } div.accordion > div.accordion-overflow > div.accordion-content { max-height: 0; display: none; } div.accordion.collapsed > div.accordion-overflow > div.accordion-content { animation-duration: 0.4s; animation-name: collapse; /* height: 0; */ max-height: 0; display: block; overflow: hidden; } div.accordion.expanded > div.accordion-overflow > div.accordion-content { animation-duration: 0.4s; animation-name: expand; /* height: auto; */ max-height: none; display: block; } @keyframes collapse { 0% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes expand { 0% { max-height: 0; } 100% { max-height: 100vh; } } /* div.accordion > div.accordion-content { transition: max-height 0.4s ease-out 0s; }*/ div.accordion.expanded > label > span.expander { transform: rotate(90deg); } div.accordion > label > span.expander { transition: transform 0.4s ease-out 0s; display: inline-block; font-size: 12px; } table { margin-bottom: 0; } /* Markdown renders some spurious <p>s inside the table cells */ td > p { margin:0; } /* This just looks bad (with the current grey headers for sections which Vlad doesn't really like, so might have to change this) */ section.collapsable > div.section-comments > p { margin:0; } div.section-comments { margin-bottom: 0.25em; } /* section.collapsable div.section-comments { margin: 1em; font-size: 12px; }*/ section.collapsable pre { margin:0; } section { margin-left: 0.5em; } section h4, section.collapsable h4 { margin-left: -0.5em; } </style> </body></html>