add some map logic...

metrics.go

@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"bytes"
 	"fmt"
+	"html/template"
 	"io/ioutil"
 	"log"
 	"net/http"
@@ -13,11 +14,14 @@ import (
 
 type OneMetric struct {
 	Deveui               string
+	DeveuiJS             template.JS
 	Alias                string
 	Readonly             bool
 	Timestamp            string
 	Lat                  string
 	Lon                  string
+	LatJS                template.JS
+	LonJS                template.JS
 	Vbat                 string
 	Fw                   string
 	BatteryPercent       string
@@ -336,8 +340,10 @@ func getLastMetrics(deveui string) OneMetric {
 			field := s[7]
 			if field == "lat" {
 				res.Lat = value
+				res.LatJS = template.JS(value)
 			} else if field == "lon" {
 				res.Lon = value
+				res.LonJS = template.JS(value)
 			} else if field == "vbat" {
 				res.Vbat = value
 			} else if field == "fw" {
@@ -346,6 +352,7 @@ func getLastMetrics(deveui string) OneMetric {
 		}
 	}
 	res.Deveui = deveui
+	res.DeveuiJS = template.JS(deveui)
 	res.Alias = getDevAlias(deveui)
 	res.Readonly = false
 	res.ActiveUntil = getActiveUntil(deveui)

snippets/tracker.html

@@ -132,6 +132,22 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
       </div>
       </nav>
     </div>
+
+    <script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
+    <div id="map_{{.Deveui}}" class="map"></div>
+
+<script>
+var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
+var map_{{.DeveuiJS}} = new ga.Map({
+  target: 'map_{{.Deveui}}',
+  layers: [layer],
+  view: new ol.View({
+    center: ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}],"EPSG:2056"),
+    resolution: 20
+  })
+});
+</script>
+
     <div class="has-text-centered">
       <span class="is-size-6 has-text-centered">Abo aktiv bis</span>
       <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
@@ -161,13 +177,10 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
 {{ end }}
   </div>
 </div>
-
 {{end}}
 
 <script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
-
 <script src="static/js/scales.js"></script>
-
 {{ else }}
 <h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
 {{end}}

static/css/map.css

@@ -0,0 +1,36 @@
+.map {
+  height: 350px;
+}
+.popup {
+  background-color: white;
+  padding-left: 8px;
+  padding-bottom: 8px;
+  padding-top: 8px; 
+  width: 220px;
+  color: #555;
+  font: 11px tahoma,arial,verdana,sans-serif;
+}
+.title {
+  margin-top: -4px;
+  font-weight: bold;
+}
+.subtitle {
+  font-style: normal;
+  margin-bottom: -3px;
+  margin-top: -5px;
+}
+.middle {       
+  margin-top: -9px;
+}
+.close {
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+  font-size: larger;
+  font-weight: bold;
+}
+button {
+  cursor: pointer;
+}

static/js/map.js.orig

@@ -0,0 +1,69 @@
+// Create a GeoAdmin Map
+var map = new ga.Map({
+  
+  // Define the div where the map is placed
+  target: 'map',
+  
+  // Create a view
+  view: new ol.View({
+    
+    // Define the default resolution
+    // 10 means that one pixel is 10m width and height
+    // List of resolution of the WMTS layers:
+    // 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1, 0.5, 0.25, 0.1
+    resolution: 650,
+    
+    // Define a coordinate CH1903+ (EPSG:2056) for the center of the view
+     center: [2660000, 1190000]
+  })
+});
+
+// Create a background layer
+var lyr1 = ga.layer.create('ch.swisstopo.pixelkarte-grau');
+
+// Add the layers in the map
+map.addLayer(lyr1);
+
+var position = [2709136, 1270186];
+
+// Zoom on the position
+map.getView().setCenter(position);
+map.getView().setResolution(10);
+
+// Create the layer with the icon
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [new ol.Feature({
+      geometry: new ol.geom.Point(position)
+    })]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Icon({
+      anchor: [0.5, 0.5],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'fraction',
+      src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oLCAwhG8L1qXwAAAJ1SURBVDjLTZPBThRBEIa/6uleYtDVA8QHUGIw4ehVb3Ii+AK+guGid696Ud/AN4BAiFw9ePUAbmK4SIAo7OxuZtnZmZ7umfLQED1U0of6qur/q1oA9PgYWVlBBwNHCGt4v8Ws3GRa9BmPoSimDIc7jEYfqOtD+fw56MYGsruL6GCAPH6Mqjq+f9+jbZ9T1zArYVoo4zFMJsJoBMMh5PkBT55syNu3QZ89QwD07MxxcjJBZJEQFGME7+H8HC4vIc+5LqSMRsJsVuDcsnz7Fozu7zuOjvYoy0WKqeKccP8+3LkDvoHJJEVRwHQqVJVydXWXP392dXXVWcpyjbZ9DiggGIGmgdNTOPkFFxc3MMxmUJaCb5TQrBPCmmU43AKg64QQElhVMBrDZJzgsryBoaohBiFGEHllyfNNOoW2BV9DNU8G3gBlCfM51HWCQ4BOQQxo98Ly+3cfa5UQJCVVCZjP07uuUzQNhAhdB5kBI4qau5Y8hyxLlb3/B3gPtU9gDBDbZJPNQIRr2Viqaor3fWJMyU2T3G8aaGOS1ikYAZOBMSlAiLGwVNUOV1cvaVuIMU0S22uwTbvJDFgLCwsJjhFUQXXbEOMHQoC6VrxPBdr4H5wl8N49WFqC27eh11NcD5z7ZFjoHaJ6QIhCjErbpe4qSa+zcOsWLC4mCaqKdYK1X/D1YTrlN68de/s51byPqoIImUnde700Qa8HoIgIIRT8OFqWeRWMrq8j794HHj1YQuQA1XSNxkCWKSJK26YVqgqdfuHnz2WZV0EfPrz+TE+fIl+/oqurDu/XMGYLkU2c62MtwJQs28aYj1TVoQwGQVdWkONj/gL3ho+XUT2DTgAAAABJRU5ErkJggg=='
+    })
+  })
+});
+map.addLayer(vectorLayer);
+
+// Create the popup
+var popup = new ol.Overlay({
+  position: position,
+  element: $(
+    '<div class="popup">' +
+      '<div class="title"<h3>Kdo FU Waffenplaetze</h3></div>' +
+      '<div class="subtitle">' +
+        '<br>Kaserne Auenfeld<br>' +
+        '<div class="middle">' +
+          '<br>8500 Frauenfeld<br>' +
+        '</div>' +
+      '</div>' +
+      '<div class="close">' +
+        '<div type="button" onclick="$(\'.popup\').hide()"<span aria-hidden="true">X</span></div>' +
+      '</div>' +
+    '</div>')
+});
+map.addOverlay(popup);
+alert("Blabla");