CINXE.COM
Leaflet - a JavaScript library for interactive maps
<!doctype html> <html lang="en"> <head> <base href="https://leafletjs.com/"> <title>Leaflet - a JavaScript library for interactive maps</title> <meta charset="utf-8"> <meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps"> <meta property="og:description" content="Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps."> <meta property="og:image" content="docs/images/logo.png"> <meta property="og:image:alt" content="Leaflet"> <meta itemprop="name" content="Leaflet"> <meta itemprop="description" content="Leaflet — a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps."> <meta itemprop="image" content="docs/images/logo.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico"> <link href="https://leafletjs.com/atom.xml" type="application/atom+xml" rel="alternate" title="Leaflet Dev Blog Atom Feed"> <link rel="stylesheet" href="docs/css/normalize.css"> <link rel="stylesheet" href="docs/css/main.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,300" rel="stylesheet" type="text/css"> <script src="docs/highlight/highlight.pack.js"></script> <link rel="stylesheet" href="docs/highlight/styles/github-gist.css"><!-- Leaflet --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script> ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; MB_ATTR = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'; MB_URL = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + ACCESS_TOKEN; OSM_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; OSM_ATTRIB = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; </script> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="it"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=corsproxy" data-sourceurl="https://leafletjs.com/"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://leafletjs.com/"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.omlEigW4xY8.O/am=DgY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfpjsL9kUWY0h-sp7Ilu7hZWGwEmeg/m=navigationui" data-environment="prod" data-proxy-url="https://leafletjs-com.translate.goog" data-proxy-full-url="https://leafletjs-com.translate.goog/?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB" data-source-url="https://leafletjs.com/" data-source-language="pl" data-target-language="it" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://leafletjs.com/&anno=2" data-client="tr"></script> <header> <h1><a href="https://leafletjs-com.translate.goog/?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB"><img src="docs/images/logo.png" alt="Leaflet" width="300"></a></h1> <p class="tagline">an open-source JavaScript library<br> for mobile-friendly interactive maps</p> </header> <nav> <ul class="nav"> <li><span>Overview</span></li> <li><a href="https://leafletjs-com.translate.goog/examples.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Tutorials</a></li> <li><a href="https://leafletjs-com.translate.goog/reference.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Docs</a></li> <li><a href="https://leafletjs-com.translate.goog/download.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Download</a></li> <li><a href="https://leafletjs-com.translate.goog/plugins.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Plugins</a></li> <li><a href="https://leafletjs-com.translate.goog/blog.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Blog</a></li> </ul> </nav> <main> <div class="container"> <div class="announcement"> May 18, 2023 — <a href="https://leafletjs-com.translate.goog/2022/09/21/leaflet-1.9.0.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">Leaflet 1.9.4</a> has been released! </div> <p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about <abbr title="42 KB gzipped — that's 142 KB minified and 431 KB in the source form, with 14.5 KB of CSS (3.5 KB gzipped) and 6 KB of images.">42 KB of JS</abbr>, it has all the mapping <a href="https://leafletjs-com.translate.goog/?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB#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="https://leafletjs-com.translate.goog/plugins.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">plugins</a>, has a beautiful, easy to use and <a title="Leaflet API reference" href="https://leafletjs-com.translate.goog/reference.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">well-documented API</a> and a simple, readable <a title="Leaflet source code repository on GitHub" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet">source code</a> that is a joy to <a title="A guide to contributing to Leaflet" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/blob/main/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('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS popup.<br> Easily customizable.') .openPopup();</code></pre> <p>Learn more with the <a href="https://leafletjs-com.translate.goog/examples/quick-start/?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">quick start guide</a>, check out <a href="https://leafletjs-com.translate.goog/examples.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">other tutorials</a>, or head straight to the <a href="https://leafletjs-com.translate.goog/reference.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">API documentation</a>. If you have any questions, take a look at the <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/blob/main/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://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com">GitHub</a> <a class="logo logo-foursquare" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://foursquare.com">foursquare</a> <a class="logo logo-pinterest" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.pinterest.com">Pinterest</a> <a class="logo logo-facebook" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.facebook.com/">Facebook</a> <a class="logo logo-evernote" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://evernote.com">Evernote</a> <a class="logo logo-etsy" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.etsy.com/">Etsy</a> <a class="logo logo-flickr" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.flickr.com/">Flickr</a> <a class="logo logo-500px" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://500px.com">500px</a> <a class="logo logo-datagov" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://www.data.gov/">Data.gov</a> <a class="logo logo-european-commission" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://ec.europa.eu/">European Commission</a> <a class="logo logo-wpost" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.washingtonpost.com">The Washington Post</a> <a class="logo logo-ftimes" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://www.ft.com">Financial Times</a> <a class="logo logo-npr" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://www.npr.org">NPR</a> <a class="logo logo-usatoday" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://www.usatoday.com">USA Today</a> <a class="logo logo-nps" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://www.nps.gov/">National Park Service</a> <a class="logo logo-ign" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://ign.com">IGN.com</a> <a class="logo logo-openstreetmap" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.openstreetmap.org/">OpenStreetMap</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 CSS 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 CSS 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 9–11</li> <li>Edge</li> </ul> </div> <div class="no-break"> <h4>Mobile</h4> <ul> <li>Safari for iOS 7+</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="https://leafletjs-com.translate.goog/plugins.html?_x_tr_sl=pl&_x_tr_tl=it&_x_tr_hl=en-GB">plugin for it</a> and if it's been discussed before already on <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>. If not, please open a new GitHub issue.</p> <h2>Getting Involved</h2> <p>Let's create the best mapping library in the world! Leaflet was originally created by <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://agafonkin.com">Volodymyr Agafonkin</a>, but is now developed by a big community of <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/graphs/contributors">contributors</a>. <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=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://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md%23reporting-bugs">reporting bugs</a>, <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md%23improving-documentation">improving documentation</a>, helping others on <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://stackoverflow.com/questions/tagged/leaflet">Stack Overflow</a>, <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://gis.stackexchange.com/questions/tagged/leaflet">GIS Stack Exchange</a> and <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>, X to <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://twitter.com/LeafletJS">@LeafletJS</a> and spreading the word about Leaflet among your colleagues and friends.</p> <p>Check out the <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://github.com/Leaflet/Leaflet/blob/main/CONTRIBUTING.md">contribution guide</a> for more information on getting involved with Leaflet development.</p> <div class="social-buttons"><iframe src="https://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://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><iframe src="https://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 = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttrib = '© <a href="https://www.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 CSS popup.<br />Easily customizable.') .openPopup(); </script> </div> </main> <footer class="container"> <div class="footer"> <p>© 2010–2024 <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://agafonkin.com">Volodymyr Agafonkin</a>. Maps © <a href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p> </div> <nav class="ext-links"><a class="ext-link twitter" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://twitter.com/LeafletJS" title="Follow LeafletJS on X"><img alt="Follow LeafletJS on X" src="docs/images/x-round.svg" width="46"></a> <a class="ext-link github" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=http://github.com/Leaflet/Leaflet" title="View Source on GitHub"><img alt="View Source on GitHub" src="docs/images/github-round.svg" width="46"></a> <a class="ext-link forum" href="https://translate.google.com/website?sl=pl&tl=it&hl=en-GB&u=https://stackoverflow.com/questions/tagged/leaflet" title="Ask for help on Stack Overflow"><img alt="Leaflet questions on Stack Overflow" src="docs/images/forum-round.svg" width="46"></a> </nav><button id="back-to-top" title="Scroll back to top"> <svg viewbox="0 0 16 16"><path d="M7.3,3.3c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4s-1,0.4-1.4,0L8,5.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L7.3,3.3L7.3,3.3z" /> </svg></button> </footer> <script> var _gaq = _gaq || []; _gaq.push([ '_setAccount', 'UA-4147697-4' ]); _gaq.push([ '_trackPageview' ]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script src="dialog/dialog.js"></script> <script src="docs/js/docs.js"></script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'it', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>