Initial commit

author: Christopher Baines <mail@cbaines.net> 2015-02-05 11:22:13 +0000
committer: Christopher Baines <mail@cbaines.net> 2015-02-09 09:58:29 +0000
commit: 00a02018a5e3100c1db302ae5853e41b5c50a723 (patch)
tree: 17b8f600ef88f8cf1af657a5bb45a3c0816914cd /index.html
download: leaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar
leaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar.gz
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>
author	Christopher Baines <mail@cbaines.net>	2015-02-05 11:22:13 +0000
committer	Christopher Baines <mail@cbaines.net>	2015-02-09 09:58:29 +0000
commit	00a02018a5e3100c1db302ae5853e41b5c50a723 (patch)
tree	17b8f600ef88f8cf1af657a5bb45a3c0816914cd /index.html
download	leaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar leaflet-workshop-00a02018a5e3100c1db302ae5853e41b5c50a723.tar.gz