---
layout: v2
---

<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Weighing just about <abbr title="33 KB gzipped &mdash; 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&nbsp;has all the mapping <a href="#features">features</a> most developers ever need.</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&nbsp;<a title="Leaflet source code repository on GitHub" href="https://github.com/Leaflet/Leaflet">source code</a> that is a&nbsp;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 id="map" class="map map-home" style="height: 300px; margin-top: 50px"></div>

<p>Here we create a map in the <code>'map'</code> div, add <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, and then add a marker with some text in a popup:</p>

<pre class="basic-code javascript"><code>var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.&lt;br&gt; 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>


</div>

<h2 class="usedby-title">Trusted by the best</h2>
<div class="usedby">
  <div class="container">
    <a class="logo logo-github" href="https://github.com">GitHub</a>
    <a class="logo logo-foursquare" href="http://foursquare.com">foursquare</a>
    <a class="logo logo-pinterest" href="https://www.pinterest.com">Pinterest</a>
    <a class="logo logo-500px" href="https://500px.com">500px</a>
    <a class="logo logo-evernote" href="https://evernote.com">Evernote</a>
    <a class="logo logo-wpost" href="https://www.washingtonpost.com">The Washington Post</a>
    <a class="logo logo-ftimes" href="http://www.ft.com">Financial Times</a>
    <a class="logo logo-npr" href="http://www.npr.org">NPR</a>
    <a class="logo logo-usatoday" href="http://www.usatoday.com">USA Today</a>
  </div>
</div>

<div class="container">

<h2 id="features">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 clearfix">
    <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>Events<span class="quiet">: click, mouseover, etc.</span></li>
        <li>Marker dragging</li>
    </ul>

    <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 <span class="quiet">for markers, popups and other map controls</span></li>
        <li>Retina resolution support <span class="quiet">for tile layers and markers</span></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>

    <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&ndash;11</li>
    </ul>

    <h4>On Mobile</h4>

    <ul>
        <li>Safari for iOS 3&ndash;7+</li>
        <li>Android browser 2.2+,&nbsp;3.1+,&nbsp;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">&mdash; around 34&nbsp;KB of gzipped JS code</span></li>
        <li>No external dependencies</li>
    </ul>
</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>

<h2>Getting Involved</h2>

<p>Lets create the best mapping library that will ever exist! Leaflet is developed by <a href="http://agafonkin.com">Vladimir Agafonkin</a> of <a href="http://mapbox.com">Mapbox</a> with a team of dedicated <a href="https://github.com/Leaflet/Leaflet/graphs/contributors">contributors</a>.
<a href="https://github.com/Leaflet/Leaflet">Pull requests</a> are always welcome.
However, there are many more ways to get involved with the development of Leaflet.</p>

<p>You can help the project tremendously by discovering and <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs">reporting bugs</a>, <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation">improving documentation</a>,
helping others on the <a href="https://groups.google.com/forum/#!forum/leaflet-js">Leaflet forum</a>
and <a href="https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>,
showing your support for your favorite feature suggestions on <a href="http://leaflet.uservoice.com">Leaflet UserVoice page</a>,
tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a>
and spreading the word about Leaflet among your colleagues and friends.</p>

<p>Check out the <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribution guide</a> for more information on getting involved with Leaflet development.</p>

<div class="social-buttons">
    <iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>

    <a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleafletjs.com&amp;layout=button_count&amp;show_faces=false&amp;width=93&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:93px; height:20px;" allowTransparency="true"></iframe>
</div>

<script>
	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		osmAttrib = '&copy; <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>