summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorChristopher Baines <mail@cbaines.net>2015-02-05 11:22:13 +0000
committerChristopher Baines <mail@cbaines.net>2015-02-09 09:58:29 +0000
commit00a02018a5e3100c1db302ae5853e41b5c50a723 (patch)
tree17b8f600ef88f8cf1af657a5bb45a3c0816914cd /index.html
downloadleaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar
leaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar.gz
Initial commit
Diffstat (limited to 'index.html')
-rw-r--r--index.html399
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">
+ &ldquo;An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps&rdquo;
+ </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: '&copy; <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">
+ &ldquo;A high-performance, feature-packed library for all your
+ mapping needs&rdquo;
+ </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>