<p>A basic example: let's create a map with<abbrtitle="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>
<p>Let's create a map in the <code>'map'</code> div, add<abbrtitle="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 then add a marker with some text in a popup:</p>
<preclass="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);
<p>Learn more with the <ahref="examples/quick-start.html">quick start guide</a>, check out <ahref="examples.html">other tutorials</a>,
@ -57,134 +54,137 @@ If you have any questions, take a look at the <a href="https://github.com/Leafle
<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 <ahref="plugins.html">third-party plugins</a>.</p>
<li>Hardware acceleration on iOS <spanclass="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
<li>Utilizing CSS3 features <spanclass="quiet">like Transitions, Transforms, requestAnimationFrame</span> to make panning and zooming really smooth</li>
<li>Smart polyline/polygon rendering <spanclass="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<spanclass="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<spanclass="quiet"> makes controls and layers respond to taps immediately</span></li>
</ul>
<ul>
<li>Pure CSS3 popups and controls <spanclass="quiet">for easy restyling</span></li>
<li>Image- and HTML-based markers</li>
<li><spanclass="quiet">A simple interface for implementing</span> custom map layers and controls</li>
<li>Custom map projections <spanclass="quiet">(with <code>EPSG:3857/4326/3395</code> out of the box)</span></li>
<li>Hardware acceleration on iOS <spanclass="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
<li>Utilizing CSS3 features <spanclass="quiet">like Transitions, Transforms, requestAnimationFrame</span> to make panning and zooming really smooth</li>
<li>Smart polyline/polygon rendering <spanclass="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<spanclass="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<spanclass="quiet"> makes controls and layers respond to taps immediately</span></li>
</ul>
</div>
<h3>Browser Support</h3>
<div class="col3">
<h4>On Desktop</h4>
<h3>Map Controls</h3>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari 5+</li>
<li>Opera 12+</li>
<li>IE 7–11</li>
</ul>
<ul>
<li>Zoom buttons</li>
<li>Attribution</li>
<li>Layer switcher</li>
<li>Scale</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>Browser Support</h3>
<h4>On Desktop</h4>
<h3>Misc</h3>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari 5+</li>
<li>Opera 12+</li>
<li>IE 7–11</li>
</ul>
<ul>
<li>Extremely lightweight <spanclass="quiet">— around 34 KB of gzipped JS code</span></li>
<li>No external dependencies</li>
</ul>
</div>
<h4>On Mobile</h4>
<p>If you find some feature really missing in Leaflet, please vote for it on the <ahref="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
<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>
<h2>Getting Involved</h2>
<p>Lets create the best mapping library that will ever exist! Leaflet is developed by <ahref="http://agafonkin.com">Vladimir Agafonkin</a> of <ahref="http://mapbox.com">Mapbox</a> with a team of dedicated <ahref="https://github.com/Leaflet/Leaflet/graphs/contributors">contributors</a>.
<ahref="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>
<h3>Misc</h3>
<p>You can help the project tremendously by discovering and <ahref="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs">reporting bugs</a>, <ahref="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation">improving documentation</a>,
helping others on the <ahref="https://groups.google.com/forum/#!forum/leaflet-js">Leaflet forum</a>
and <ahref="https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>,
showing your support for your favorite feature suggestions on <ahref="http://leaflet.uservoice.com">Leaflet UserVoice page</a>,
tweeting to <ahref="http://twitter.com/LeafletJS">@LeafletJS</a>
and spreading the word about Leaflet among your colleagues and friends.</p>
<ul>
<li>Extremely lightweight <spanclass="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 <ahref="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
Check out the <ahref="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribution guide</a> for more information on getting involved with Leaflet development.
Vladimir Agafonkin
11 years ago