2012-07-17 01:21:00 +08:00
---
2014-04-24 21:24:41 +08:00
layout: v2
2012-07-17 01:21:00 +08:00
title: Tutorials
2015-06-30 20:01:13 +08:00
bodyclass: examples
2012-07-17 01:21:00 +08:00
---
2012-07-18 21:41:48 +08:00
2012-07-24 06:41:55 +08:00
## Leaflet Tutorials
2012-07-17 01:21:00 +08:00
2012-07-26 00:50:59 +08:00
Every tutorial here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
2012-07-17 01:21:00 +08:00
***
2012-07-18 21:41:48 +08:00
[< img src = "docs/images/quick-start.png" class = "example-img bordered-img" / > ][1]
2012-07-17 01:21:00 +08:00
### [Leaflet Quick Start Guide][1]
2014-04-28 18:41:40 +08:00
A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with Mapbox tiles) on your page, working with markers, polylines and popups, and dealing with events.
2012-07-17 01:21:00 +08:00
***
2012-07-18 21:41:48 +08:00
[< img src = "docs/images/mobile.png" class = "example-img" / > ][2]
2012-07-17 01:21:00 +08:00
### [Leaflet on Mobile][2]
2012-07-26 00:50:59 +08:00
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.
2012-07-17 01:21:00 +08:00
***
2012-07-18 21:41:48 +08:00
[< img src = "docs/images/custom-icons.png" class = "example-img bordered-img" / > ][3]
2012-07-17 01:21:00 +08:00
2012-07-29 07:20:15 +08:00
### [Markers with Custom Icons][3]
2012-07-17 01:21:00 +08:00
2012-07-26 00:50:59 +08:00
In this pretty tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map.
2012-07-17 01:21:00 +08:00
***
2012-07-18 21:41:48 +08:00
[< img src = "docs/images/geojson.png" class = "example-img bordered-img" / > ][4]
2012-07-17 01:21:00 +08:00
### [Using GeoJSON with Leaflet][4]
2012-07-26 00:50:59 +08:00
In this tutorial, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
2012-07-17 01:21:00 +08:00
2012-08-07 22:45:47 +08:00
***
[< img src = "docs/images/choropleth.png" class = "example-img bordered-img" / > ][7]
### [Interactive Choropleth Map][7]
2012-08-07 23:09:59 +08:00
A case study of creating a colorful interactive [choropleth map ](http://en.wikipedia.org/wiki/Choropleth_map ) of US States Population Density with GeoJSON and some custom controls. News websites will love this.
2012-08-07 22:45:47 +08:00
2012-07-17 01:21:00 +08:00
***
2012-07-18 21:41:48 +08:00
[< img src = "docs/images/layers-control.png" class = "example-img bordered-img" / > ][6]
2012-07-17 01:21:00 +08:00
### [Layer Groups and Layers Control][6]
A tutorial on how to manage groups of layers and use the layer switching control.
2016-02-16 01:41:59 +08:00
***
2016-04-02 22:13:56 +08:00
[< img src = "examples/crs-simple/thumbnail.png" class = "example-img bordered-img" / > ][9]
2016-02-16 01:41:59 +08:00
### [Non-geographical maps][9]
A primer on `L.CRS.Simple` , how to make maps with no concept of "latitude" or "longitude".
2016-04-02 22:13:56 +08:00
***
[< img src = "examples/wms/thumbnail.png" class = "example-img bordered-img" / > ][10]
### [WMS and TMS][10]
How to integrate with WMS and TMS services from professional GIS software.
2016-02-14 23:09:15 +08:00
***
The following tutorials use features available **only in Leaflet 1.0** :
***
[< img src = "docs/images/labels-pane.png" class = "example-img bordered-img" / > ][8]
### [Working with map panes][8]
How the default map panes work to display overlays on top of tiles, and how to override that.
2012-07-23 22:22:08 +08:00
<!-- ***
2012-07-18 05:32:50 +08:00
< h3 > < a class = "noimpl" href = "#" > Custom Controls< / a > < / h3 >
2012-07-17 01:21:00 +08:00
A brief tutorial on implementing custom map controls.
***
2012-07-18 05:32:50 +08:00
< h3 > < a class = "noimpl" href = "#" > Custom Overlays< / a > < / h3 >
2012-07-17 01:21:00 +08:00
If markers, popups and vectors are not enough for you, here's a guide for creating your own map overlays (things to put on a map).
2012-07-23 22:22:08 +08:00
-->
2012-07-17 01:21:00 +08:00
***
2012-07-23 22:22:08 +08:00
If you find that an important tutorial is missing here, let us know!
2012-07-17 01:21:00 +08:00
[1]: examples/quick-start.html
[2]: examples/mobile.html
[3]: examples/custom-icons.html
[4]: examples/geojson.html
[5]: http://geojson.org/
2012-07-18 21:41:48 +08:00
[6]: examples/layers-control.html
2012-08-07 22:45:47 +08:00
[7]: examples/choropleth.html
2016-02-14 23:09:15 +08:00
[8]: examples/map-panes.html
2016-02-16 01:41:59 +08:00
[9]: examples/crs-simple/crs-simple.html
2016-04-02 22:13:56 +08:00
[10]: examples/wms/wms.html
