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,9 +7,8 @@ function validate(what, text) {
   return re.test(text);
 }
 
-// A $( document ).ready() block.
 $( document ).ready(function() {
-$(".show-modal").click(function() {
+  $(".show-modal").click(function() {
     $("#alias_exclamation").hide();
     $("#smsnumber_exclamation").hide();
     var alias = $(this).prev().html();
@@ -27,18 +26,18 @@ $(".show-modal").click(function() {
     }
     $("#smsnumber").val(smsnumber);
     $("#modal").addClass("is-active");  
-});
+  });
 
-$("#cart-close").click(function() {
+  $("#cart-close").click(function() {
      $("#cart").removeClass("is-active");
-});
+  });
 
-$("#payment_notifier_close").click(function() {
+  $("#payment_notifier_close").click(function() {
      $("#payment_notifier").removeClass("is-active");
      location.reload(true);
-});
+  });
 
-$(".abo_plus").click(function() {
+  $(".abo_plus").click(function() {
      console.log("abo_plus");
      el = $(this).parent().find(".abo_add_years");
      el_text = $(this).parent().parent().find(".abo_add_years_text");
@@ -52,9 +51,9 @@ $(".abo_plus").click(function() {
          el_text.html("+" + counter + " Jahre");
        }
      }
-});
+  });
 
-$(".abo_minus").click(function() {
+  $(".abo_minus").click(function() {
      console.log("abo_minus");
      el = $(this).parent().find(".abo_add_years");
      el_text = $(this).parent().parent().find(".abo_add_years_text");
@@ -70,14 +69,14 @@ $(".abo_minus").click(function() {
          el_text.html("+" + counter + " Jahre");
        }
      }
-});
+  });
 
-function add_years(dt,n) 
+  function add_years(dt,n) 
-{
+  {
    return new Date(dt.setFullYear(dt.getFullYear() + n));      
-}
+  }
 
-$(".abo_pay").click(function() {
+  $(".abo_pay").click(function() {
     console.log("pay...");
     loadStripeLibrary();
     counter = 0; 
@@ -114,14 +113,14 @@ $(".abo_pay").click(function() {
       $("#charge_data").html(charge_data);
       $("#cart").addClass("is-active");  
     }
-});
+  });
 
-$("#modal-close").click(function() {
+  $("#modal-close").click(function() {
      console.log("blabla");
      $("#modal").removeClass("is-active");
-});
+  });
   
-$("#modal-save").click(function() {
+  $("#modal-save").click(function() {
     var alarmactive = "0";
     if ($('#checkbox').prop('checked')) {
       alarmactive = "1";
@@ -185,7 +184,7 @@ $("#modal-save").click(function() {
   
     console.log("save");
     $("#modal").removeClass("is-active");
-});
+  });
 
 });
 
@@ -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);
+
+
+  });
+});