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>

static/js/tracker.js

@@ -7,7 +7,6 @@ function validate(what, text) {
   return re.test(text);
 }
 
-// A $( document ).ready() block.
 $( document ).ready(function() {
   $(".show-modal").click(function() {
     $("#alias_exclamation").hide();
@@ -306,3 +305,43 @@ $('#cart-pay').on('click', function(ev) {
   StartPaymentProgress();
   PayMe();
 });
+
+// draw all maps
+var woBischIcon = L.icon({
+    iconUrl: '/static/images/marker.png',
+    iconSize:     [64, 64], 
+    iconAnchor:   [32, 64] 
+});
+
+var maps = [];
+$(document).ready(function() {
+  $(".tracker").each(function(index) {
+    console.log('Draw Map (' + index + "): " + $(this).find(".alias").html());
+
+    deveui = $(this).find("div").first().attr("id");
+    lat = $(this).find("#lat").html();
+    lon = $(this).find("#lon").html();
+    console.log("Deveui: " + deveui);
+    var map = new L.Map('map_' + deveui, {
+      crs: L.CRS.EPSG3857,
+      zoomControl: false
+    });
+    map.dragging.disable();
+    map.touchZoom.disable();
+    map.doubleClickZoom.disable();
+    map.scrollWheelZoom.disable();
+    map.boxZoom.disable();
+    map.keyboard.disable();
+    if (map.tap) map.tap.disable();
+    var url = 'https://wmts20.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
+    var tilelayer = new L.tileLayer(url);
+    map.addLayer(tilelayer);
+    map.setView(L.latLng(lat, lon), 10);
+
+    var marker = L.marker([lat, lon],{icon: woBischIcon}).addTo(map);
+
+    maps.push(map);
+
+
+  });
+});