mqtt-map auf dem congress

mqtt-map/Googlelocation.cs

@@ -6,6 +6,7 @@ using System.Net;
 using System.Reflection;
 using System.Text;
 using System.Threading;
+using BlubbFish.Utils;
 using BlubbFish.Utils.IoT.Bots;
 using BlubbFish.Utils.IoT.Connector;
 using BlubbFish.Utils.IoT.Events;
@@ -61,20 +62,13 @@ namespace Fraunhofer.Fit.IoT.Bots.LoraBot.Moduls_broken {
     }
   }
 
-  class Googlelocation {
+  class Googlelocation : Webserver
-    private readonly HttpListener _listener = new HttpListener();
+  {
     private readonly Dictionary<String, List<Botclient>> locations = new Dictionary<String, List<Botclient>>();
-    private readonly Dictionary<String, String> config;
+    
+    public Googlelocation(ADataBackend backend, Dictionary<String, String> settings, InIReader requests) : base(backend, settings, requests) { }
 
-    public Googlelocation(ADataBackend backend, Dictionary<String, String> settings) {
+    protected override void Backend_MessageIncomming(Object sender, BackendEvent e) {
-      this.config = settings;
-      backend.MessageIncomming += this.Backend_MessageIncomming;
-      this._listener.Prefixes.Add(this.config["prefix"]);
-      this._listener.Start();
-      this.Run();
-    }
-
-    private void Backend_MessageIncomming(Object sender, BackendEvent e) {
       try {
         JsonData d = JsonMapper.ToObject(e.Message);
         if (d.ContainsKey("PacketRssi") && d["PacketRssi"].IsInt
@@ -104,80 +98,22 @@ namespace Fraunhofer.Fit.IoT.Bots.LoraBot.Moduls_broken {
       } catch { }
     }
 
-    private void Run() {
+    protected override void SendResponse(HttpListenerContext cont) {
-      ThreadPool.QueueUserWorkItem((o) => {
+      if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) {
-        Console.WriteLine("Webserver is Running...");
         try {
-          while(this._listener.IsListening) {
-            ThreadPool.QueueUserWorkItem((c) => {
-              HttpListenerContext ctx = c as HttpListenerContext;
-              try {
-                String rstr = this.SendResponse(ctx.Request);
-                Byte[] buf = Encoding.UTF8.GetBytes(rstr);
-                ctx.Response.ContentLength64 = buf.Length;
-                ctx.Response.OutputStream.Write(buf, 0, buf.Length);
-              }
-              catch { }
-              finally {
-                ctx.Response.OutputStream.Close();
-              }
-            }, this._listener.GetContext());
-          }
-        } 
-        catch { };
-      });
-    }
-
-    private String SendResponse(HttpListenerRequest request) {
-      if(request.Url.PathAndQuery == "/") {
-        if(File.Exists("resources/google.html")) {
-          try {
-            String file = File.ReadAllText("resources/google.html");
-            file = file.Replace("{%YOUR_API_KEY%}", this.config["api_key"]);
-            file = file.Replace("{%REQUEST-PAGE%}", request.Url.Host);
-            return file;
-          }
-          catch { return "500";  }
-        }
-        return "404";
-      }
-      if (request.Url.PathAndQuery.StartsWith("/loc?i=")) {
-        try {
-          String requeststrings = request.Url.PathAndQuery.Substring(7);
-          Dictionary<String, Int32> requestquerys = new Dictionary<String, Int32>();
-          if (requeststrings.Length != 0) {
-            foreach (String requeststring in requeststrings.Split(';')) {
-              String[] item = requeststring.Split(':');
-              requestquerys.Add(item[0], Int32.Parse(item[1]));
-
-            }
-          }
           Dictionary<String, Object> ret = new Dictionary<String, Object>();
-          foreach (KeyValuePair<String, List<Botclient>> devices in this.locations) {
+          Byte[] buf = Encoding.UTF8.GetBytes(JsonMapper.ToJson(this.locations));
-            if(!requestquerys.ContainsKey(devices.Key) || (requestquerys.ContainsKey(devices.Key) && devices.Value.Count > requestquerys[devices.Key])) {
+          cont.Response.ContentLength64 = buf.Length;
-              Int32 qindex = requestquerys.ContainsKey(devices.Key)?requestquerys[devices.Key]:0;
+          cont.Response.OutputStream.Write(buf, 0, buf.Length);
-              Dictionary<String, Object> subret = new Dictionary<String, Object>();
+          Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
-              Int32 i = 0;
+          return;
-              List<Botclient> sub = devices.Value.GetRange(qindex, devices.Value.Count - qindex);
+        } catch (Exception e) {
-              foreach (Botclient item in sub) {
+          Helper.WriteError("500 - " + e.Message);
-                subret.Add(i++.ToString(), item);
+          cont.Response.StatusCode = 500;
-              }
+          return;
-              ret.Add(devices.Key, subret);
+        }
-            }
-          }
-          Console.WriteLine("Koordiante abgefragt!");
-          return JsonMapper.ToJson(ret);
-        } catch {
-          return "{}";
-        }  
       }
-      return "<h1>Works</h1>"+ request.Url.PathAndQuery;
+      base.SendResponse(cont);
     }
-
-    public void Dispose() {
-      this._listener.Stop();
-      this._listener.Close();
-    }
-    
   }
 }

mqtt-map/Program.cs

@@ -13,9 +13,14 @@ namespace mqtt_map {
         Console.ReadLine();
         return;
       }
+      if(!InIReader.ConfigExist("requests")) {
+        Console.WriteLine("requests.ini not found!");
+        Console.ReadLine();
+        return;
+      }
       InIReader ini = InIReader.GetInstance("settings");
       ADataBackend b = (ADataBackend)ABackend.GetInstance(ini.GetSection("mqtt"), ABackend.BackendType.Data);
-      new Googlelocation(b, ini.GetSection("google"));
+      new Googlelocation(b, ini.GetSection("google"), InIReader.GetInstance("requests"));
       while(true) {
         System.Threading.Thread.Sleep(1000);
       }

mqtt-map/config-example/requests.conf.example

@@ -0,0 +1,2 @@
+[index.html]
+your_api_key=abc

mqtt-map/mqtt-map.csproj

@@ -51,12 +51,42 @@
   </ItemGroup>
   <ItemGroup>
     <None Include="app.manifest" />
-    <None Include="settings.conf.example">
+    <None Include="config-example\settings.conf.example">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
+    <None Include="resources\js\leaflet\leaflet-src.esm.js.map" />
+    <None Include="resources\js\leaflet\leaflet-src.js.map" />
+    <None Include="resources\js\leaflet\leaflet.js.map" />
   </ItemGroup>
   <ItemGroup>
-    <Content Include="resources\google.html">
+    <Content Include="resources\css\global.css">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\js\leaflet\images\layers-2x.png" />
+    <Content Include="resources\js\leaflet\images\layers.png" />
+    <Content Include="resources\js\leaflet\images\marker-icon-2x.png" />
+    <Content Include="resources\js\leaflet\images\marker-icon.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\js\leaflet\images\marker-shadow.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\js\leaflet\leaflet-src.esm.js" />
+    <Content Include="resources\js\leaflet\leaflet-src.js" />
+    <Content Include="resources\js\leaflet\leaflet.css">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\js\leaflet\leaflet.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\js\nav.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <None Include="config-example\requests.conf.example" />
+    <Content Include="resources\favicon.ico">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\index.html">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>

mqtt-map/resources/css/global.css

@@ -0,0 +1,20 @@
+/* Always set the map height explicitly to define the size of the div
+        * element that contains the map. */
+#bigmap {
+    height: 100%;
+}
+
+/* Optional: Makes the sample page fill the window. */
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+#title {
+    position: absolute;
+    z-index: 10000;
+    margin-left: 110px;
+    margin-top: 7px;
+    color: #e23232;
+}

mqtt-map/resources/google.html

@@ -1,126 +0,0 @@
-<!DOCTYPE html>
-
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <meta charset="utf-8" />
-    <title>Google Map</title>
-    <style>
-         /* Always set the map height explicitly to define the size of the div
-        * element that contains the map. */
-         #map {
-             height: 100%;
-         }
-         /* Optional: Makes the sample page fill the window. */
-         html, body {
-             height: 100%;
-             margin: 0;
-             padding: 0;
-         }
-        #title {
-            position: absolute;
-            z-index: 10000;
-            margin-left: 110px;
-            margin-top: 7px;
-            color: #e23232;
-        }
-    </style>
-</head>
-<body>
-    <h1 id="title">Mqtt-Map Monica</h1>
-    <div id="map"></div>
-    <script>
-        var map;
-        var center_set = false;
-        function initMap() {
-            map = new google.maps.Map(document.getElementById('map'), {
-                zoom: 3,
-                center: new google.maps.LatLng(0, 0)
-            });
-        }
-    </script>
-    <script async defer src="https://maps.googleapis.com/maps/api/js?key={%YOUR_API_KEY%}&callback=initMap">
-    </script>
-    <script type="text/javascript">
-        var devices = {};
-        function get_elm() {
-            var colors = new Array(
-                "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
-                "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
-                "http://maps.google.com/mapfiles/ms/icons/purple-dot.png",
-                "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
-            );
-            var xhttp = new XMLHttpRequest();
-            xhttp.onreadystatechange = function () {
-                if (this.readyState == 4 && this.status == 200) {
-                    var obj = JSON.parse(this.responseText);
-                    var i = 0;
-                    for (var names in obj) {
-                        if (obj.hasOwnProperty(names)) {
-                            if (!devices.hasOwnProperty(names)) {
-                                devices[names] = 0;
-                            }
-                            var list = obj[names];
-                            var j = devices[names];
-                            for (var pos in list) {
-                                if (list.hasOwnProperty(pos)) {
-                                    var m = new google.maps.Marker({
-                                        icon: colors[i % colors.length],
-                                        position: new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]),
-                                        animation: google.maps.Animation.DROP
-                                    });
-                                    var infowindow = new google.maps.InfoWindow({
-                                        content: "<div>" +
-											"Name: " + names + "<br>" +
-                                            "PacketRssi: " + list[pos]["PacketRssi"] + "<br>" +
-                                            "Rssi: " + list[pos]["Rssi"] + "<br>" +
-                                            "Snr: " + list[pos]["Snr"] + "<br>" +
-                                            "Upatedtime: " + list[pos]["Upatedtime"] + "<br>" +
-                                            "Hdop: " + list[pos]["Hdop"] + "<br>" +
-                                            "Battery: " + list[pos]["Battery"] + "<br>" +
-                                            "Fix: " + list[pos]["Fix"] + 
-                                            "</div>"
-                                    });
-                                    m.addListener('click', function () {
-                                        infowindow.open(map, m);
-                                    });
-                                    m.setMap(map);
-                                    if (!center_set) {
-                                        map.setCenter(new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]));
-                                        smoothZoom(15, map.getZoom());
-                                        center_set = true;
-                                    }
-                                    j++;
-                                }
-                            }
-                            devices[names] = j;
-                            i++;
-                        }
-                    }
-                }
-            };
-            var qstring = "";
-            for (var item in devices) {
-                if (devices.hasOwnProperty(item)) {
-                    qstring += item + ":" + devices[item];
-                }
-				qstring += ";";
-            }
-            xhttp.open("GET", "http://{%REQUEST-PAGE%}:8080/loc?i="+qstring.substr(0,qstring.length-1), true);
-            xhttp.send();
-        }
-        setInterval(get_elm, 5000);
-        function smoothZoom(max, current) {
-            if (current >= max) {
-                return;
-            } else {
-                var z = google.maps.event.addListener(map, 'zoom_changed', function (event) {
-                    google.maps.event.removeListener(z);
-                    smoothZoom(max, current + 1);
-                });
-                setTimeout(function () { map.setZoom(current) }, 150);
-            }
-        }
-        
-    </script>
-</body>
-</html>

