summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitmodules6
-rw-r--r--cafes.json534
-rw-r--r--coffee.pngbin0 -> 930 bytes
-rw-r--r--demo1.html32
-rw-r--r--demo2.html40
-rw-r--r--demo3.html44
-rw-r--r--demo4.html55
-rw-r--r--demo5.html63
-rw-r--r--demo6.html89
-rw-r--r--index.html399
m---------leaflet0
m---------reveal.js0
12 files changed, 1262 insertions, 0 deletions
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..1a24819
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,6 @@
+[submodule "reveal.js"]
+ path = reveal.js
+ url = https://github.com/hakimel/reveal.js.git
+[submodule "leaflet"]
+ path = leaflet
+ url = git@github.com:Leaflet/Leaflet.git
diff --git a/cafes.json b/cafes.json
new file mode 100644
index 0000000..9768d26
--- /dev/null
+++ b/cafes.json
@@ -0,0 +1,534 @@
+{
+ "type": "FeatureCollection",
+ "generator": "overpass-turbo",
+ "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
+ "timestamp": "2015-02-08T15:40:02Z",
+ "features": [
+ {
+ "type": "Feature",
+ "id": "way/129851881",
+ "properties": {
+ "@id": "way/129851881",
+ "amenity": "cafe",
+ "building": "yes"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.4075148,
+ 50.8976181
+ ],
+ [
+ -1.4074276,
+ 50.8975894
+ ],
+ [
+ -1.4073572,
+ 50.897671
+ ],
+ [
+ -1.4074449,
+ 50.8976987
+ ],
+ [
+ -1.4075148,
+ 50.8976181
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "way/181509342",
+ "properties": {
+ "@id": "way/181509342",
+ "amenity": "cafe",
+ "building": "yes",
+ "name": "Costa"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.4039418,
+ 50.9020751
+ ],
+ [
+ -1.4038876,
+ 50.9020749
+ ],
+ [
+ -1.4036918,
+ 50.9020743
+ ],
+ [
+ -1.4036944,
+ 50.9021208
+ ],
+ [
+ -1.4037631,
+ 50.9021187
+ ],
+ [
+ -1.4039584,
+ 50.9021128
+ ],
+ [
+ -1.4039418,
+ 50.9020751
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "way/181509350",
+ "properties": {
+ "@id": "way/181509350",
+ "amenity": "cafe",
+ "building": "yes",
+ "name": "Power Gourmet"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.4036918,
+ 50.9020743
+ ],
+ [
+ -1.4038876,
+ 50.9020749
+ ],
+ [
+ -1.4038876,
+ 50.9020266
+ ],
+ [
+ -1.4036897,
+ 50.9020292
+ ],
+ [
+ -1.4036918,
+ 50.9020743
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "way/184267131",
+ "properties": {
+ "@id": "way/184267131",
+ "amenity": "cafe",
+ "building": "yes",
+ "cuisine": "fish_and_chips",
+ "name": "Sam's Plaice"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.399319,
+ 50.9013776
+ ],
+ [
+ -1.399446,
+ 50.9013854
+ ],
+ [
+ -1.3994528,
+ 50.9013239
+ ],
+ [
+ -1.3993286,
+ 50.901317
+ ],
+ [
+ -1.399319,
+ 50.9013776
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "way/190393749",
+ "properties": {
+ "@id": "way/190393749",
+ "amenity": "cafe",
+ "building": "yes",
+ "name": "Kingsland Cafe"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.3966134,
+ 50.9054481
+ ],
+ [
+ -1.3966049,
+ 50.9054024
+ ],
+ [
+ -1.3963678,
+ 50.9054044
+ ],
+ [
+ -1.3963678,
+ 50.9054522
+ ],
+ [
+ -1.3964233,
+ 50.9054513
+ ],
+ [
+ -1.3966134,
+ 50.9054481
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "way/285215167",
+ "properties": {
+ "@id": "way/285215167",
+ "addr:housenumber": "1",
+ "addr:postcode": "SO14 7FP",
+ "addr:street": "Guildhall Square",
+ "amenity": "cafe",
+ "name": "Caffe Momento",
+ "url": "http://www.caffemomento.co.uk/"
+ },
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [
+ [
+ -1.405412,
+ 50.9077141
+ ],
+ [
+ -1.4051156,
+ 50.9077148
+ ],
+ [
+ -1.4051168,
+ 50.9077776
+ ],
+ [
+ -1.4054132,
+ 50.9077772
+ ],
+ [
+ -1.4054123,
+ 50.9077294
+ ],
+ [
+ -1.405412,
+ 50.9077141
+ ]
+ ]
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/612492167",
+ "properties": {
+ "@id": "node/612492167",
+ "amenity": "cafe",
+ "name": "The Buttery"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.403678,
+ 50.9048192
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/700236017",
+ "properties": {
+ "@id": "node/700236017",
+ "amenity": "cafe",
+ "name": "Steam Coffee Shop"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4051289,
+ 50.8961907
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1094730256",
+ "properties": {
+ "@id": "node/1094730256",
+ "amenity": "cafe",
+ "cuisine": "coffee_shop",
+ "name": "Starbucks"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4046651,
+ 50.905609
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1556159277",
+ "properties": {
+ "@id": "node/1556159277",
+ "addr:housenumber": "101-102",
+ "addr:street": "S",
+ "amenity": "cafe",
+ "cuisine": "kebab",
+ "name": "Farah Cafe and Internet"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.3966902,
+ 50.9066199
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1592803972",
+ "properties": {
+ "@id": "node/1592803972",
+ "amenity": "cafe",
+ "cuisine": "sandwich",
+ "name": "Pret a Manger"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4044962,
+ 50.9040784
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1592839313",
+ "properties": {
+ "@id": "node/1592839313",
+ "amenity": "cafe",
+ "cuisine": "coffee_shop",
+ "name": "Starbucks"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4045445,
+ 50.9038061
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1602142790",
+ "properties": {
+ "@id": "node/1602142790",
+ "amenity": "cafe",
+ "cuisine": "coffee_shop",
+ "name": "Costa"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.407648,
+ 50.9034291
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1602142802",
+ "properties": {
+ "@id": "node/1602142802",
+ "amenity": "cafe",
+ "name": "BHS cafe and coffee lounge",
+ "wheelchair": "yes"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4040039,
+ 50.9040814
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/1602154054",
+ "properties": {
+ "@id": "node/1602154054",
+ "amenity": "cafe",
+ "cuisine": "coffee_shop",
+ "name": "Costa"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4060105,
+ 50.9033377
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2024676246",
+ "properties": {
+ "@id": "node/2024676246",
+ "amenity": "cafe",
+ "name": "The Art House Cafe"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4045204,
+ 50.9087036
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2264338261",
+ "properties": {
+ "@id": "node/2264338261",
+ "amenity": "cafe",
+ "name": "The Square",
+ "source": "survey",
+ "wheelchair": "yes"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4051664,
+ 50.9082748
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2571357267",
+ "properties": {
+ "@id": "node/2571357267",
+ "amenity": "cafe",
+ "cuisine": "coffee_shop",
+ "name": "Costa"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4061433,
+ 50.9030595
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2573542350",
+ "properties": {
+ "@id": "node/2573542350",
+ "amenity": "cafe"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4076259,
+ 50.9082697
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2576450729",
+ "properties": {
+ "@id": "node/2576450729",
+ "amenity": "cafe",
+ "name": "BB's Coffee and Muffins"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4057705,
+ 50.9062213
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2576450731",
+ "properties": {
+ "@id": "node/2576450731",
+ "amenity": "cafe",
+ "name": "Costa",
+ "note": "upper level"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4049953,
+ 50.9055651
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2576450889",
+ "properties": {
+ "@id": "node/2576450889",
+ "amenity": "cafe",
+ "name": "Shakeaway",
+ "note": "upper level"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4052447,
+ 50.9054704
+ ]
+ }
+ },
+ {
+ "type": "Feature",
+ "id": "node/2579268265",
+ "properties": {
+ "@id": "node/2579268265",
+ "amenity": "cafe",
+ "name": "Sprinkles Gelato"
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [
+ -1.4042749,
+ 50.9070868
+ ]
+ }
+ }
+ ]
+} \ No newline at end of file
diff --git a/coffee.png b/coffee.png
new file mode 100644
index 0000000..f1f3d22
--- /dev/null
+++ b/coffee.png
Binary files differ
diff --git a/demo1.html b/demo1.html
new file mode 100644
index 0000000..1375217
--- /dev/null
+++ b/demo1.html
@@ -0,0 +1,32 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ 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);
+ </script>
+ </body>
+</html>
diff --git a/demo2.html b/demo2.html
new file mode 100644
index 0000000..8418241
--- /dev/null
+++ b/demo2.html
@@ -0,0 +1,40 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ var map = L.map('map', {
+ center: [50.9087036, -1.4045204], // The Art House Cafe
+ zoom: 18
+ });
+
+ var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ });
+
+ tileLayer.addTo(map);
+
+ // Add a marker over the Art House Cafe
+
+ var marker = L.marker([50.9087036, -1.4045204])
+
+ marker.addTo(map);
+ </script>
+ </body>
+</html>
diff --git a/demo3.html b/demo3.html
new file mode 100644
index 0000000..5f8ffc0
--- /dev/null
+++ b/demo3.html
@@ -0,0 +1,44 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ var map = L.map('map', {
+ center: [50.9087036, -1.4045204], // The Art House Cafe
+ zoom: 18
+ });
+
+ var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ });
+
+ tileLayer.addTo(map);
+
+ // Add a marker over the Art House Cafe
+
+ var marker = L.marker([50.9087036, -1.4045204])
+
+ marker.addTo(map);
+
+ // Add a popup to the marker
+
+ marker.bindPopup("The Art House Cafe");
+ </script>
+ </body>
+</html>
diff --git a/demo4.html b/demo4.html
new file mode 100644
index 0000000..82ce265
--- /dev/null
+++ b/demo4.html
@@ -0,0 +1,55 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ var artHouseCafe = [50.9087036, -1.4045204];
+
+ var map = L.map('map', {
+ center: artHouseCafe, // The Art House Cafe
+ zoom: 18
+ });
+
+ var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ });
+
+ tileLayer.addTo(map);
+
+ // Add a marker over the Art House Cafe
+
+ var marker = L.marker(artHouseCafe)
+
+ marker.addTo(map);
+
+ // Add a popup to the marker
+
+ marker.bindPopup("The Art House Cafe");
+
+ // Add a circle to the map
+
+ var circle = L.circle(artHouseCafe, 50, {
+ color: 'red',
+ fillColor: '#f03',
+ fillOpacity: 0
+ }).addTo(map);
+
+ </script>
+ </body>
+</html>
diff --git a/demo5.html b/demo5.html
new file mode 100644
index 0000000..1e59063
--- /dev/null
+++ b/demo5.html
@@ -0,0 +1,63 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ var artHouseCafe = [50.9087036, -1.4045204];
+
+ var map = L.map('map', {
+ center: artHouseCafe, // The Art House Cafe
+ zoom: 18
+ });
+
+ var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ });
+
+ tileLayer.addTo(map);
+
+ // 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);
+ });
+
+ // function to get a JSON file
+ function getJSON(url, callback) {
+ var xhttp = new XMLHttpRequest();
+
+ xhttp.open('GET', url, true);
+ xhttp.setRequestHeader('Accept', 'application/json');
+
+ xhttp.onreadystatechange = function() {
+ if (xhttp.status == 200 &&
+ xhttp.readyState == 4) {
+
+ callback(JSON.parse(xhttp.responseText), xhttp.responseText);
+ }
+ };
+
+ xhttp.send();
+ }
+
+ </script>
+ </body>
+</html>
diff --git a/demo6.html b/demo6.html
new file mode 100644
index 0000000..da7e434
--- /dev/null
+++ b/demo6.html
@@ -0,0 +1,89 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
+ <script src="leaflet/dist/leaflet-src.js"></script>
+
+ <style>
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ html, body, #map {
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="map">
+ </div>
+
+ <script>
+ var map = L.map('map', {
+ center: [50.90371, -1.40581], // The Art House Cafe
+ zoom: 18
+ });
+
+ var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ });
+
+ tileLayer.addTo(map);
+
+ // 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);
+ });
+
+
+ // function to get a JSON file
+ function getJSON(url, callback) {
+ var xhttp = new XMLHttpRequest();
+
+ xhttp.open('GET', url, true);
+ xhttp.setRequestHeader('Accept', 'application/json');
+
+ xhttp.onreadystatechange = function() {
+ if (xhttp.status == 200 &&
+ xhttp.readyState == 4) {
+
+ callback(JSON.parse(xhttp.responseText), xhttp.responseText);
+ }
+ };
+
+ xhttp.send();
+ }
+
+ </script>
+ </body>
+</html>
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>
diff --git a/leaflet b/leaflet
new file mode 160000
+Subproject 8a5fdfc6e3db2807b8f0dd617474e4ab2949142
diff --git a/reveal.js b/reveal.js
new file mode 160000
+Subproject ce8ea8439305913a9be6322fcd445814c521e72
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-21 13:55:12 +0000