Merge pull request #181 from ZeLonewolf/customize-server

Make tile server, source, and attribution configurable

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
         run: |
           cd style
           npm install --include=dev
-          sed 's/<your MapTiler key>/53iZvB2drcamS0Ge0xiD/g' config.default.js > config.js
+          sed 's/<your MapTiler key>/53iZvB2drcamS0Ge0xiD/g' configs/config.maptiler.js > config.js
           npm run build
         # MapTiler key 53iZvB2drcamS0Ge0xiD only allows requests from zelonewolf.github.io
 

.github/workflows/test-build.yml

@@ -18,6 +18,6 @@ jobs:
         run: |
           cd style
           npm install --include=dev
-          sed 's/<your MapTiler key>/53iZvB2drcamS0Ge0xiD/g' config.default.js > config.js
+          sed 's/<your MapTiler key>/53iZvB2drcamS0Ge0xiD/g' configs/config.maptiler.js > config.js
           npm run build
         # MapTiler key 53iZvB2drcamS0Ge0xiD only allows requests from zelonewolf.github.io

style/CONTRIBUTE.md

@@ -102,9 +102,10 @@ and re-running `npm install`.
 
 ## Config File
 
-Environment specific settings go in the untracked file `config.js`. Copy the template
-`config.default.js` and rename it `config.js`. The variables in this file can then
-be changed without the risk of accidentally comitting to the main repo.
+Environment specific settings go in the untracked file `config.js`. Copy from one of
+the templates in the style/configs/ folder `config.*.js` and rename it `config.js` in
+the style/ folder. The variables in this file can then be changed without the risk of
+accidentally comitting to the main repo.
 
 You can create a new copy of the config file by running `npm run config`
 

style/americana.js

@@ -271,13 +271,13 @@ var style = {
   name: "Americana",
   glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
   layers: americanaLayers,
-  sprite: new URL("sprites/sprite", baseUrl).href,
   sources: {
     openmaptiles: {
       url: config.OPENMAPTILES_URL,
       type: "vector",
     },
   },
+  sprite: new URL("sprites/sprite", baseUrl).href,
   light: {
     anchor: "viewport",
     color: "white",
@@ -304,12 +304,23 @@ map.on("styleimagemissing", function (e) {
   Shield.missingIconHandler(map, e);
 });
 
-map.addControl(
-  new maplibregl.AttributionControl({
-    customAttribution:
-      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',
-  })
-);
+let attributionConfig = {
+  customAttribution: "",
+};
+
+if (config.ATTRIBUTION_TEXT != undefined) {
+  attributionConfig = {
+    customAttribution: config.ATTRIBUTION_TEXT,
+  };
+}
+
+map.addControl(new maplibregl.AttributionControl(attributionConfig));
+
+if (config.ATTRIBUTION_LOGO != undefined) {
+  document.getElementById("attribution-logo").innerHTML =
+    config.ATTRIBUTION_LOGO;
+}
+
 map.addControl(new maplibregl.NavigationControl(), "top-left");
 
 // Add our sample data.

style/configs/config.aws.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/*
+Planetiler tile server, hosted at AWS
+*/
+const OPENMAPTILES_URL =
+  "https://6ug7hetxl9.execute-api.us-east-2.amazonaws.com/data/v3.json";
+
+export default {
+  OPENMAPTILES_URL,
+};

style/configs/config.maptiler.js

@@ -0,0 +1,26 @@
+"use strict";
+
+/*
+This style requires a vector tile server to run.
+This configuration is for running with MapTiler Cloud.
+
+Visit MapTiler Cloud and create an account/log in:
+https://cloud.maptiler.com/maps/
+
+Go to Account->Keys and create a key to paste here:
+*/
+const MAPTILER_KEY = "<your MapTiler key>";
+
+const OPENMAPTILES_URL = `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${MAPTILER_KEY}`;
+const ATTRIBUTION_LOGO = `
+<a id="attribution-logo" href="https://www.maptiler.com/">
+  <img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"/>
+</a>`;
+const ATTRIBUTION_TEXT =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>';
+
+export default {
+  OPENMAPTILES_URL,
+  ATTRIBUTION_LOGO,
+  ATTRIBUTION_TEXT,
+};

style/index.html

@@ -19,7 +19,7 @@
         bottom: 0;
         width: 100%;
       }
-      #map-tiler-logo {
+      #attribution-logo {
         position: absolute;
         bottom: 10px;
         z-index: 100;
@@ -33,11 +33,7 @@
 
   <body>
     <div id="map"></div>
-    <a id="map-tiler-logo" href="https://www.maptiler.com/"
-      ><img
-        src="https://api.maptiler.com/resources/logo.svg"
-        alt="MapTiler logo"
-    /></a>
+    <div id="attribution-logo"></div>
     <a href="https://github.com/ZeLonewolf/openstreetmap-americana/"
       ><img
         loading="lazy"

style/package.json

@@ -8,7 +8,7 @@
     "url": "git+https://github.com/zelonewolf/openstreetmap-americana.git"
   },
   "scripts": {
-    "config": "cp config.default.js config.js",
+    "config": "cp configs/config.maptiler.js config.js",
     "code_format": "npx prettier --write .",
     "clean": "rm -rf dist .parcel-cache",
     "presprites": "rm -rf dist/sprites",