mqtt-map/resources/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title>Dashboard</title>
+    <link rel="stylesheet" type="text/css" href="js/leaflet/leaflet.css" />
+    <link rel="stylesheet" type="text/css" href="css/global.css" />
+</head>
+<body>
+    <h1 id="title">Mqtt-Map Monica</h1>
+    <div id="bigmap"></div>
+    <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
+    <script type="text/javascript" src="js/nav.js"></script>
+</body>
+</html>

mqtt-map/resources/js/leaflet/leaflet.css

@@ -0,0 +1,635 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+	will-change: opacity;
+	}
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	will-change: transform;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+.leaflet-oldie .leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}

mqtt-map/resources/js/nav.js

@@ -0,0 +1,125 @@
+var mymap = L.map('bigmap').setView([51.396851, 12.401617], 15);
+
+L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+  maxZoom: 20,
+  id: 'mapbox.streets',
+  accessToken: '{%YOUR_API_KEY%}'
+}).addTo(mymap);
+
+var markers = {};
+
+setInterval(datarunner, 1000);
+function datarunner() {
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = parsedata;
+  xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
+  xhttp.send();
+}
+
+function parsedata() {
+  if (this.readyState == 4 && this.status == 200) {
+    var obj = JSON.parse(this.responseText);
+    for (var names in obj) {
+      if (obj.hasOwnProperty(names)) {
+        var markeritem = obj[names];
+
+        if (!markers.hasOwnProperty(names)) {
+          markers[names] = L.marker([51.396851, 12.401617]).addTo(mymap);
+        }
+      }
+    }
+  }
+}
+
+
+
+/*var devices = {};
+function get_elm() {
+    var colors = new Array(
+        "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
+        "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
+        "http://maps.google.com/mapfiles/ms/icons/purple-dot.png",
+        "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
+    );
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            var obj = JSON.parse(this.responseText);
+            var i = 0;
+            for (var names in obj) {
+                if (obj.hasOwnProperty(names)) {
+                    if (!devices.hasOwnProperty(names)) {
+                        devices[names] = 0;
+                    }
+                    var list = obj[names];
+                    var j = devices[names];
+                    for (var pos in list) {
+                        if (list.hasOwnProperty(pos)) {
+                            var m = new google.maps.Marker({
+                                icon: colors[i % colors.length],
+                                position: new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]),
+                                animation: google.maps.Animation.DROP
+                            });
+                            var infowindow = new google.maps.InfoWindow({
+                                content: "<div>" +
+                                    "Name: " + names + "<br>" +
+                                    "PacketRssi: " + list[pos]["PacketRssi"] + "<br>" +
+                                    "Rssi: " + list[pos]["Rssi"] + "<br>" +
+                                    "Snr: " + list[pos]["Snr"] + "<br>" +
+                                    "Upatedtime: " + list[pos]["Upatedtime"] + "<br>" +
+                                    "Hdop: " + list[pos]["Hdop"] + "<br>" +
+                                    "Battery: " + list[pos]["Battery"] + "<br>" +
+                                    "Fix: " + list[pos]["Fix"] +
+                                    "</div>"
+                            });
+                            m.addListener('click', function () {
+                                infowindow.open(map, m);
+                            });
+                            m.setMap(map);
+                            if (!center_set) {
+                                map.setCenter(new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]));
+                                smoothZoom(15, map.getZoom());
+                                center_set = true;
+                            }
+                            j++;
+                        }
+                    }
+                    devices[names] = j;
+                    i++;
+                }
+            }
+        }
+    };
+    var qstring = "";
+    for (var item in devices) {
+        if (devices.hasOwnProperty(item)) {
+            qstring += item + ":" + devices[item];
+        }
+        qstring += ";";
+    }
+    xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc?i=" + qstring.substr(0, qstring.length - 1), true);
+    xhttp.send();
+}
+setInterval(get_elm, 5000);
+function smoothZoom(max, current) {
+    if (current >= max) {
+        return;
+    } else {
+        var z = google.maps.event.addListener(map, 'zoom_changed', function (event) {
+            google.maps.event.removeListener(z);
+            smoothZoom(max, current + 1);
+        });
+        setTimeout(function () { map.setZoom(current) }, 150);
+    }
+}
+*/
+/*var map;
+var center_set = false;
+function initMap() {
+    map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 3,
+        center: new google.maps.LatLng(0, 0)
+    });
+}
+*/