drpuur/wo-bisch-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

schon ein bisschen besser mit location slider...

Browse Source
This commit is contained in:
jlehmann
2021-03-13 19:56:15 +01:00
parent 874aee24ff
commit 4374027909
4 changed files with 206 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
snippets/map.html
+10 -73
View File
@@ -8,97 +8,34 @@
<link href="static/bulma-calendar/css/bulma-calendar.min.css" rel="stylesheet">
<script src="static/bulma-calendar/js/bulma-calendar.min.js"></script>
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
<script src="static/js/map.js"></script>
<div class="columns" id="myselectors">
<div class="column is-half py-1">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
<i class="fa fa-calendar"></i><span>100 %</span>
</div>
</div>
<div class="column is-half py-1">
</div>
</div>
<script src="static/js/map.js"></script>
<script src="static/js/graph.js"></script>
<div>
<section id="chart">
<!-- Content ... -->
</section>
</div>
<script src="https://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
<div id="map" class="mapbig"></div>
<div id="map" class="mapbig">
</div>
<script>
var urlParams = new URLSearchParams(window.location.search);
var deveui = urlParams.get('deveui');
var lon = urlParams.get('lon');
var lat = urlParams.get('lat');
var position = ol.proj.fromLonLat([lon, lat], "EPSG:2056");
<div id="tooltiptext" class="slidecontainer has-text-centered">
</div>
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var map = new ga.Map({
target: 'map',
layers: [layer],
view: new ol.View({
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.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="slidecontainer">
<input class="slider" id="datetimeslider" type="range" label="Zeitpunkt" min="0" max="0" step="1" value="" onchange="updateSlider(this)" ontouchmove="updateSliderTooltip(this)" onmousemove="updateSliderTooltip(this)" />
</div>
{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}