remove gmaps implementation, relink interface to leaflet, update map …

…credentials, update docs

assets/components/maps/00-overview.md

@@ -1,16 +1,11 @@
 <div class="jumpnav"></div>
-<h2 id="simplegmap">Simple Google maps</h2>
+<h2 id="simplegmap">Simple maps component</h2>
 
-Adding a map to a page is a great way to describe a location in addition to a text-based description. This component uses the Google Maps API to embed a functional google map into one of your pages easily.
+Adding a map to a page is a great way to describe a location in addition to a text-based description. This component uses the open source Leaflet.js to embed a functional map, using community-curated Open Street Maps data, into one of your pages.
 
 To use the Maps component, you will need to know the latitude and longitude of the location you are looking to map. These can be found easily using [Google Maps](http://maps.google.com) (the latitude and longitude can be found in the url) or a service like [itouchmap.com](http://itouchmap.com/latlong.html).
 
-This implementation is for basic mapping only, anything complex or requiring some level of interaction should work directly on the [Google Maps API](https://developers.google.com/maps/) in a custom JS script.
 
-## New! Open Street Maps
+## Note
 
-We also provide <a href="#openstreetmap">an alternative</a> for use with the community-curated Open Street Maps data, using the open source Leaflet.js.
-
-## New! Geocoding
-
-There is now <a href="#geocode">a method</a> for generating a map directly from an address searched against Google Maps, rather than lat lng coordinates.
+This component previously used Google Maps, but due to licensing costs has been migrated to Leaflet.js + OSM + Mapbox instead.

assets/components/maps/06-all-options.slim

@@ -1,2 +1,2 @@
 section
-  .map-canvas data-grayscale="" data-width="600" data-height="400" data-zoom="17" data-pin="-37.798535, 144.960605" data-address="780 Elizabeth St, Parkville"
+  .map-canvas data-width="600" data-height="400" data-zoom="17" data-pin="-37.798535, 144.960605" data-latlng="-37.798535, 144.960605"

assets/components/maps/_maps.css

@@ -7,4 +7,12 @@
       max-width: none;
     }
   }
+
+  .leaflet-control-attribution a {
+    color: inherit;
+
+    &.em {
+      color: #0078A8;
+    }
+  }
 }

assets/components/maps/lmaps.js

@@ -7,19 +7,34 @@ function LMaps(el, props) {
   this.el = el;
   this.props = props || {};
 
-  this.props.latlng = this.el.getAttribute('data-leaflet-latlng').split(',');
+  if (this.el.getAttribute('data-leaflet-latlng')) {
+    this.props.latlng = this.el.getAttribute('data-leaflet-latlng').split(',');
+  } else if (this.el.getAttribute('data-latlng')) {
+    this.props.latlng = this.el.getAttribute('data-latlng').split(',');
+  }
   this.props.zoom = parseInt(this.el.getAttribute('data-zoom')) || 15;
   this.props.pins = this.el.getAttribute('data-pin');
 
+  this.props.width = parseInt(this.el.getAttribute('data-width')) || 440;
+  this.props.height = parseInt(this.el.getAttribute('data-height')) || 330;
+
   this.map = L.map(this.el);
   this.map.setView(this.props.latlng, this.props.zoom);
 
-  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
-    attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-    maxZoom: 18,
-    id: 'unimelb.cifxgw7yf40guudlyrvtisese',
-    accessToken: 'pk.eyJ1IjoidW5pbWVsYiIsImEiOiJjaWZ4Z3c5ZXo0M2R3dTdseGx0NXFyMmdiIn0.RIIkc7B1AboZclV3-JM5bA'
-  }).addTo(this.map);
+  this.el.style.width = this.props.width + 'px';
+  this.el.style.height = this.props.height + 'px';
+  this.redraw();
+
+	const credentials = {
+    style: 'maps-unimelb/cj1rdzyxl000d2rlbhzhdt62x',
+    token: 'pk.eyJ1IjoibWFwcy11bmltZWxiIiwiYSI6ImNqa2J3aDlwaDAzMmIzcnFtYm8xcnQwN2gifQ.CcmJEN3wgYOs0qclbPrw_w'
+  };
+
+	L.tileLayer('https://api.mapbox.com/styles/v1/'+ credentials.style +'/tiles/256/{z}/{x}/{y}?access_token=' + credentials.token, {
+		maxZoom: 18,
+		attribution: `Map data &copy; <a class="em" target="_blank" href="https://www.openstreetmap.org/#map=${this.props.zoom + 1}/${this.props.latlng[0]}/${this.props.latlng[1]}">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>`,
+		id: 'mapbox.streets'
+	}).addTo(this.map);
 
   if (this.props.pins) {
     var pins = this.props.pins.split('|');
@@ -29,8 +44,27 @@ function LMaps(el, props) {
   }
 }
 
+LMaps.prototype.redraw = function() {
+  var e;
+  if (document.createEvent) {
+    e = document.createEvent("HTMLEvents");
+    e.initEvent("resize", true, true);
+  } else {
+    e = document.createEventObject();
+    e.eventType = "resize";
+  }
+
+  e.eventName = "resize";
+
+  if (document.createEvent) {
+    window.dispatchEvent(e);
+  } else {
+    window.fireEvent("on" + e.eventType, e);
+  }
+};
+
 LMaps.label = 'LMaps';
-LMaps.selector = '[data-leaflet-latlng]';
+LMaps.selector = '[data-leaflet-latlng], [data-latlng]';
 LMaps.dependencies = {
   stylesheets: ['https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css'],
   scripts: ['https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js'],

assets/targets/uom/index.es6

@@ -17,7 +17,6 @@ import CheckboxHelper from 'components/checklist/checkboxhelper';
 import FilteredListing from 'components/filtered-listings';
 import FancySelect from 'components/forms/fancyselect';
 import Flash from 'components/notices/flash';
-import GMaps from 'components/maps/gmaps';
 import LMaps from 'components/maps/lmaps';
 import IconHelper from 'components/icons';
 import ImageGallery from 'components/gallery';
@@ -67,7 +66,6 @@ window.uom.registerComponents([
   FilteredListing,
   FancySelect,
   Flash,
-  GMaps,
   IconHelper,
   ImageGallery,
   InPageNavigation,