2012-07-17 01:21:00 +08:00
---
layout: default
title: Tutorials
---
### Leaflet tutorials
Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
***
[< img src = "docs/images/quick-start.png" class = "example-img bordered-img" / > ][1]
### [Leaflet Quick Start Guide][1]
A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with CloudMade tiles) on your page, working with markers, polylines and popups, and dealing with events.
***
[< img src = "docs/images/mobile.png" class = "example-img" / > ][2]
### [Leaflet on Mobile][2]
In this example, 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.
***
[< img src = "docs/images/custom-icons.png" class = "example-img bordered-img" / > ][3]
### [Markers With Custom Icons][3]
In this pretty example, you'll learn how to easily define your own icons for use by the markers you put on the map.
***
[< img src = "docs/images/geojson.png" class = "example-img bordered-img" / > ][4]
### [Using GeoJSON with Leaflet][4]
In this example, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
***
[< img src = "docs/images/layers-control.png" class = "example-img bordered-img" / > ][6]
### [Layer Groups and Layers Control][6]
A tutorial on how to manage groups of layers and use the layer switching control.
***
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).
***
More examples coming soon!
[1]: examples/quick-start.html
[2]: examples/mobile.html
[3]: examples/custom-icons.html
[4]: examples/geojson.html
[5]: http://geojson.org/
[6]: examples/layers-control.html
