slider experiments

snippets/tracker.html

@@ -137,17 +137,68 @@ Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
     <div id="map_{{.Deveui}}" class="map"></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}}',
   layers: [layer],
   view: new ol.View({
-    center: ol.proj.fromLonLat([{{.LonJS}}, {{.LatJS}}],"EPSG:2056"),
+    center: position,
     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="slidecontainer">
+      <input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="200000" step="1" value="100000" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
+
+<script>
+function updateSlider(c)
+{
+    if(c.value <=  50000)
+  {
+    if(c.step != 1)
+        c.step = 1;
+    alert(c.value);
+  }
+  else 
+  {
+     if(c.step != 3)
+        c.step = 3;
+    alert(c.value);
+  }
+}
+
+function updateSliderTooltip(c)
+{
+  $('#tooltiptext').html(c.value);
+}
+</script>
+    </div>
+    <div class="slidecontainer has-textcentered">
+      <span id="tooltiptext">0</span>
+    </div>
+
     <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>