Add frontend with bootstrap, leaflet, heatmap.js, jquery

.gitignore

+static/assets
+package-lock.json
+yarn.lock
+node_modules
+.venv
+__pycache__

package.json

+{
+  "name": "webgps",
+  "version": "1.0.0",
+  "description": "Create WiFi Heatmaps using GPS from an external device",
+  "license": "unlicensed",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.1.3",
+    "heatmap.js": "^2.0.5",
+    "jquery": "^3.3.1",
+    "leaflet": "^1.3.3",
+    "leaflet.fullscreen": "^1.4.5",
+    "popper.js": "^1.14.4"
+  }
+}

position.py

 import datetime
-from flask import Flask, request, send_from_directory, render_template
-app = Flask(__name__)
+
+from flask import Flask, jsonify, render_template, request, send_from_directory
+
+app = Flask(__name__, static_url_path='/static')
+
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+
+@app.route('/static/assets/<path:path>')
+def send_node_modules(path):
+    return send_from_directory('node_modules', path)
 
 @app.route("/")
 def hello():
@@ -14,5 +24,4 @@ def setpos():
     time = time.strftime("%H:%M:%S") + ".%.2d" % round(time.microsecond/10000)
     b = "%.2d%6.2f,%s" % (int(data["lat"]))
     print("$GPGGA,%s,BBBB.BBBB,b,LLLLL.LLLL,l,Q,NN,D.D,H.H,h,G.G,g,A.A,RRRR*PP" % (time))
-
-    return "a"
+    return jsonify({'success': True})

requirements.txt

+Flask

static/index.js

+function log(message, cls) {
+  if (!cls) {
+    cls = 'info';
+  }
+  $('#output').prepend(`<p class="text-${cls}">${message}</p>`);
+}
+
+$(() => {
+  var lightLayer = L.tileLayer(
+    //'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+    // 'https://osm.rrze.fau.de/osmhd/{z}/{x}/{y}.png',
+    'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png',
+    {
+      maxZoom: 22,
+      attribution: 'Map data &copy; <a href="http://osm.org">OpenStreetMap</a> contributors, ' +
+        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+    }
+  );
+
+  window.heatmapLayer = new HeatmapOverlay({
+    // radius should be small ONLY if scaleRadius is true (or small radius is intended)
+    // if scaleRadius is false it will be the constant radius used in pixels
+    radius: .0001,
+    maxOpacity: .8,
+    // scales the radius based on map zoom
+    scaleRadius: true,
+    // if set to false the heatmap uses the global maximum for colorization
+    // if activated: uses the data maximum within the current map boundaries
+    //   (there will always be a red spot with useLocalExtremas true)
+    useLocalExtrema: false,
+    // which field name in your data represents the latitude - default "lat"
+    latField: 'lat',
+    // which field name in your data represents the longitude - default "lng"
+    lngField: 'lng',
+    // which field name in your data represents the data value - default "value"
+    valueField: 'val',
+  });
+
+  window.map = new L.Map(
+    'map',
+    {
+      center: new L.LatLng(49.6464, 10.61068),
+      zoom: 20,
+      layers: [lightLayer, window.heatmapLayer],
+      // layers: [lightLayer],
+      fullscreenControl: {
+        pseudoFullscreen: false
+      }
+    }
+  );
+
+  log('Click start', 'info');
+
+  window.polyline = L.polygon([], {color: 'red'}).addTo(window.map);
+});
+
+successCounter = 0;
+errorCounter = 0;
+
+function showPosition(position) {
+  $('#toggleBtn').text('Stop Logging');
+  var location = JSON.stringify({
+    lon: position.coords.longitude,
+    lat: position.coords.latitude,
+    acc: position.coords.accuracy,
+    t: position.timestamp
+  });
+  window.polyline.addLatLng(
+    [position.coords.latitude, position.coords.longitude],
+  );
+  window.map.setView(
+    [position.coords.latitude, position.coords.longitude],
+  );
+  $(location, 'info');
+
+  window.heatmapLayer.addData({
+    lat: position.coords.latitude,
+    lng: position.coords.longitude,
+    val: 5,
+  });
+  $.post({
+    url: '/set',
+    data: location,
+    success: () => {
+      successCounter += 1;
+      $('#successCounter').text(successCounter);
+    },
+    fail: (message) => {
+      console.error(message);
+      log(message, 'danger');
+      errorCounter += 1;
+      $('#errorCounter').text(errorCounter);
+    },
+    contentType: "application/json",
+    dataType: 'json',
+  });
+}
+
+var options = {
+  enableHighAccuracy: true,
+  // timeout: 1000,
+  maximumAge: 0
+};
+
+handle = null;
+
+function toggle() {
+  if (handle == null) {
+    start();
+  } else {
+    stop();
+  }
+}
+
+function start(){
+  if(handle === null){
+    log('Asking for permission', 'warning');
+    handle = navigator.geolocation.watchPosition(showPosition, (positionError) => {
+      log(positionError.message, 'danger');
+    }, options);
+  }
+}
+
+function stop(){
+  navigator.geolocation.clearWatch(handle);
+  handle = null;
+  $('#toggleBtn').text('Start Logging');
+}

