migrate to leaflet library, part 1

snippets/tracker.html

@@ -1,3 +1,20 @@
+{{define "header_additions"}}
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+   crossorigin=""/>
+ <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+   crossorigin=""></script>
+<style>
+#map {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+</style>
+{{end}}
 {{define "body_content"}}
 {{ if ne .UserName "" }}
 <script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
@@ -88,6 +105,8 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
   <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span>{{ if not .Readonly }}<a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a>{{ end }}</p>
   <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
   <div id="{{.Deveui}}" class="columns mt-3">
+    <p id="lat" hidden>{{.Lat}}</p>
+    <p id="lon" hidden>{{.Lon}}</p>
     <div class="column is-one-quarter"></div>
     <div class="column is-half">
       <a class="block-link" href="/map.html?deveui={{.Deveui}}&alias={{.Alias}}&lat={{.Lat}}&lon={{.Lon}}">
@@ -97,41 +116,6 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
     <div class="column is-one-quarter"></div>
   </div>
 
-  <script>
-  var position = ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}], "EPSG:2056");
-
-  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
-  var map_{{.DeveuiJS}} = new ga.Map({
-    target: 'map_{{.Deveui}}',
-    interactions: [],
-    controls: [],
-    layers: [layer],
-    view: new ol.View({
-      center: position,
-      controls: [],
-      resolution: 20
-    })
-  });
-
-  // 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, 1],
-        anchorXUnits: 'fraction',
-        anchorYUnits: 'fraction',
-        src: '/static/images/marker.png'
-      })
-    })
-  });
-  map_{{.DeveuiJS}}.addLayer(vectorLayer);
-  </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>