CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <title>Tutorials - Leaflet - a JavaScript library for interactive maps</title> <meta charset="utf-8" /> <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" />  <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> </head> <body class="examples"> <header> <h1><a href="https://leafletjs.com/"><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> <a href="index.html">Overview</a> </li> <li> <span>Tutorials</span> </li> <li> <a href="reference.html">Docs</a> </li> <li> <a href="download.html">Download</a> </li> <li> <a href="plugins.html">Plugins</a> </li> <li> <a href="blog.html">Blog</a> </li> </ul> </nav> <main> <div class="container"> <h2 id="leaflet-tutorials">Leaflet Tutorials</h2> <p>Every tutorial here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.</p> <hr /> <p><a href="examples/quick-start/"><img src="examples/quick-start/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="leaflet-quick-start-guide"><a href="examples/quick-start/">Leaflet Quick Start Guide</a></h3> <p>A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with OpenStreetMap tiles) on your page, working with markers, polylines and popups, and dealing with events.</p> <hr /> <p><a href="examples/mobile/"><img src="examples/mobile/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="leaflet-on-mobile"><a href="examples/mobile/">Leaflet on Mobile</a></h3> <p>In this tutorial, you’ll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p> <hr /> <p><a href="examples/custom-icons/"><img src="examples/custom-icons/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="markers-with-custom-icons"><a href="examples/custom-icons/">Markers with Custom Icons</a></h3> <p>In this pretty tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.</p> <hr /> <p><a href="examples/accessibility/"><img src="examples/accessibility/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="accessible-maps"><a href="examples/accessibility/">Accessible maps</a></h3> <p>A guide to basic Leaflet accessibility - make your maps usable to persons of a wide range of abilities.</p> <hr /> <p><a href="examples/geojson/"><img src="examples/geojson/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="using-geojson-with-leaflet"><a href="examples/geojson/">Using GeoJSON with Leaflet</a></h3> <p>In this tutorial, you’ll learn how to create and interact with map vectors created from <a href="http://geojson.org/">GeoJSON</a> objects.</p> <hr /> <p><a href="examples/choropleth/"><img src="examples/choropleth/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="interactive-choropleth-map"><a href="examples/choropleth/">Interactive Choropleth Map</a></h3> <p>A case study of creating a colorful interactive <a href="http://en.wikipedia.org/wiki/Choropleth_map">choropleth map</a> of US States Population Density with GeoJSON and some custom controls. News websites will love this.</p> <hr /> <p><a href="examples/layers-control/"><img src="examples/layers-control/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="layer-groups-and-layers-control"><a href="examples/layers-control/">Layer Groups and Layers Control</a></h3> <p>A tutorial on how to manage groups of layers and use the layer switching control.</p> <hr /> <p><a href="examples/zoom-levels/"><img src="examples/zoom-levels/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="zoom-levels"><a href="examples/zoom-levels/">Zoom levels</a></h3> <p>A deeper look into what zoom levels are.</p> <hr /> <p><a href="examples/crs-simple/crs-simple.html"><img src="examples/crs-simple/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="non-geographical-maps"><a href="examples/crs-simple/crs-simple.html">Non-geographical maps</a></h3> <p>A primer on <code class="language-plaintext highlighter-rouge">L.CRS.Simple</code>, how to make maps with no concept of “latitude” or “longitude”.</p> <hr /> <p><a href="examples/wms/wms.html"><img src="examples/wms/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="wms-and-tms"><a href="examples/wms/wms.html">WMS and TMS</a></h3> <p>How to integrate with WMS and TMS services from professional GIS software.</p> <hr /> <p><a href="examples/map-panes/"><img src="examples/map-panes/thumbnail.png" class="example-img bordered-img" /></a></p> <h3 id="working-with-map-panes"><a href="examples/map-panes/">Working with map panes</a></h3> <p>How the default map panes work to display overlays on top of tiles, and how to override that.</p> <hr /> <p><a href="examples/overlays/"><img src="examples/overlays/thumbnail.gif" class="example-img bordered-img" /></a></p> <h3 id="overlays-image-video-svg"><a href="examples/overlays/">Overlays: Image, Video, SVG</a></h3> <p>Leaflet can help you display images, videos and SVG elements somewhere on the map.</p> <hr /> <p>The following tutorials cover how to create plugins for Leaflet, and are intended only for developers experienced in JavaScript:</p> <hr /> <p><a href="examples/extending/extending-1-classes.html"><img src="examples/extending/thumbnail-1.png" class="example-img bordered-img" /></a></p> <h3 id="extending-leaflet-class-theory"><a href="examples/extending/extending-1-classes.html">Extending Leaflet: Class Theory</a></h3> <p>An overview of Leaflet’s classes, class inheritance, and conventions.</p> <hr /> <p><a href="examples/extending/extending-2-layers.html"><img src="examples/extending/thumbnail-2.png" class="example-img bordered-img" /></a></p> <h3 id="extending-leaflet-layers"><a href="examples/extending/extending-2-layers.html">Extending Leaflet: Layers</a></h3> <p>How to extend layers or create new ones, using specific entry points for doing so.</p> <hr /> <p><a href="examples/extending/extending-3-controls.html"><img src="examples/extending/thumbnail-3.png" class="example-img bordered-img" /></a></p> <h3 id="extending-leaflet-handlers-and-controls"><a href="examples/extending/extending-3-controls.html">Extending Leaflet: Handlers and Controls</a></h3> <p>How to extend or create non-layers.</p> </div> </main> <footer class="container"> <div class="footer"> <p>© 2010–2024 <a href="https://agafonkin.com">Volodymyr Agafonkin</a>. Maps © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p> </div> <nav class="ext-links"> <a class="ext-link twitter" href="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="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://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> </body> </html>