diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 399 |
1 files changed, 399 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..b0e2bfb --- /dev/null +++ b/index.html @@ -0,0 +1,399 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + + <title>Learning to Leaflet</title> + + <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> + <meta name="author" content="Hakim El Hattab"> + + <meta name="apple-mobile-web-app-capable" content="yes" /> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> + + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + + <link rel="stylesheet" href="reveal.js/css/reveal.css"> + <link id="theme" href="reveal.js/css/theme/serif.css" rel="stylesheet"> + + <!-- For syntax highlighting --> + <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css"> + + <style> + .demo-left { + width: 48%; + height: 100%; + float: left; + } + + .demo-right { + width: 48%; + height: 100%; + float: right; + } + + .reveal .demo-iframe { + width: 90%; + height: 100%; + margin: 20px auto; + } + + .reveal .demo-code pre { + + } + + .reveal .standalone { + font-size: 0.2em; + } + </style> + + <!--[if lt IE 9]> + <script src="lib/js/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + + <div class="reveal"> + + <!-- Any section element inside of this container is displayed as a slide --> + <div class="slides"> + <section> + <h3>Learning to</h3> + <h1>Leaflet</h1> + <p> + <small>By <a href="http://cbaines.net/">Christopher Baines</a></small> + </p> + </section> + + <section> + <h2>Be prepared to...</h2> + <ul> + <li>Make a basic map</li> + <li>Add some things</li> + <li>Use some GeoJSON</li> + </ul> + </section> + + <section> + <h2>What is Leaflet</h2> + <blockquote cite="http://leafletjs.com"> + “An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps” + </blockquote> + <a href="http://leafletjs.com">LeafletJS.com</a> + <p> + Contribute on <a href="https://github.com/Leaflet/Leaflet">GitHub</a> + </p> + </section> + + <section> + <h2>Key Features</h2> + <ul> + <li class="fragment">Free Software</li> + <li class="fragment">Extremely lightweight — around 34 KB of gzipped JS code</li> + <li class="fragment">No external dependencies</li> + <li class="fragment">Multi-touch support</li> + <li class="fragment">GeoJSON Layers</li> + <li class="fragment">Markers (custom markers support)</li> + <li class="fragment">Popups</li> + <li class="fragment">Use any map Provider</li> + <li class="fragment">Browser Support works in IE7</li> + </ul> + <a class="fragment" href="http://leafletjs.com/features.html">Full list of features</a> + </p> + </section> + + <section> + <h3>Your First Map</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo1.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +var map = L.map('map', { + center: [50.9087036, -1.4045204], // The Art House Cafe + zoom: 13 +}); + +L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' +}).addTo(map); + </code></pre> + </div> + </section> + + <section> + <h3>What a Marker!</h3> + + <iframe class="demo-iframe" src="demo2.html"> + </iframe> + + <a href="http://leafletjs.com/reference.html#marker" target="_blank"> + Marker Documentation + </a> + + </section> + + <section> + <h3>What a Marker!</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo2.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +// Add a marker over the Art House Cafe + +var marker = L.marker([50.9087036, -1.4045204]) + +marker.addTo(map); + </code></pre> + </section> + + <section> + <h3>A Supprising Popup</h3> + + <iframe class="demo-iframe" src="demo3.html"> + </iframe> + + <a href="http://leafletjs.com/reference.html#popup" target="_blank"> + Popup Documentation + </a> + + </section> + + <section> + <h3>A Supprising Popup</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo3.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +// Add a popup to the marker + +marker.bindPopup("The Art House Cafe"); + </code></pre> + </div> + </section> + + <section> + <h3>A Round Circle</h3> + + <iframe class="demo-iframe" src="demo4.html"> + </iframe> + + <a href="http://leafletjs.com/reference.html#circle" target="_blank"> + Circle Documentation + </a> + + </section> + + <section> + <h3>A Round Circle</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo4.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +// Add a circle to the map + +var circle = L.circle(artHouseCafe, 50, { + color: 'red', + fillColor: '#f03', + fillOpacity: 0 +}).addTo(map); + </code></pre> + </div> + </section> + + <section> + <h3>Cafe's with GeoJSON</h3> + + <iframe class="demo-iframe" src="demo5.html"> + </iframe> + + <a href="http://leafletjs.com/reference.html#geojson" target="_blank"> + GeoJSON Documentation + </a> + + </section> + + <section> + <h3>Cafe's with GeoJSON</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo5.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +// Load some GeoJSON exported from OpenStreetMap using the OverpassAPI +// (http://overpass-turbo.eu/s/7yI) + +getJSON("cafes.json", function(cafes) { + + L.geoJson(cafes).addTo(map); +}); + +// plus a utility function: getJSON + </code></pre> + </div> + </section> + + <section> + <h3>GeoJSON with Custom Icons</h3> + + <iframe class="demo-iframe" src="demo6.html"> + </iframe> + + </br> + <a href="http://leafletjs.com/reference.html#icon" target="_blank"> + Icon Documentation + </a> + + </section> + + <section> + <h3>GeoJSON with Custom Icons</h3> + + <div class="demo-left"> + <iframe class="demo-iframe" src="demo6.html"> + </iframe> + </div> + + <div class="demo-left"> + <pre class="demo-code"><code class="hljs javascript" data-trim> +// Load some GeoJSON exported from OpenStreetMap using the OverpassAPI +// (http://overpass-turbo.eu/s/7yI) + +var coffeeIcon = L.icon({ + iconUrl: 'coffee.png', + + iconSize: [32, 37], // size of the icon + iconAnchor: [16, 37], // point of the icon which will + popupAnchor: [16, 0] // point from which the +}); + +getJSON("cafes.json", function(cafes) { + + // Coffee icon from + // http://mapicons.nicolasmollet.com/markers/restaurants-bars/bars/coffee/ + + L.geoJson(cafes, { + pointToLayer: function(feature, latLng) { + console.log(feature.properties); + if (feature.properties.cuisine == "coffee_shop") { + var marker = L.marker(latLng, { + icon: coffeeIcon + }); + + return marker; + } else { + return L.marker(latLng); + } + }, + onEachFeature: function(feature, layer) { + + } + }).addTo(map); +}); + </code></pre> + </div> + </section> + + <section> + <h2>Plugins</h2> + <p> + A short selection + </p> + <ul> + <li><a href="http://leaflet.github.io/Leaflet.markercluster/"> + Marker Cluster + </a></li> + <li><a href="http://norkart.github.io/Leaflet-MiniMap"> + MiniMap + </a></li> + <li><a href="https://github.com/Leaflet/Leaflet.heat"> + HeatMap + </a></li> + <li><a href="http://leafletjs.com/plugins.html"> + Plus Many More + </a></li> + </ul> + + </section> + + <section> + <h2>One Alternative worth Considering</h2> + <p><a href="http://openlayers.org/">OpenLayers 3</a> is a + <blockquote cite="http://leafletjs.com"> + “A high-performance, feature-packed library for all your + mapping needs” + </blockquote> + </p> + + <p>In comparison to Leaflet, this library is more powerful, at the + expense of being larger and more complicated. + </p> + + <a href="http://openlayers.org/en/v3.2.0/examples/"> + OpenLayers 3 Examples + </a> + </section> + + <section> + <h2>Useful Links</h2> + <ul> + <li> + <a href="http://leafletjs.com/">Leaflet Homepage</a> + </li> + <li> + <a href="http://leafletjs.com/reference.html">API Reference</a> + </li> + <li> + <a href="http://leafletjs.com/examples.html">Tutorials</a> + </li> + </ul> + </section> + </div> + </div> + + <script src="reveal.js/lib/js/head.min.js"></script> + <script src="reveal.js/js/reveal.js"></script> + + <script> + + // Full list of configuration options available here: + // https://github.com/hakimel/reveal.js#configuration + Reveal.initialize({ + controls: false, + progress: true, + history: true, + center: true, + touch:true, + + theme: "serif", // available themes are in /css/theme + transition: 'linear', // default/cube/page/concave/zoom/linear/fade/none + + // Optional libraries used to extend on reveal.js + dependencies: [ + { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + ] + }); + + </script> + + </body> +</html> |