Fix OpenMapTiles styles.

mpetroff · Nov 19, 2018 · 790cf84 · 790cf84
1 parent 2d5d37f
commit 790cf84
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -58,14 +58,13 @@ <h1>Print Maps</h1>
           <option value="mapbox://styles/mapbox/emerald-v8">Mapbox Emerald</option>
           <option value="mapbox://styles/mapbox/light-v9">Mapbox Light</option>
           <option value="mapbox://styles/mapbox/streets-v10">Mapbox Streets</option>
-          <option value="https://openmaptiles.github.io/positron-gl-style/style-cdn.json">Klokantech Positron</option>
-          <option value="https://openmaptiles.github.io/dark-matter-gl-style/style-cdn.json">Klokantech Dark Matter</option>
-          <option value="https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json">Klokantech OSM Bright</option>
-          <option value="https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json">Klokantech Basic</option>
-          <option value="https://openmaptiles.github.io/klokantech-terrain-gl-style/style-cdn.json">Klokantech Terrain</option>
-          <option value="https://openmaptiles.github.io/fiord-color-gl-style/style-cdn.json">Klokantech Fiord Color</option>
-          <option value="https://openmaptiles.github.io/toner-gl-style/style-cdn.json">Klokantech Toner</option>
-          <option value="https://openmaptiles.github.io/osm-liberty-gl-style/style.json">OSM Liberty</option>
+          <option value="https://maps.tilehosting.com/styles/positron/style.json">Klokantech Positron</option>
+          <option value="https://maps.tilehosting.com/styles/darkmatter/style.json">Klokantech Dark Matter</option>
+          <option value="https://maps.tilehosting.com/styles/bright/style.json">Klokantech Bright</option>
+          <option value="https://maps.tilehosting.com/styles/basic/style.json">Klokantech Basic</option>
+          <option value="https://maps.tilehosting.com/styles/topo/style.json">Klokantech Topo</option>
+          <option value="https://maps.tilehosting.com/styles/streets/style.json">Klokantech Streets</option>
+          <option value="https://maps.tilehosting.com/styles/voyager/style.json">Klokantech Voyager</option>
         </select>
       </div>
     </div>

diff --git a/js/script.js b/js/script.js
@@ -22,6 +22,7 @@
  */
 
 mapboxgl.accessToken = '';
+var mapTilerAccessToken = '';
 
 var form = document.getElementById('config');
 
@@ -33,6 +34,14 @@ if (!mapboxgl.accessToken || mapboxgl.accessToken.length < 10) {
         }
     }
 }
+if (!mapTilerAccessToken || mapTilerAccessToken.length < 10) {
+    // Don't use MapTiler styles without access token
+    for (var i = form.styleSelect.length - 1; i >= 0; i--) {
+        if (form.styleSelect[i].value.indexOf('tilehosting') >= 0) {
+            form.styleSelect.remove(i);
+        }
+    }
+}
 
 // Show attribution requirement of initial style
 if (form.styleSelect.value.indexOf('mapbox') >= 0)
@@ -59,12 +68,15 @@ function updateLocationInputs() {
 
 var map;
 try {
+    var style = form.styleSelect.value;
+    if (style.indexOf('tilehosting') >= 0)
+        style += '?key=' + mapTilerAccessToken;
     map = new mapboxgl.Map({
         container: 'map',
         center: [0, 0],
         zoom: 0.5,
         pitch: 0,
-        style: form.styleSelect.value
+        style: style
     });
     map.addControl(new mapboxgl.NavigationControl({
         position: 'top-left'
@@ -236,7 +248,10 @@ form.dpiInput.addEventListener('change', function(e) {
 form.styleSelect.addEventListener('change', function() {
     'use strict';
     try {
-        map.setStyle(form.styleSelect.value);
+        var style = form.styleSelect.value;
+        if (style.indexOf('tilehosting') >= 0)
+            style += '?key=' + mapTilerAccessToken;
+        map.setStyle(style);
     } catch (e) {
         openErrorModal("Error changing style: " + e.message);
     }