From 00a02018a5e3100c1db302ae5853e41b5c50a723 Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Thu, 5 Feb 2015 11:22:13 +0000 Subject: Initial commit --- index.html | 399 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 399 insertions(+) create mode 100644 index.html (limited to 'index.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 @@ + + + + + + Learning to Leaflet + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Learning to

+

Leaflet

+

+ By Christopher Baines +

+
+ +
+

Be prepared to...

+
    +
  • Make a basic map
    • +
  • Add some things
    • +
  • Use some GeoJSON
    • +
+
+ +
+

What is Leaflet

+
+ “An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps” +
+ LeafletJS.com +

+ Contribute on GitHub +

+
+ +
+

Key Features

+
    +
  • Free Software
    • +
  • Extremely lightweight — around 34 KB of gzipped JS code
    • +
  • No external dependencies
    • +
  • Multi-touch support
    • +
  • GeoJSON Layers
    • +
  • Markers (custom markers support)
    • +
  • Popups
    • +
  • Use any map Provider
    • +
  • Browser Support works in IE7
    • +
+ Full list of features +

+
+ +
+

Your First Map

+ +
+ +
+ +
+ 

+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: '© OpenStreetMap contributors'
+}).addTo(map);
+
+
+
+ +
+

What a Marker!

+ + + + + Marker Documentation + + +
+ +
+

What a Marker!

+ +
+ +
+ +
+ 

+// Add a marker over the Art House Cafe
+
+var marker = L.marker([50.9087036, -1.4045204])
+
+marker.addTo(map);
+
+
+ +
+

A Supprising Popup

+ + + + + Popup Documentation + + +
+ +
+

A Supprising Popup

+ +
+ +
+ +
+ 

+// Add a popup to the marker
+
+marker.bindPopup("The Art House Cafe");
+
+
+
+ +
+

A Round Circle

+ + + + + Circle Documentation + + +
+ +
+

A Round Circle

+ +
+ +
+ +
+ 

+// Add a circle to the map
+
+var circle = L.circle(artHouseCafe, 50, {
+      color: 'red',
+      fillColor: '#f03',
+      fillOpacity: 0
+}).addTo(map);
+
+
+
+ +
+

Cafe's with GeoJSON

+ + + + + GeoJSON Documentation + + +
+ +
+

Cafe's with GeoJSON

+ +
+ +
+ +
+ 

+// 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
+
+
+
+ +
+

GeoJSON with Custom Icons

+ + + +
+ + Icon Documentation + + +
+ +
+

GeoJSON with Custom Icons

+ +
+ +
+ +
+ 

+// 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);
+});
+
+
+
+ +
+

Plugins

+

+ A short selection +

+ + +
+ +
+

One Alternative worth Considering

+

OpenLayers 3 is a +

+ “A high-performance, feature-packed library for all your + mapping needs” +
+

+ +

In comparison to Leaflet, this library is more powerful, at the + expense of being larger and more complicated. +

+ + + OpenLayers 3 Examples + +
+ +
+

Useful Links

+ +
+
+
+ + + + + + + + -- cgit v1.2.3