Add basic support for Docker, both for development and deploy

.devcontainer/Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.12.0-alpine3.17
+ENV PYTHONUNBUFFERED 1
+
+# In Visual Studio Code:
+#   edit ./res/config.json and set your API keys
+#   open a terminal and run:
+#       python3 -m http.server

.devcontainer/devcontainer.json

@@ -0,0 +1,55 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.183.0/containers/dotnet
+{
+	"name": "Python 3.9",
+	"build": {
+		"dockerfile": "Dockerfile",
+		"context": "..",
+		"args": {			
+		}
+	},
+	"customizations": {
+		"vscode": {
+			// Set *default* container specific settings.json values on container create.
+			"settings": {},
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"ms-azuretools.vscode-docker"
+			]
+		}
+	},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [5000, 5001],
+	// [Optional] To reuse of your local HTTPS dev cert:
+	//
+	// 1. Export it locally using this command:
+	//    * Windows PowerShell:
+	//        dotnet dev-certs https --trust; dotnet dev-certs https -ep "$env:USERPROFILE/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
+	//    * macOS/Linux terminal:
+	//        dotnet dev-certs https --trust; dotnet dev-certs https -ep "${HOME}/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
+	// 
+	// 2. Uncomment these 'remoteEnv' lines:
+	//    "remoteEnv": {
+	// 	      "ASPNETCORE_Kestrel__Certificates__Default__Password": "SecurePwdGoesHere",
+	//        "ASPNETCORE_Kestrel__Certificates__Default__Path": "/home/vscode/.aspnet/https/aspnetapp.pfx",
+	//    },
+	//
+	// 3. Do one of the following depending on your scenario:
+	//    * When using GitHub Codespaces and/or Remote - Containers:
+	//      1. Start the container
+	//      2. Drag ~/.aspnet/https/aspnetapp.pfx into the root of the file explorer
+	//      3. Open a terminal in VS Code and run "mkdir -p /home/vscode/.aspnet/https && mv aspnetapp.pfx /home/vscode/.aspnet/https"
+	//
+	//    * If only using Remote - Containers with a local container, uncomment this line instead:
+	//      "mounts": [ "source=${env:HOME}${env:USERPROFILE}/.aspnet/https,target=/home/vscode/.aspnet/https,type=bind" ],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "dotnet restore",
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	//"remoteUser": "vscode"
+	"remoteUser": "root"
+	// See: https://code.visualstudio.com/docs/remote/containers-advanced
+	//"mounts": [
+	//	"source=${localWorkspaceFolder}/../Documentation,target=/Documentation,type=bind"
+	//],
+}

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.12.0-alpine3.17
+ENV PYTHONUNBUFFERED 1
+
+RUN apk update \
+    && apk add jq
+
+WORKDIR /gpxstudio
+COPY . .
+
+RUN chmod +x run.sh 
+
+CMD ["./run.sh"]
+
+# Build:
+#    docker build -t gpxstudio .
+#
+# Run:
+#    docker run -it --rm -p 8000:8000 -e mapboxApiKey=123 -e openAipKey=xyz -e routing_url=https://routing.gpx.studio gpxstudio
+#    open your browser at http://localhost:8000

js/buttons.js

@@ -26,6 +26,7 @@ export default class Buttons {
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
         this.embedding = urlParams.has('embed');
+
         if (this.embedding) {
             if (urlParams.has('imperial')) this.km = false;
             if (urlParams.has('running')) this.speed_units = false;
@@ -406,6 +407,8 @@ export default class Buttons {
                 } else if (window.location.hostname != "localhost") _this.mapbox_token = keys.mapbox;
                 else _this.mapbox_token = keys.mapbox_dev;
 
+                _this.openaip_token = keys.openaip;
+
                 // TILES
 
                 if (_this.embedding) {
@@ -538,9 +541,11 @@ export default class Buttons {
                     baselayersHierarchy[_this.basemaps_text][_this.countries_text][_this.united_kingdom_text] = { "Ordnance Survey": layers.ordnanceSurvey };
                     baselayersHierarchy[_this.basemaps_text][_this.countries_text][_this.united_states_text] = { "USGS": layers.usgs };
 
+                    layers.openAip.setUrl("https://{s}.api.tiles.openaip.net/api/data/openaip/{z}/{x}/{y}.png?apiKey=" + _this.openaip_token)
                     var overlaysHierarchy = {};
                     overlaysHierarchy[_this.overlays_text] = {};
                     overlaysHierarchy[_this.overlays_text][_this.world_text] = {
+                        "Open AIP": layers.openAip,
                         "CyclOSM Lite" : layers.cyclOSMLite,
                         "Strava Heatmap": {
                             "Ride" : layers.stravaHeatmapRide,
@@ -581,6 +586,7 @@ export default class Buttons {
                     var overlaySelection = {};
                     overlaySelection[_this.overlays_text] = {};
                     overlaySelection[_this.overlays_text][_this.world_text] = {
+                        "Open AIP": true,
                         "Strava Heatmap": {
                             "Ride" : true,
                             "Run" : true,

js/layers.js

@@ -174,6 +174,11 @@ const layers = {
         maxNativeZoom: 14,
         maxZoom: MAX_ZOOM,
         attribution: '&copy; <a href="https://www.strava.com" target="_blank">Strava</a>'
+    }),
+    openAip: L.tileLayer('', { // Url is set in buttons.js
+        maxNativeZoom: 14,
+        maxZoom: MAX_ZOOM,
+        attribution: '&copy; <a href="http://openaip.net/" target="_blank">OpenAIP</a>'
     })
 };
 

run.sh

@@ -0,0 +1,23 @@
+#!/bin/sh
+
+if [ -z "$mapboxApiKey" ] 
+then
+	echo "Please set \$mapboxApiKey"
+    exit 1
+fi
+
+if [ -z "$openAipKey" ] 
+then
+	echo "Please set \$openAipKey"
+    exit 1
+fi
+
+if [ -z "$routing_url" ] 
+then
+	echo "Please set \$routing_url"
+    exit 1
+fi
+
+echo "mapboxApiKey is: $mapboxApiKey"
+jq '.mapbox = "'$mapboxApiKey'" | .mapbox_dev = "'$mapboxApiKey'" | .openaip = "'$openAipKey'" | .routing_url = "'$routing_url'"' ./res/config.json > ./res/config_new.json && mv ./res/config_new.json ./res/config.json
+python3 -m http.server