Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
10 KiB
220 lines
10 KiB
--- |
|
layout: v2 |
|
--- |
|
|
|
<div class="announcement">Nov 21, 2016 — <a href="http://leafletjs.com/2016/11/21/leaflet-1.0.2.html">Leaflet 1.0.2</a>, a bugfix release, is out.</div> |
|
|
|
<div class="announcement">Sep 27, 2016 — <a href="http://leafletjs.com/2016/09/27/leaflet-1.0-final.html">Leaflet 1.0</a>, the fastest, most stable and polished Leaflet release ever, is finally out!</div> |
|
|
|
<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. |
|
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 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 <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 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 — 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|
}).addTo(map); |
|
|
|
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> |
|
|
|
|
|
</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-facebook" href="https://www.facebook.com/">Facebook</a> |
|
<a class="logo logo-evernote" href="https://evernote.com">Evernote</a> |
|
<a class="logo logo-etsy" href="https://www.etsy.com/">Etsy</a> |
|
<a class="logo logo-flickr" href="https://www.flickr.com/">Flickr</a> |
|
<a class="logo logo-500px" href="https://500px.com">500px</a> |
|
<a class="logo logo-datagov" href="http://www.data.gov/">Data.gov</a> |
|
<a class="logo logo-european-commission" href="http://ec.europa.eu/">European Commission</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> |
|
<a class="logo logo-nps" href="http://www.nps.gov/">National Park Service</a> |
|
<a class="logo logo-ign" href="http://ign.com">IGN.com</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>.</p> |
|
|
|
<div class="features clearfix"> |
|
<div class="no-break"> |
|
<h3>Layers Out of the Box</h3> |
|
|
|
<ul> |
|
<li>Tile layers, WMS</li> |
|
<li>Markers, Popups</li> |
|
<li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles</span></li> |
|
<li>Image overlays</li> |
|
<li>GeoJSON</li> |
|
</ul> |
|
</div> |
|
|
|
|
|
<div class="no-break"> |
|
<h3>Interaction Features</h3> |
|
|
|
<ul> |
|
<li>Drag panning with inertia</li> |
|
<li>Scroll wheel zoom</li> |
|
<li>Pinch-zoom on mobile</li> |
|
<li>Double click zoom</li> |
|
<li>Zoom to area <span class="quiet">(shift-drag)</span></li> |
|
<li>Keyboard navigation</li> |
|
<li>Events<span class="quiet">: click, mouseover, etc.</span></li> |
|
<li>Marker dragging</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="no-break"> |
|
<h3>Visual Features</h3> |
|
|
|
<ul> |
|
<li>Zoom and pan animation</li> |
|
<li>Tile and popup fade animation</li> |
|
<li>Very nice default design <span class="quiet">for markers, popups and map controls</span></li> |
|
<li>Retina resolution support</li> |
|
</ul> |
|
</div> |
|
|
|
|
|
<div class="no-break"> |
|
<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</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></li> |
|
</ul> |
|
</div> |
|
|
|
<div class="no-break"> |
|
<h3>Performance Features</h3> |
|
|
|
<ul> |
|
<li>Hardware acceleration on mobile <span class="quiet"> makes it feel as smooth as native apps</span></li> |
|
<li>Utilizing CSS3 features <span class="quiet">to make panning and zooming really smooth</span></li> |
|
<li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it very fast</span></li> |
|
<li>Modular build system<span class="quiet"> for leaving out features you don't need</span></li> |
|
<li>Tap delay elimination on mobile</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="no-break"> |
|
<h3>Map Controls</h3> |
|
|
|
<ul> |
|
<li>Zoom buttons</li> |
|
<li>Attribution</li> |
|
<li>Layer switcher</li> |
|
<li>Scale</li> |
|
</ul> |
|
</div> |
|
|
|
|
|
<div class="no-break"> |
|
<h3>Browser Support</h3> |
|
|
|
<h4>Desktop</h4> |
|
|
|
<ul> |
|
<li>Chrome</li> |
|
<li>Firefox</li> |
|
<li>Safari 5+</li> |
|
<li>Opera 12+</li> |
|
<li>IE 7–11</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="no-break"> |
|
<h4>Mobile</h4> |
|
|
|
<ul> |
|
<li>Safari for iOS 7+</li> |
|
<li>Android browser 2.2+, 3.1+, 4+</li> |
|
<li>Chrome for mobile</li> |
|
<li>Firefox for mobile</li> |
|
<li>IE10+ for Win8 devices</li> |
|
</ul> |
|
</div> |
|
|
|
<div class="no-break"> |
|
<h3>Misc</h3> |
|
|
|
<ul> |
|
<li>Extremely lightweight</li> |
|
<li>No external dependencies</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<p>If you find some feature really missing in Leaflet, first check if there's a <a href="plugins.html">plugin for it</a>. If not, please vote for the feature on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p> |
|
|
|
<h2>Getting Involved</h2> |
|
|
|
<p>Let's 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 <a href="https://stackoverflow.com/questions/tagged/leaflet">Stack Overflow</a>, <a href="https://gis.stackexchange.com/questions/tagged/leaflet">GIS Stack Exchange</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&repo=Leaflet&type=watch&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&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&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 = '© <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>
|
|
|