geofence.html

<!--
  Copyright 2014 IBM Corp.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/html" data-template-name="geofence">
    <div>
        <link rel="stylesheet" href="geofence/js/leaflet/leaflet.css" />
        <link rel="stylesheet" href="geofence/js/Leaflet.draw/dist/leaflet.draw.css" />
        <link rel="stylesheet" href="geofence/js/L.GeoSearch/src/css/l.geosearch.css" />
        <div id="node-geofence-map" style="width: 100%; height: 400px"></div>
    </div>

    <br/>
    <div class="form-row">
        <label for="node-input-floor"> _ Floor</label>
        <input type="text" id="node-input-floor" style="width:25%;" placeholder="ground">
        <span style="padding-left:30px; padding-right:8px"> &#8254; Ceiling</span>
        <input type="text" id="node-input-ceiling" style="width:25%;" placeholder="infinity">
    </div>

    <div class="form-row">
        <label for="node-input-inside"><i class="fa fa-sign-in"></i> Action</label>
        <select id="node-input-inside" value="true" style="width: 70%;">
            <option value="true">only points inside</option>
            <option value="false">only points outside</option>
            <option value="both">add "inarea" property</option>
        </select>
    </div>

    <div class="form-row">
      <label style="width: 70%" for="node-input-worldmap">Enable output of zones to WorldMap node </label>
      <input style="width: 20%" type="checkbox" id="node-input-worldmap">
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Geofence name">
    </div>
</script>


