move api secrets to django settings

static/gps_logger/js/main.js

@@ -69,108 +69,109 @@ let gps = new GPS();
 let plot, overview;
 
 window.onload = function() {
-	Cesium.Ion.defaultAccessToken = '<token>';
-  
-  var extent = {west: -0.2540382220862719, south: 0.6872565916005104, east: 0.6129855406042352, north: 0.9377043806513488};
-
-  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
-  Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
-  
-  bingMapsProvider = new Cesium.BingMapsImageryProvider({
-    url: 'https://dev.virtualearth.net',
-    key: '<key>',
-    mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
-  });
-
-  viewer = new Cesium.Viewer('map', {
-    fullscreenElement: "map",
-    terrainProvider : Cesium.createWorldTerrain({
-      requestVertexNormals: true,
-      requestWaterMask: true
-    }),
-    //shadows: true
-  });
-  viewer.scene.globe.enableLighting = true;
-  viewer.resolutionScale = 1.2;
-  viewer.scene.screenSpaceCameraController.enableTilt = !('ontouchstart' in window);
-  viewer.baseLayerPicker.viewModel.selectedImagery = new Cesium.ProviderViewModel({
-    name: 'Bing Maps Aerial with Labels',
-    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerialLabels.png'),
-    tooltip: 'Bing Maps aerial imagery with labels',
-    creationFunction: function () {
-      return bingMapsProvider
-    }
-  });
-  var paths = [];
+  fetch("secrets")
+    .then(response => response.json())
+    .then(secrets => {
+      Cesium.Ion.defaultAccessToken = secrets.cesium_token
+      
+      var extent = {west: -0.2540382220862719, south: 0.6872565916005104, east: 0.6129855406042352, north: 0.9377043806513488};
 
-  
-  fetch("trips")
-  .then(function(response) {
-    return response.json();
-  })
-  .then(function(jsonResponse) {
-    gps.parse(jsonResponse);
-    for(const t of gps.trips) {
-      var desc = "Start: <b>" + timeFormat(t.startTime, "datetime") + 
-            "</b><br/>Finish: <b>" + timeFormat(t.endTime, "datetime") + "</b><br/>" +
-            "Track time (full): "+ timeFormat(t.totalTime) + "<br>" +
-            "Track time (mov.): "+ timeFormat(t.movementTime) + "<br>" +
-            "Alt: &uarr;" + t.ascendHeight.toFixed(1) + "m  &darr;" + t.descendHeight.toFixed(1) + "m"+
-            "<br/>Distance: "+(t.distance/1000).toFixed(1)+"km<br/>" +
-            "top speed: "+t.topSpeed.toFixed(1)+
-            "km/h<br/>"+
-            "average speed: "+t.avgSpeed.toFixed(1)+"km/h<br/>";
+      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
+      Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
+      
+      bingMapsProvider = new Cesium.BingMapsImageryProvider({
+        url: 'https://dev.virtualearth.net',
+        key: secrets.bing_maps_key,
+        mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
+      });
 
-      const col = Cesium.Color.fromCssColorString(t.color)
-      var path = viewer.entities.add({
-        label : "Track "+t.id,
-        id: "track_"+t.id,
-        description: desc,
-        polyline : {
-          positions : t.path.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt)),
-          width : 5,
-          material : new Cesium.PolylineOutlineMaterialProperty({
-            color : col,
-          }),
-          //clampToGround: true,
-          depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
-            color : Cesium.Color.fromAlpha(col, 0.6),
-          }),
-          shadows: Cesium.ShadowMode.ENABLED
+      viewer = new Cesium.Viewer('map', {
+        fullscreenElement: "map",
+        terrainProvider : Cesium.createWorldTerrain({
+          requestVertexNormals: true,
+          requestWaterMask: true
+        }),
+        //shadows: true
+      });
+      viewer.scene.globe.enableLighting = true;
+      viewer.resolutionScale = 1.2;
+      viewer.scene.screenSpaceCameraController.enableTilt = !('ontouchstart' in window);
+      viewer.baseLayerPicker.viewModel.selectedImagery = new Cesium.ProviderViewModel({
+        name: 'Bing Maps Aerial with Labels',
+        iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/bingAerialLabels.png'),
+        tooltip: 'Bing Maps aerial imagery with labels',
+        creationFunction: function () {
+          return bingMapsProvider
         }
       });
-      paths.push(path);
-    }
-    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-    handler.setInputAction(function (movement) {
-      var pick = viewer.scene.pick(movement.position);
-      if (Cesium.defined(pick) && (pick.id._id.match(/track_([0-9]+)/))) {
-        var id = parseInt(RegExp.$1);
-        var path = paths[id];
-        show(id);
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+      var paths = [];
 
-    viewer.flyTo(paths[paths.length - 1], { offset: new Cesium.HeadingPitchRange(0, -90, 0)});
-    let regionIndex = 0;
-    for(let r=0; r<gps.regions.length; r++) {
-      addInfo(bingMapsProvider, viewer, regionIndex, gps.regions[r]);
-      regionIndex++;
-    }
-    const i = gps.getInfo();
-    var html =
-      "Time (full): "+ timeFormat(i.totalTime) + "<br>" +
-      "Time (mov.): "+ timeFormat(i.movementTime) + "<br>" +
-      "Alt: &uarr;" + (i.ascendHeight).toFixed(1) + "m  &darr;" + (i.descendHeight).toFixed(1) + "m<br>"+
-      "Distance: <b>"+(i.distance/1000).toFixed(1)+"km</b><br/>" +
-      "Top speed: <b>"+i.topSpeed.toFixed(1) + "km/h</b><br/>"+
-      "Avg. speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>"+
-      "Data points: "+i.points+"<br/>"+
-      "<a href='javascript:show(" + (gps.trips.length-1) + ")'>Graph</a>";
-    
-    $(".status").append(html);
+      fetch("trips")
+        .then(response => response.json())
+        .then(jsonResponse => {
+          gps.parse(jsonResponse);
+          for(const t of gps.trips) {
+            var desc = "Start: <b>" + timeFormat(t.startTime, "datetime") + 
+                  "</b><br/>Finish: <b>" + timeFormat(t.endTime, "datetime") + "</b><br/>" +
+                  "Track time (full): "+ timeFormat(t.totalTime) + "<br>" +
+                  "Track time (mov.): "+ timeFormat(t.movementTime) + "<br>" +
+                  "Alt: &uarr;" + t.ascendHeight.toFixed(1) + "m  &darr;" + t.descendHeight.toFixed(1) + "m"+
+                  "<br/>Distance: "+(t.distance/1000).toFixed(1)+"km<br/>" +
+                  "top speed: "+t.topSpeed.toFixed(1)+
+                  "km/h<br/>"+
+                  "average speed: "+t.avgSpeed.toFixed(1)+"km/h<br/>";
 
-  });
+            const col = Cesium.Color.fromCssColorString(t.color)
+            var path = viewer.entities.add({
+              label : "Track "+t.id,
+              id: "track_"+t.id,
+              description: desc,
+              polyline : {
+                positions : t.path.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt)),
+                width : 5,
+                material : new Cesium.PolylineOutlineMaterialProperty({
+                  color : col,
+                }),
+                //clampToGround: true,
+                depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
+                  color : Cesium.Color.fromAlpha(col, 0.6),
+                }),
+                shadows: Cesium.ShadowMode.ENABLED
+              }
+            });
+            paths.push(path);
+          }
+          var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+          handler.setInputAction(function (movement) {
+            var pick = viewer.scene.pick(movement.position);
+            if (Cesium.defined(pick) && (pick.id._id.match(/track_([0-9]+)/))) {
+              var id = parseInt(RegExp.$1);
+              var path = paths[id];
+              show(id);
+            }
+          }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+          viewer.flyTo(paths[paths.length - 1], { offset: new Cesium.HeadingPitchRange(0, -90, 0)});
+          let regionIndex = 0;
+          for(let r=0; r<gps.regions.length; r++) {
+            addInfo(bingMapsProvider, viewer, regionIndex, gps.regions[r]);
+            regionIndex++;
+          }
+          const i = gps.getInfo();
+          var html =
+            "Time (full): "+ timeFormat(i.totalTime) + "<br>" +
+            "Time (mov.): "+ timeFormat(i.movementTime) + "<br>" +
+            "Alt: &uarr;" + (i.ascendHeight).toFixed(1) + "m  &darr;" + (i.descendHeight).toFixed(1) + "m<br>"+
+            "Distance: <b>"+(i.distance/1000).toFixed(1)+"km</b><br/>" +
+            "Top speed: <b>"+i.topSpeed.toFixed(1) + "km/h</b><br/>"+
+            "Avg. speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>"+
+            "Data points: "+i.points+"<br/>"+
+            "<a href='javascript:show(" + (gps.trips.length-1) + ")'>Graph</a>";
+          
+          $(".status").append(html);
+
+        });
+    });
 
   plot = $.plot("#placeholder", d, options);
   overview = $.plot("#overview", d, optO);

urls.py

@@ -4,6 +4,7 @@ from . import views
 
 urlpatterns = [
   path('', views.index, name='index'),
+  path('secrets', views.secrets, name='secrets'),
   path('upload', views.upload, name='upload'),
   path('markers/create', views.MarkerCreateView.as_view(), name='marker-create'),
   path('markers/censor', views.DeleteCensoredView.as_view(), name='marker-censor'),

views.py

@@ -5,6 +5,7 @@ from datetime import datetime
 
 from django.shortcuts import render
 from django.http import JsonResponse, HttpResponse
+from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
 from django.views import View
 from django.core.cache import cache
@@ -19,6 +20,13 @@ from .workers.points2trips import TripConverter
 def index(request):
   return render(request, 'gps_logger/index.html')
 
+def secrets(request):
+  secrets = {
+    'cesium_token': settings.CESIUM_TOKEN,
+    'bing_maps_key': settings.BING_MAPS_KEY
+  }
+  return JsonResponse(secrets)
+
 @permission_required("gps-logger.markers.change")
 def upload(request):
   return render(request, 'gps_logger/upload.html')