[1.2.3] #9 display polygons and marker on the map

Lora-Map/Lora-Map.csproj

@@ -67,10 +67,10 @@
     <None Include="dpkg\postinst" />
     <None Include="dpkg\preinst" />
     <None Include="dpkg\prerm" />
-    <None Include="layer.json" />
     <None Include="resources\icons\marker\din1451m.woff">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
+    <None Include="resources\js\leaflet\leaflet-src.js.map" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="resources\admin\css\global.css">
@@ -88,6 +88,9 @@
     <Content Include="resources\css\icons\admin-with-cogwheels.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\css\icons\cctv.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\css\icons\failtile.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

Lora-Map/Model/Admin/Adminmodel.cs

@@ -53,7 +53,23 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model.Admin {
           return false;
         }
         File.WriteAllText("json/names.json", rawData);
-        Console.WriteLine("200 - Get names.json " + cont.Request.Url.PathAndQuery);
+        Console.WriteLine("200 - Post names.json " + cont.Request.Url.PathAndQuery);
+        this.NamesUpdate?.Invoke(this, new EventArgs());
+        return true;
+      } else if(cont.Request.Url.PathAndQuery == "/admin/set_json_geo") {
+        StreamReader reader = new StreamReader(cont.Request.InputStream, cont.Request.ContentEncoding);
+        String rawData = reader.ReadToEnd();
+        cont.Request.InputStream.Close();
+        reader.Close();
+        try {
+          JsonMapper.ToObject(rawData);
+        } catch(Exception) {
+          Helper.WriteError("501 - Error recieving geo.json " + cont.Request.Url.PathAndQuery);
+          cont.Response.StatusCode = 501;
+          return false;
+        }
+        File.WriteAllText("json/geo.json", rawData);
+        Console.WriteLine("200 - Post geo.json " + cont.Request.Url.PathAndQuery);
         this.NamesUpdate?.Invoke(this, new EventArgs());
         return true;
       }
@@ -68,6 +84,13 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model.Admin {
         cont.Response.OutputStream.Write(buf, 0, buf.Length);
         Console.WriteLine("200 - Send names.json " + cont.Request.Url.PathAndQuery);
         return true;
+      } else if(cont.Request.Url.PathAndQuery == "/admin/get_json_geo") {
+        String file = File.ReadAllText("json/geo.json");
+        Byte[] buf = Encoding.UTF8.GetBytes(file);
+        cont.Response.ContentLength64 = buf.Length;
+        cont.Response.OutputStream.Write(buf, 0, buf.Length);
+        Console.WriteLine("200 - Send geo.json " + cont.Request.Url.PathAndQuery);
+        return true;
       }
       Helper.WriteError("404 - Section in get_json not found " + cont.Request.Url.PathAndQuery + "!");
       cont.Response.StatusCode = 404;

Lora-Map/Properties/AssemblyInfo.cs

@@ -10,7 +10,7 @@ using System.Runtime.InteropServices;
 [assembly: AssemblyConfiguration("")]
 [assembly: AssemblyCompany("Fraunhofer FIT")]
 [assembly: AssemblyProduct("Lora-Map")]
-[assembly: AssemblyCopyright("Copyright ©  2018 - 22.04.2019")]
+[assembly: AssemblyCopyright("Copyright ©  2018 - 24.04.2019")]
 [assembly: AssemblyTrademark("Fraunhofer FIT, BlubbFish")]
 [assembly: AssemblyCulture("")]
 [assembly: NeutralResourcesLanguage("de-DE")]
@@ -33,8 +33,8 @@ using System.Runtime.InteropServices;
 // Sie können alle Werte angeben oder Standardwerte für die Build- und Revisionsnummern verwenden,
 // übernehmen, indem Sie "*" eingeben:
 // [assembly: AssemblyVersion("1.0.*")]
-[assembly: AssemblyVersion("1.2.2")]
-[assembly: AssemblyFileVersion("1.2.2")]
+[assembly: AssemblyVersion("1.2.3")]
+[assembly: AssemblyFileVersion("1.2.3")]
 
 /*
 * 1.1.1 Add Debian package config
@@ -47,4 +47,5 @@ using System.Runtime.InteropServices;
 * 1.2.0 #4 Possible to Ex and Import Setting
 * 1.2.1 #6 Load the map from the Device
 * 1.2.2 Bugfix, if only recieve panic packet with gps data, update the marker on the map also
+* 1.2.3 #9 display polygons and marker on the map
 */

Lora-Map/Server.cs

@@ -43,6 +43,9 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
       if(!File.Exists("json/names.json")) {
         File.WriteAllText("json/names.json", "{}");
       }