templates/index.html

-<!DOCTYPE html>
-<html>
-	<head>
-		   <meta charset="UTF-8">
-	</head>
-	<body>
-<div id="demo"></div>
- <script>
-var x = document.getElementById("demo");
-function getLocation() {
-	x.innerHTML="searching";
-    if (navigator.geolocation) {
-    } else {
-        x.innerHTML = "Geolocation is not supported by this browser.";
-    }
-}
-function showPosition(position) {
-    var j;
-    x.innerHTML = j =  JSON.stringify({"lon": position.coords.longitude, "lat": position.coords.latitude, "acc": position.coords.accuracy, "t": position.timestamp});
-    var oReq = new XMLHttpRequest();
-	oReq.open("POST", "{{ url_for("setpos")}}"  );
-    oReq.setRequestHeader('Content-type', 'application/json');
-    oReq.send(j);
-}
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="static/assets/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" type="text/css" href="static/assets/leaflet.fullscreen/Control.FullScreen.css" />
+    <link rel="stylesheet" type="text/css" href="static/assets/bootstrap/dist/css/bootstrap.min.css" />
+  </head>
+  <body>
 
-var options = {
-  enableHighAccuracy: true,
-  timeout: 1000,
-  maximumAge: 0
-};
+    <div class="container-fluid">
+      <div class="row bg-dark">
+        <div id="map" style="width:100vw;height:75vh"></div>
+      </div>
+    </div>
 
+    <div class="container">
+      <div class="row">
+        <h1>
+          WebGPS
+          <button type="button" id="toggleBtn" class="btn btn-primary" onclick="toggle()">
+            Start Logging
+          </button>
+        </h1>
+      </div>
 
-handle = null;
-function start(){
-    if(handle === null){
-        handle = navigator.geolocation.watchPosition(showPosition, console.error, options);
-    }
-}
-function stop(){
-    window.clearInterval(handle);
-    handle = null;
-}
+      <div class="row">
+        <div class="card w-100">
+          <div class="card-header">
+            <h4>
+              Logging
+              <span id="successCounter" class="badge badge-success">0</span>
+              <span id="errorCounter" class="badge badge-danger">0</span>
+            </h4>
+          </div>
+          <div id="output" class="card-body">
+          </div>
+        </div>
+      </div>
+    </div>
 
-</script> 
-<button onclick="start()" >Start</button>
-<button onclick="stop()" >Stop</button>
-	</body>
+    <script src="static/assets/popper.js/dist/umd/popper.min.js"></script>
+    <script src="static/assets/jquery/dist/jquery.min.js"></script>
+    <script src="static/assets/leaflet/dist/leaflet.js"></script>
+    <script src="static/assets/leaflet.fullscreen/Control.FullScreen.js"></script>
+    <script src="static/assets/heatmap.js/build/heatmap.min.js"></script>
+    <script src="static/assets/heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>
 
+    <script src="static/index.js"></script>
+  </body>
 </html>