<script type="text/html" data-help-name="geofence">
    <p>A simple geofence filter node</p>
    <p>It supports circle and polygons, and will filter all messages that either
    fall inside or outside the region described depending on the selected
    mode.</p>
    <p>This node requires input messages one of the following (checked in order):
    <ul>
        <li><i>msg.payload.lat</i> &amp; <i>msg.payload.lon</i></li>
        <li><i>msg.location.lat</i> &amp; <i>msg.location.lon</i></li>
        <li><i>msg.lat</i> &amp; <i>msg.lon</i></li>
    </ul>
    </p>
    <p>Alternatively it will add <b>msg.location.inarea</b> to the msg. with values of true/false</p>
    <p>In this mode if the node has a name then <b>msg.location.isat</b> will be an array
    containing a list of named regions that the point is inside of and <b>msg.location.distance</b>
    will contain an object of name, distance pairs. Where distance is the distance in metres to
    from the point to the centroid of the region.</p>
    <h2>WorldMap</h2>
    <p>If the checkbox is enabled then a second output will be added to the node. This output sends an
    object describing the bounds of the geofence in a format that the WorldMap node understands.</p>
    <p>This output is triggered by setting <code>msg.payload.action</code> to <code>"send"</code>.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('geofence',{
        category: 'location',
        color:"#DEBD5C",
        defaults: {
            name: {value:""},
            mode: {value: "circle"},
            inside: {value: "true"},
            rad: {value: 0},
            points: {value: []},
            centre: {value: {latitude:0.0, longitude: 0.0}},
            floor: {value: ""},
            ceiling: {value : ""},
            worldmap: {value: false},
            outputs: {value: 1}
        },
        inputs:1,
        outputs:1,
        outputLabels: ["filtered","fence"],
        icon: "white-globe.png",
        label: function() {
            return this.name||"geofence";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function () {
          function setupMap(node) {

            var map = L.map('node-geofence-map').setView([51.0, -1.4], 6);
            var basemaps = {};
            window.node_geofence_map = map;

            var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 20,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

            }).addTo(map);
            basemaps["OSM"] = osmLayer;
            var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution:'Tiles &copy; Esri',
                maxNativeZoom:17,
                maxZoom:20
            });
            basemaps["Satellite"] = Esri_WorldImagery;
            layercontrol = L.control.layers(basemaps,null).addTo(map);

            //extend Leaflet to create a GeoJSON layer from a TopoJSON file
            L.TopoJSON = L.GeoJSON.extend({
                addData: function (data) {
                var geojson, key;
                if (data.type === "Topology") {
                    for (key in data.objects) {
                        if (data.objects.hasOwnProperty(key)) {
                            geojson = topojson.feature(data, data.objects[key]);
                            L.GeoJSON.prototype.addData.call(this, geojson);
                        }
                    }
                    return this;
                }
                L.GeoJSON.prototype.addData.call(this, data);
                return this;
                }
            });
            L.topoJson = function (data, options) {
                return new L.TopoJSON(data, options);
            };
            //create an empty geojson layer
            //with a style and a popup on click
            var geojson = L.topoJson(null, {
                style: function(feature) {
                    return {
                        color: "#8080c0",
                        opacity: 1,
                        weight: 2,
                        fill: "#888",
                        fillOpacity: 0
                    }
                }
            }).addTo(map);

            async function getGeoData(url) {
                let response = await fetch(url);
                let data = await response.json();
                return data;
            }

            var loadedCountries = false;
            //fetch the geojson and add it to our geojson layer if osm tiles fail to load
            osmLayer.on("tileerror", function (error, tile) {
                if (!loadedCountries) {
                    getGeoData('geofence/js/world-50m-flat.json').then(data => geojson.addData(data));
                    loadedCountries = true;
                }
            });

            var drawnItems = new L.FeatureGroup();
            map.addLayer(drawnItems);

            var drawControl = new L.Control.Draw({
              draw: {
                  position: 'topleft',
                  polyline: false,
                  marker: false,
                  circle: {
                      shapeOptions: {
                        color: '#662d91'
                      }
                    }
              },
              edit: false
            });
            map.addControl(drawControl);

            var drawControl2 = new L.Control.Draw({
              draw: false,
              edit: {
                featureGroup: drawnItems
              }
            });

            map.on('draw:created', function (e) {
              console.log("created",e);
              var type = e.layerType;    // never used ???
              var layer = e.layer;
              layer.shape = "geofence";
              drawnItems.addLayer(layer);
              drawControl.removeFrom(map);
              drawControl2.addTo(map);
            });

            map.on('draw:edited', function (e) {
                console.log("edited",e);
                var layers = e.layers;
                layers.eachLayer(function (layer) {
                    layer.shape = "geofence";
                    drawnItems.addLayer(layer);
                });
            });

            map.on('draw:deleted', function (e) {
              console.log("deleted",e);
              //re-enable drawing
              drawControl2.removeFrom(map);
              drawControl.addTo(map);
            });

            new L.Control.GeoSearch({
              provider: new L.GeoSearch.Provider.OpenStreetMap(),
              position: 'bottomleft',
              showMarker: false,
              zoomLevel: 12
            }).addTo(map);

            if (node.mode === "circle") {
              if (node.rad != 0) {
                //console.log("found circle - ");
                var circ = L.circle(
                  [node.centre.latitude, node.centre.longitude],
                  node.rad,
                  { color: '#662d91' }
                );
                circ.addTo(drawnItems);
                console.log(circ);
                console.log(circ.getBounds());
                map.fitBounds(
                  circ.getBounds(),
                  { padding: L.point(30, 30) }
                );
                drawControl.removeFrom(map);
                drawControl2.addTo(map);
              }

            }
            else {
              if (node.points.length >= 3) {
                //console.log("found polygon ");
                var corners = [];
                for (x in node.points) {
                  var latlng = L.latLng(node.points[x].latitude, node.points[x].longitude);
                  corners.push(latlng);
                }
                var poly = L.polygon(corners);
                poly.addTo(drawnItems);
                map.fitBounds(
                  poly.getBounds(),
                  { padding: L.point(30, 30) }
                );
                drawControl.removeFrom(map);
                drawControl2.addTo(map);
              }
            }
            map.invalidateSize(true);
          }

          var n = this;
            console.log("loading leaflet");
            $.getScript('geofence/js/leaflet/leaflet-src.js')
            .done(function(data, textStatus, jqxhr) {
              $.getScript('geofence/js/Leaflet.draw/dist/leaflet.draw.js')
              .done(function(data, textStatus, jqxhr){
                $.getScript('geofence/js/L.GeoSearch/src/js/l.control.geosearch.js')
                .done(function(data, textStatus, jqxhr){
                  $.getScript('geofence/js/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap.js')
                  .done(function(data, textStatus, jqxhr) {
                    $.getScript('geofence/js/topojson.v1.min.js')
                    .done(function(data, textStatus, jqxhr) {
                      setupMap(n);
                    })
                    .fail(function(jqxhr, settings, exception ){
                      console.log("failed5");
                      console.log(exception);
                      console.log(exception.stack);
                    });
                  })
                  .fail(function(jqxhr, settings, exception ){
                    console.log("failed4");
                    console.log(exception);
                    console.log(exception.stack);
                  });
                })
                .fail(function(jqxhr, settings, exception ){
                  console.log("failed3");
                  console.log(exception);
                  console.log(exception.stack);
                });
              })
              .fail(function(jqxhr, settings, exception ){
                console.log("failed2");
                console.log(exception);
                console.log(exception.stack);
              });
            })
            .fail(function(jqxhr, settings, exception ) {
              console.log("failed");
              console.log(exception);
              console.log(exception.stack);
            });

        },
        oneditsave: function() {
          var map = window.node_geofence_map;
          var n = this;

          map.eachLayer(function(layer){
            if (layer.shape === "geofence") {
              console.log("GeoJSON");
              console.log(layer.toGeoJSON());
              if (layer._radius) {
                n.mode = "circle";
                n.centre = {latitude: layer._latlng.lat, longitude: layer._latlng.lng};
                n.rad = layer._mRadius;
                n.points = [];
              }
              else {
                n.mode ="polyline";
                n.points = [];
                n.rad = 0;
                n.centre = {};
                for (x in layer._latlngs) {
                  if (layer._latlngs[x].lng < -180) {
                    layer._latlngs[x].lng += 360
                  }
                  n.points.push({latitude: layer._latlngs[x].lat, longitude: layer._latlngs[x].lng});
                }
              }
            }
          });
          delete window.node_geofence_map;

          if ($('#node-input-worldmap').is(":checked")) {
            this.outputs = 2;
          } else {
            this.outputs = 1;
          }
        },
        oneditresize: function(){
          if (window.node_geofence_map) {
            window.node_geofence_map.invalidateSize(true);
          }
        }
    });
</script>