Merge branch 'Laetus-feat-support-mapbox'20200324

3 files changed, 32 insertions, 1 deletions

diff --git a/SETUP.md b/SETUP.md
index 326a0b2..ba79bde 100644
--- a/SETUP.md
+++ b/SETUP.md
@@ -161,6 +161,18 @@ e.g.
   region = "FR"
 ```
 
+You can also use Mapbox. To do this you'll need an [API Key from Mapbox](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/) and set it in `config.toml`. You can also define your custom map style using [Mapbox Studio](https://www.mapbox.com/mapbox-studio/).
+
+```
+[params.map]
+  service = "mapbox" 
+  latitude = "48.137232"
+  longitude = "11.575503"
+  zoom = "13"
+  api_key = "XXXXXXXX"
+  style_url = "mapbox://LINK_TO_MAPBOXP_STYLE"
+```
+
 ### 7. Contact Form
 You can have a contact form using either a [netlify form](https://www.netlify.com/docs/form-handling/) (if you're deploying with netlify) or [formspree](https://formspree.io)
 ```
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 5868f09..1032ebe 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -113,7 +113,7 @@ unsafe = true
     feed = "https://www.thegospelcoalition.org/podcasts/word-of-the-week/feed/?feed=podcast"
 
   [params.map]
-    service = "osm" #"osm" for OpenStreetMaps or "google"
+    service = "osm" #"osm" for OpenStreetMaps, "google" for Google Maps, or "mapbox" for Mapbox, see SETUP.md
     # For Open Street Map widgets
     latitude = "48.8530"
     longitude = "2.3498"
diff --git a/layouts/partials/map.html b/layouts/partials/map.html
index 3914cd1..1cb8a5f 100644
--- a/layouts/partials/map.html
+++ b/layouts/partials/map.html
@@ -37,5 +37,24 @@
       </script>
       <script src="https://maps.googleapis.com/maps/api/js?key={{- .api_key -}}{{- safeURL $opt -}}&callback=initMap"
       async defer></script>
+  {{ else if eq .service "mapbox" }}
+    {{ printf "<meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" />" | safeHTML }}
+    {{ printf "<script src=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js\"></script>" | safeHTML }}
+    {{ printf "<link href=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css\" rel=\"stylesheet\" />" | safeHTML }}
+    <style>
+      body { margin: 0; padding: 0; }
+      #map { top: 0; bottom: 0; padding: 0; width: 100%; }
+    </style>
+    <script>
+      var loc = [{{- float .longitude -}}, {{- float .latitude -}}];
+      mapboxgl.accessToken = "{{- .api_key -}}";
+      var map = new mapboxgl.Map({
+        container: 'map', // container id
+        style: "{{- safeHTML .style_url  -}}", // stylesheet location
+        center: loc, // starting position [lng, lat]
+        zoom: {{- int .zoom -}} // starting zoom
+      });
+      map.addControl(new mapboxgl.NavigationControl());
+    </script>
   {{ end }}
 {{ end }}