207 lines
8.2 KiB
HTML
207 lines
8.2 KiB
HTML
---
|
|
layout: v2
|
|
---
|
|
|
|
<div class="container">
|
|
<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps, used by the world's biggest websites.
|
|
Weighing just about <abbr title="33 KB gzipped — that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">33 KB of JS</abbr>,
|
|
it has all the <a href="features.html">features</a> most developers ever need for online maps.</p>
|
|
|
|
<p>Leaflet is designed with <em>simplicity</em>, <em>performance</em> and <em>usability</em> in mind.
|
|
It works efficiently across all major desktop and mobile platforms,
|
|
can be extended with lots of <a href="plugins.html">plugins</a>,
|
|
has a beautiful, easy to use and <a title="Leaflet API reference" href="reference.html">well-documented API</a>
|
|
and a simple, readable <a title="Leaflet source code repository on GitHub" href="https://github.com/Leaflet/Leaflet">source code</a> that is a joy to
|
|
<a title="A guide to contributing to Leaflet" href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribute</a> to.</p>
|
|
</div>
|
|
|
|
<div class="usedby">
|
|
<a class="logo logo-github" href="#">GitHub</a>
|
|
<a class="logo logo-foursquare" href="#">foursquare</a>
|
|
<a class="logo logo-pinterest" href="#">Pinterest</a>
|
|
<a class="logo logo-500px" href="#">500px</a>
|
|
<a class="logo logo-wpost" href="#">The Washington Post</a>
|
|
<a class="logo logo-npr" href="#">NPR</a>
|
|
<a class="logo logo-ftimes" href="#">Financial Times</a>
|
|
<a class="logo logo-usatoday" href="#">USA Today</a>
|
|
<a class="logo logo-nps" href="#">National Park Service</a>
|
|
<a class="logo logo-hipmunk" href="#">Hipmunk</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div id="map" class="map" style="height: 300px"></div>
|
|
|
|
<p>A basic example: let's create a map with <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to — use whatever works for you, it's open source!">tiles of our choice</abbr> and add a marker with some text in a popup:</p>
|
|
|
|
<pre class="basic-code javascript"><code>// create a map in the "map" div, set the view to some place and zoom
|
|
var map = L.map('map').setView([51.505, -0.09], 13);
|
|
|
|
// add an OpenStreetMap tile layer
|
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// add a marker, add some popup content to it and show it
|
|
L.marker([51.5, -0.09]).addTo(map)
|
|
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
|
|
.openPopup();</code></pre>
|
|
|
|
<p>Learn more with the <a href="examples/quick-start.html">quick start guide</a>, check out <a href="examples.html">other tutorials</a>,
|
|
or head straight to the <a href="reference.html">API documentation</a>.
|
|
If you have any questions, take a look at the <a href="https://github.com/Leaflet/Leaflet/blob/master/FAQ.md">FAQ</a> first.</p>
|
|
|
|
|
|
<h2>Features</h2>
|
|
|
|
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by <a href="plugins.html">third-party plugins</a>.</p>
|
|
|
|
<div class="features cf">
|
|
<div class="col1">
|
|
|
|
<h3>Map Layers Out of the Box</h3>
|
|
|
|
<ul>
|
|
<li>Tile layers</li>
|
|
<li>Markers</li>
|
|
<li>Popups</li>
|
|
<li>Image overlays</li>
|
|
<li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles</li>
|
|
<li>GeoJSON</li>
|
|
<li>WMS</li>
|
|
</ul>
|
|
|
|
|
|
<h3>Interaction Features</h3>
|
|
|
|
<ul>
|
|
<li>Drag panning with inertia</li>
|
|
</ul>
|
|
|
|
<h4>On Desktop Browsers</h4>
|
|
|
|
<ul>
|
|
<li>Scroll wheel zoom</li>
|
|
<li>Double click zoom</li>
|
|
<li>Zoom to area <span class="quiet">(shift-drag)</span></li>
|
|
<li>Keyboard navigation <span class="quiet"><nobr>(with arrows and <code>+/-</code> keys)</nobr></span></li>
|
|
</ul>
|
|
|
|
|
|
<h4>Mobile Browsers</h4>
|
|
|
|
<ul>
|
|
<li>Pinch-zoom <nobr><span class="quiet">(iOS, Android 4+, Win8)</span></nobr></li>
|
|
<li>Double tap zoom</li>
|
|
</ul>
|
|
|
|
<h4>For Layers</h4>
|
|
|
|
<ul>
|
|
<li>Various events<span class="quiet">: click (tap), mouseover, contextmenu, etc.</span></li>
|
|
<li>Marker dragging</li>
|
|
</ul>
|
|
|
|
<!--<li>Vector layers editing</li>-->
|
|
</div>
|
|
|
|
<div class="col2">
|
|
|
|
<h3>Visual Features</h3>
|
|
|
|
<ul>
|
|
<li>Zoom and pan animation <span class="quiet">(<nobr>for all layers</nobr>, including tile layers, markers and vector layers)</span></li>
|
|
<li>Smooth pinch-zoom on modern mobile devices</li>
|
|
<li>Tile and popup fade animation</li>
|
|
<li>Very nice default design for markers, popups and other map controls</li>
|
|
<li>Retina resolution support for tile layers and markers</li>
|
|
</ul>
|
|
|
|
|
|
<h3>Customization Features</h3>
|
|
|
|
<ul>
|
|
<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
|
|
<li>Image- and HTML-based markers</li>
|
|
<li><span class="quiet">A simple interface for implementing</span> custom map layers and controls</li>
|
|
<li>Custom map projections <span class="quiet">(with <code>EPSG:3857/4326/3395</code> out of the box)</span></li>
|
|
<li>Powerful OOP facilities <span class="quiet">for extending existing classes</span></p>
|
|
</ul>
|
|
|
|
<h3>Performance Features</h3>
|
|
|
|
<ul>
|
|
<li>Hardware acceleration on iOS <span class="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
|
|
<li>Utilizing CSS3 features <span class="quiet">like Transitions, Transforms, requestAnimationFrame</span> to make panning and zooming really smooth</li>
|
|
<li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it responsive even when displaying objects with thousands of points</span></li>
|
|
<li>Modular design and a build system<span class="quiet"> allow you to reduce the library size by leaving out features you don't need</span></li>
|
|
<li>Tap delay elimination on mobile devices<span class="quiet"> makes controls and layers respond to taps immediately</span></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="col3">
|
|
|
|
<h3>Map Controls</h3>
|
|
|
|
<ul>
|
|
<li>Zoom buttons</li>
|
|
<li>Attribution</li>
|
|
<li>Layer switcher</li>
|
|
<li>Scale</li>
|
|
</ul>
|
|
|
|
|
|
<h3>Browser Support</h3>
|
|
|
|
<h4>On Desktop</h4>
|
|
|
|
<ul>
|
|
<li>Chrome</li>
|
|
<li>Firefox</li>
|
|
<li>Safari 5+</li>
|
|
<li>Opera 12+</li>
|
|
<li>IE 7–11</li>
|
|
</ul>
|
|
|
|
<h4>On Mobile</h4>
|
|
|
|
<ul>
|
|
<li>Safari for iOS 3–7+</li>
|
|
<li>Android browser 2.2+, 3.1+, 4+</li>
|
|
<li>Chrome for Android 4+ and iOS</li>
|
|
<li>Firefox for Android</li>
|
|
<li>IE10/11 for Win8 devices</li>
|
|
</ul>
|
|
|
|
|
|
<h3>Misc</h3>
|
|
|
|
<ul>
|
|
<li>Extremely lightweight <span class="quiet">— around 34 KB of gzipped JS code</span></li>
|
|
<li>No external dependencies</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p>If you find some feature really missing in Leaflet, please vote for it on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
|
|
|
|
<div class="footer">
|
|
<p>© 2010–2014 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010–2011 <a href="http://cloudmade.com">CloudMade</a>. Maps © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
|
|
|
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
|
|
|
|
L.marker([51.504, -0.159])
|
|
.addTo(map)
|
|
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
|
|
.openPopup();
|
|
</script>
|