diff --git a/static/css/wo-bisch-web-custom.css b/static/css/wo-bisch-web-custom.css index c6c2b7c..60cedfe 100644 --- a/static/css/wo-bisch-web-custom.css +++ b/static/css/wo-bisch-web-custom.css @@ -48,7 +48,7 @@ hr.top { * * The CSS shown here will not be introduced in the Quickstart guide, but * * shows how you can use CSS to style your Element's container. * */ -input, +input .StripeElement { height: 40px; padding: 10px 12px; diff --git a/static/images/marker-all.png b/static/images/marker-all.png new file mode 100644 index 0000000..d9cf65e Binary files /dev/null and b/static/images/marker-all.png differ diff --git a/static/js/map.js b/static/js/map.js index 6d0a0bd..ad60bf3 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -1,25 +1,32 @@ var urlParams = new URLSearchParams(window.location.search); var deveui = urlParams.get('deveui'); var alias = urlParams.get('alias'); -var start = urlParams.get('start'); -var stop = urlParams.get('stop'); var lon = urlParams.get('lon'); var lat = urlParams.get('lat'); var map; +var lcontrol; var last_slider_position; +var markers = []; +var marker; var allmarkers = L.layerGroup(); - -if (start == null) { - var dstart = moment({hour: 0}); - var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); -} - -if (stop == null) { - var dstop = moment(); - var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); -} - +var woBischIcon = L.icon({ + iconUrl: '/static/images/marker.png', + iconSize: [64, 64], + iconAnchor: [32, 64], + popupAnchor: [0, -64] +}); var datapoints; +var woBischIcon2 = L.icon({ + iconUrl: '/static/images/marker-all.png', + iconSize: [64, 64], + iconAnchor: [32, 32], + popupAnchor: [0, 0] +}); + +var dstart = moment({hour: 0}); +var start = dstart.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); +var dstop = moment(); +var stop = dstop.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); function vbat2icon(level) { switch (level) { @@ -51,7 +58,6 @@ function vbat2icon(level) { return ''; } - function refreshDatapoints(deveui, start, stop) { range = "" range = range + "&start=" + start; @@ -87,34 +93,28 @@ function refreshDatapoints(deveui, start, stop) { var myhtml = '

' + alias + '
' + moment(date).format('DD.MM.YYYY HH:mm') + '
' + vbat2icon(datapoints[datapoints.length - 1][4]) + '

'; marker.bindPopup(myhtml).openPopup(); + + markers = []; // we create the layer group with all positions - var markers = []; + var myIcon = L.divIcon({className: 'my-div-icon'}); for (let i of datapoints) { unix_timestamp = i[0]; date = new Date(unix_timestamp * 1000); - markers.push(L.marker([i[1], i[2]]).bindPopup(moment(date).format('DD.MM.YYYY HH:mm'))); + markers.push(L.marker([i[1], i[2]], {icon: woBischIcon2}).bindPopup(moment(date).format('DD.MM.YYYY HH:mm'))); } allmarkers = L.layerGroup(markers); - var baseMaps = { - }; - var overlayMaps = { - "alle Positionen": allmarkers - }; - L.control.layers(baseMaps, overlayMaps).addTo(map); - console.log(map); + if (lcontrol != undefined) { + //lcontrol.clearLayers(); + lcontrol.remove(); + } + lcontrol = L.control.layers({}).addTo(map); + lcontrol.addOverlay(allmarkers,'alle Positionen anzeigen'); + var bounds = new L.LatLngBounds([[mydata['max_lat'], mydata['max_lon']], [mydata['min_lat'], mydata['min_lon']]]); + map.fitBounds(bounds, { padding: [20, 20] }); }); } -var myfeature; -var marker; -var woBischIcon = L.icon({ - iconUrl: '/static/images/marker.png', - iconSize: [64, 64], - iconAnchor: [32, 64], - popupAnchor: [0, -64] -}); - $(document).ready(function() { map = new L.Map('map', { crs: L.CRS.EPSG3857, @@ -124,21 +124,13 @@ $(document).ready(function() { var tilelayer = new L.tileLayer(url); map.addLayer(tilelayer); map.setView(L.latLng(lat, lon), 10); - - var overlayMaps = { - "All": allmarkers - }; - marker = L.marker([lat, lon],{icon: woBischIcon}).addTo(map); - + marker = L.marker([lat, lon],{icon: woBischIcon, zIndexOffset: 1000}).addTo(map); $('#reportrange span').html(moment(start).locale('de').format('D. MMM YYYY') + ' - ' + moment(stop).locale('de').format('D. MMM YYYY')); refreshDatapoints(deveui,start,stop); - - console.log("End of document ready..."); }); - $(function() { var start = moment({hour: 0}); var end = moment(); @@ -202,11 +194,8 @@ $(function() { } }, cb); - //cb(start, end); - }); - function updateSliderTooltip(c) { if (datapoints == undefined || datapoints.length == 0) {