+      if(!File.Exists("json/geo.json")) {
+        File.WriteAllText("json/geo.json", "{}");
+      }
     }
 
     protected override void Backend_MessageIncomming(Object sender, BackendEvent e) {
@@ -100,6 +103,12 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
           return SendJsonResponse(this.FindMapLayer(cont.Request), cont);
         } else if(cont.Request.Url.PathAndQuery.StartsWith("/maps/")) {
           return SendFileResponse(cont, "resources", false);
+        } else if(cont.Request.Url.PathAndQuery.StartsWith("/getgeo")) {
+          Byte[] buf = Encoding.UTF8.GetBytes(File.ReadAllText("json/geo.json"));
+          cont.Response.ContentLength64 = buf.Length;
+          cont.Response.OutputStream.Write(buf, 0, buf.Length);
+          Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
+          return true;
         }
       } catch(Exception e) {
         Helper.WriteError("500 - " + e.Message);

Lora-Map/resources/admin/js/menu.js

@@ -17,7 +17,14 @@ function menu_eximport() {
   var ajaxnames = new XMLHttpRequest();
   ajaxnames.onreadystatechange = function () {
     if (ajaxnames.readyState === 4 && ajaxnames.status === 200) {
-      ExImport.ParseJson(ajaxnames.responseText);
+      var ajaxgeo = new XMLHttpRequest();
+      ajaxgeo.onreadystatechange = function () {
+        if (ajaxgeo.readyState === 4 && ajaxgeo.status === 200) {
+          ExImport.ParseJson(ajaxnames.responseText, ajaxgeo.responseText);
+        }
+      };
+      ajaxgeo.open("GET", "http://{%REQUEST_URL_HOST%}/admin/get_json_geo", true);
+      ajaxgeo.send();
     }
   };
   ajaxnames.open("GET", "http://{%REQUEST_URL_HOST%}/admin/get_json_names", true);
@@ -256,19 +263,21 @@ var NamesEditor = {
 };
 
 var ExImport = {
-  ParseJson: function (jsonstring) {
+  ParseJson: function (jsonnames, jsongeo) {
     html = "<div id='eximport'><div class='title'>Ex- und Import der Einstellungen</div>";
     html += "<div class='names'>names.json (Namen und Icons)<br/><textarea id='ex_names'></textarea> <img src='../icons/general/save.png' onclick='ExImport.SaveNames()' class='pointer'></div>";
+    html += "<div class='names'>geo.json (Layer on the MAP)<br/><textarea id='ex_geo'></textarea> <img src='../icons/general/save.png' onclick='ExImport.SaveGeo()' class='pointer'></div>";
     html += "</div>";
     document.getElementById("content").innerHTML = html;
-    document.getElementById("ex_names").value = jsonstring;
+    document.getElementById("ex_names").value = jsonnames;
+    document.getElementById("ex_geo").value = jsongeo;
   },
   SaveNames: function () {
     var savenames = new XMLHttpRequest();
     savenames.onreadystatechange = function () {
       if (savenames.readyState === 4) {
         if (savenames.status === 200) {
-          alert("Änderungen gespeichert!");
+          alert("Änderungen an names.json gespeichert!");
         } else if (savenames.status === 501) {
           alert("Ein Fehler ist aufgetreten (invalid JSON)!");
         }
@@ -276,5 +285,19 @@ var ExImport = {
     };
     savenames.open("POST", "http://{%REQUEST_URL_HOST%}/admin/set_json_names", true);
     savenames.send(document.getElementById("ex_names").value);
+  },
+  SaveGeo: function () {
+    var savegeo = new XMLHttpRequest();
+    savegeo.onreadystatechange = function () {
+      if (savegeo.readyState === 4) {
+        if (savegeo.status === 200) {
+          alert("Änderungen an geo.json gespeichert!");
+        } else if (savegeo.status === 501) {
+          alert("Ein Fehler ist aufgetreten (invalid JSON)!");
+        }
+      }
+    };
+    savegeo.open("POST", "http://{%REQUEST_URL_HOST%}/admin/set_json_geo", true);
+    savegeo.send(document.getElementById("ex_geo").value);
   }
 };

Lora-Map/resources/index.html

@@ -33,6 +33,7 @@
           <li><a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> licensed <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
           <li><a href="https://www.freepik.com/" title="Freepik">Freepik</a> licensed <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
           <li><a href="http://www.famfamfam.com/about/" title="Silk Iconset">Silk Iconset</a> licensed <a href="http://creativecommons.org/licenses/by/2.5/" title="Creative Commons BY 2.5" target="_blank">CC 2.5 BY</a></li>
+          <li><a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
         </ul>
       </div>
     </div>

Lora-Map/resources/js/map.js

@@ -1,4 +1,4 @@
-var mymap = L.map('bigmap').setView(["{%START_LOCATION%}"], 14);
+var mymap = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
 
 GetMapLayers();
 function GetMapLayers() {
@@ -49,6 +49,40 @@ function GetMapLayers() {
   layergetter.send();
 }
 
+GetGeoLayer();
+function GetGeoLayer() {
+  var geogetter = new XMLHttpRequest();
+  geogetter.onreadystatechange = function () {
+    if (geogetter.readyState === 4 && geogetter.status === 200) {
+      var geo = JSON.parse(geogetter.responseText);
+      L.geoJSON(geo, {
+        style: function (features) {
+          if (typeof features.properties["stroke-width"] === "undefined") {
+            //alert("no!");
+          }
+          return {
+            color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
+            weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
+            opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"],
+            fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"],
+            fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"]
+          };
+        },
+        onEachFeature: function (feature, layer) {
+          if (feature.geometry.type !== "LineString") {
+            layer.bindPopup(feature.properties.name);
+          }
+        },
+        pointToLayer: function (geoJsonPoint, latlng) {
+          return L.marker(latlng, { icon: L.icon({iconUrl: "css/icons/cctv.png", iconSize: [32,32]}) });
+        }
+      }).addTo(mymap);
+    }
+  };
+  geogetter.open("GET", "http://{%REQUEST_URL_HOST%}/getgeo", true);
+  geogetter.send();
+}
+
 mymap.on("click", hidePanel);
 
 function hidePanel(e) {