6ee1a6eb65
* 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
2.7 KiB
| layout | title | bodyclass |
|---|---|---|
| v2 | Tutorials | examples |
Leaflet Tutorials
Every tutorial here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
{% 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." %}
{% 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." %}
{% 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 objects." %}
{% 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 of US States Population Density with GeoJSON and some custom controls. News websites will love this." %}
{% 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." %}
If you find that an important tutorial is missing here, let us know!