Clean up docs/examples - one directory per tutorial, more templating. (#4965)

* Clean up docs/examples - one directory per tutorial, more templating.

* Fix some URLs

* tutorials: update rendered CDN links to 1.0.0 and L.circle signature (#4975)

* Update shown CDN links to 1.0.0

As initially done in PR #4967, but just for the rendered links (what the users sees), as actual link / script tags are already updated.

* DOCS update L.circle to new syntax

in quick-start tutorial, following PR #4974.

* DOCS update L.circle to new syntak (example src)

updated L.circle to new signature (radius as an option instead of 2nd parameter).

* tutorials: use L.geoJSON new syntax (#4983)

* tutorials: use new syntax L.geoJSON

for consistency with recommended factory new syntax (`L.geoJSON` instead of legacy `L.geoJson`).
As done in PR #4933 for docstrings.

* tutorials: L.geoJSON new syntax in script

* Renamed several files to directory/index.md
This commit is contained in:
Iván Sánchez Ortega
2016-09-30 13:56:05 +02:00
committed by GitHub
parent d0ffe8a1ab
commit 6ee1a6eb65
63 changed files with 1662 additions and 1552 deletions

View File

@ -8,96 +8,79 @@ bodyclass: examples
Every tutorial 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 Mapbox 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 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.
***
[<img src="docs/images/custom-icons.png" class="example-img bordered-img" />][3]
### [Markers with Custom Icons][3]
In this pretty tutorial, 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 tutorial, you'll learn how to create and interact with map vectors created from [GeoJSON][5] objects.
***
[<img src="docs/images/choropleth.png" class="example-img bordered-img" />][7]
### [Interactive Choropleth Map][7]
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.
***
[<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.
***
[<img src="examples/crs-simple/thumbnail.png" class="example-img bordered-img" />][9]
### [Non-geographical maps][9]
A primer on `L.CRS.Simple`, how to make maps with no concept of "latitude" or "longitude".
{% include tutorial_link.html
page="quick-start/"
thumbnail="quick-start/thumbnail.png"
title="Leaflet Quick Start Guide"
description="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."
%}
***
[<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.
{% include tutorial_link.html
page="mobile/"
thumbnail="mobile/thumbnail.png"
title="Leaflet on Mobile"
description="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."
%}
***
{% include tutorial_link.html
page="custom-icons/"
thumbnail="custom-icons/thumbnail.png"
title="Markers with Custom Icons"
description="In this pretty tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map."
%}
The following tutorials use features available **only in Leaflet 1.0**:
***
[<img src="docs/images/labels-pane.png" class="example-img bordered-img" />][8]
{% include tutorial_link.html
page="geojson/"
thumbnail="geojson/thumbnail.png"
title="Using GeoJSON with Leaflet"
description="In this tutorial, you'll learn how to create and interact with map vectors created from [GeoJSON](http://geojson.org/) objects."
%}
### [Working with map panes][8]
How the default map panes work to display overlays on top of tiles, and how to override that.
{% include tutorial_link.html
page="choropleth/"
thumbnail="choropleth/thumbnail.png"
title="Interactive Choropleth Map"
description="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."
%}
<!--***
<h3><a class="noimpl" href="#">Custom Controls</a></h3>
A brief tutorial on implementing custom map controls.
{% include tutorial_link.html
page="layers-control/"
thumbnail="layers-control/thumbnail.png"
title="Layer Groups and Layers Control"
description="A tutorial on how to manage groups of layers and use the layer switching control."
%}
{% include tutorial_link.html
page="crs-simple/crs-simple.html"
thumbnail="crs-simple/thumbnail.png"
title="Non-geographical maps"
description="A primer on `L.CRS.Simple`, how to make maps with no concept of \"latitude\" or \"longitude\"."
%}
{% include tutorial_link.html
page="wms/wms.html"
thumbnail="wms/thumbnail.png"
title="WMS and TMS"
description="How to integrate with WMS and TMS services from professional GIS software."
%}
{% include tutorial_link.html
page="map-panes/"
thumbnail="map-panes/thumbnail.png"
title="Working with map panes"
description="How the default map panes work to display overlays on top of tiles, and how to override that."
%}
***
<h3><a class="noimpl" href="#">Custom Overlays</a></h3>
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).
-->
***
If you find that an important tutorial is missing here, let us know!
[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
[7]: examples/choropleth.html
[8]: examples/map-panes.html
[9]: examples/crs-simple/crs-simple.html
[10]: examples/wms/wms.html