From 842e48423be6d5dbb735c7b2770772ea7711a67f Mon Sep 17 00:00:00 2001 From: Joerg Lehmann Date: Fri, 19 Mar 2021 20:37:21 +0100 Subject: [PATCH] zwischenstand mit bugs... --- static/css/wo-bisch-web-custom.css | 2 +- static/images/marker-all.png | Bin 0 -> 1831 bytes static/js/map.js | 77 +++++++++++++---------------- 3 files changed, 34 insertions(+), 45 deletions(-) create mode 100644 static/images/marker-all.png 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 0000000000000000000000000000000000000000..d9cf65e33304484f3de8da5479c4ad9ab857bad8 GIT binary patch literal 1831 zcmV+?2iW+DP)EX>4Tx04R}tkv&MmKpe$iTcsiuk!BEa$WWauh!t_vDionYs1;guFuC*#ni!H4 z7e~Rh;NZt%)xpJCR|i)?5c~jfb8}L3krMxx6k5c1aNLh~_a1lefMBD_G^=YI&~)3( zq>^GTzaoZT5keFL5Rj0WWz0%a8ouM}9s$1I#d((hxj#prTCf-p5Q%4)VcNvaEL z!FiupU}ae)J|`YC>4LKlt6PRZL8HNs%Pb{o*(uBS3f;Xx1I)``B@sCqU>KxYFDHjRr9NNqW7l z#g2gfZQ$a%ttorJ! zxD#bH!UB{W%iD*6j}bPC;rlBJ05x0>w4y8mf|%+u!21lcLN?NudH}SZxd`u}%yg`} z8=+DRpSx5VINtecV4nx)0SbY3H7rdf09sEo%64FqzobGA$|kL+Aypxu>sW)(obUm@ zMhqLq9ROX&Lf}Ir;hI8G;7MuZgK+~u>nJ1OFpxh^h1@xWIb!HYJO^kEdF0SGj?M#I zgVLroa3iHtw4!1(l(a!0Ad&v!wybUg0S5x z6ku&43{XQ6%I~4WM_D0_yb+OUwJ0qiJsDz%*|rT-6b3wPkvras>U@?FuK{m|1Ui=- zp7I(3I?9-^iyY@PFFPoBmI0k1y{S@5R@*V4j(bpMheT_wZ0162{|$pECghs8Qper? z0LY;t^idbE%h_pvhMhovNRKM~0ifI;^2+xA%J$YQ*vtil10lh`&kF$hDh0r8Ax9WL zd8qn+47qlRu41}-227&VYIxzk`RNYH03knog&H0Jq0r)5@c@90&O-M91Qrd4kBLyg zO&043fMI^Iuz4C#?riU8 zP=PYl;*MW^oC00IfCUSh;tVSO)ez+aO;)Y(F-|xKKn%mcR~Cj8Q@}O{*?$vIWO2tq z*~N&TN>JEmY5Za})W+ETRY0}nn)|)Y1Jp2!48K{Q^TKxeSQfT9QbRt10X9~5V}&}ekXm=3$Dljh+%*XucQEg<#C3u z@gI-Za{!n-PR@TJ4LlHU%n(;bcoB&|{*JJ9=Mi3rKWB++M>9W@vFg@bi4haN?e)ii zQ7tV9-zDh$4|Kb!MVtU2hG9miN+=Wt5Eex#di*f}kS2}*s}qR*m0~#RPMyYNksZ>&B40KJJ^?^@9%8)fFC0O5)~|`a=M;un zz#)_yEN|^axXWh1nLY-L=7UZ~co;1Db>Tc27Wj5P5dgA9(zghe5aNR5~8e002ovPDHLkV1jTeI&uI2 literal 0 HcmV?d00001 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) {