Implement changes to fractracker mobile layer

Gruntfile.js

@@ -42,15 +42,17 @@ module.exports = function(grunt) {
           },
           dist: {
             files: {
-              "dist/util/layersBrowser_babel.js": "src/util/layersBrowser.js"
+              "dist/util/layersBrowser_babel.js": "src/util/layersBrowser.js",
+              'dist/fracTrackerMobileLayer.js': 'src/fracTrackerMobileLayer.js'
             }
           }
         },
 
         jasmine: {
           src: ['dist/LeafletEnvironmentalLayers.js',
                 'src/util/embedControl.js',
-                'dist/util/layersBrowser.js'
+                'dist/util/layersBrowser.js',
+                'dist/fracTrackerMobileLayer.js'
               ],
           options: {
             specs: "spec/javascripts/*spec.js",

_SpecRunner.html

@@ -38,8 +38,12 @@
 
   <script src="dist/util/layersBrowser.js"></script>
 
+  <script src="dist/fracTrackerMobileLayer.js"></script>
+
   <script src="spec/javascripts/embedControl.spec.js"></script>
 
+  <script src="spec/javascripts/fracTrackerMobileLayer.spec.js"></script>
+
   <script src="spec/javascripts/indigenousLanguagesLayers_spec.js"></script>
 
   <script src="spec/javascripts/indigenousTerritoriesLayers_spec.js"></script>

example/layers.js

@@ -109,7 +109,7 @@ var IndigenousLandsLanguages = L.layerGroup.indigenousLayers('Languages');
 var IndigenousLandsTreaties = L.layerGroup.indigenousLayers('Treaties');
 
 var Wisconsin_NM = wisconsinLayer(map);
-var FracTracker_mobile = fracTrackerMobileLayer(map);
+var FracTracker_mobile = L.geoJSON.fracTrackerMobile();
 
 var EonetFiresLayer = L.geoJSON.eonetFiresLayer();
 

spec/javascripts/fracTrackerMobileLayer.spec.js

@@ -0,0 +1,12 @@
+describe('FracTrackerMobile Layer', function() {
+
+  var mapContainer = document.createElement('div');
+  var map = L.map(mapContainer);
+  var FracTracker_mobile = L.geoJSON.fracTrackerMobile();
+
+  it('adds layer to map', function() {
+      map.addLayer(FracTracker_mobile);
+      expect(Object.keys(map._layers)).toHaveLength(1);
+  });
+
+});

src/AllLayers.js

@@ -10,10 +10,10 @@ L.LayerGroup.environmentalLayers = L.LayerGroup.extend(
       layers0: ['purpleLayer', 'toxicReleaseLayer', 'pfasLayer', 'aqicnLayer', 'osmLandfillMineQuarryLayer', 'Unearthing'],
       layers1: ['purpleairmarker', 'skytruth', 'fractracker', 'odorreport', 'mapknitter', 'openaq', 'luftdaten', 'opensense'],
       layers2: ['Power', 'Petroleum', 'Telecom', 'Water'],
-      layers3: ['wisconsin', 'fracTrackerMobile'],
+      layers3: ['wisconsin'],
       layers4: ['income', 'americanIndian', 'asian', 'black', 'multi', 'hispanic', 'nonWhite', 'white', 'plurality'],
       layers5: ['clouds', 'cloudsClassic', 'precipitation', 'precipitationClassic', 'rain', 'rainClassic', 'snow', 'pressure', 'pressureContour', 'temperature', 'wind', 'city'],
-      layers6: ['eonetFiresLayer'],
+      layers6: ['eonetFiresLayer', 'fracTrackerMobile'],
 
       OpenInfraMap_Power: L.tileLayer('https://tiles-{s}.openinframap.org/power/{z}/{x}/{y}.png', {
         maxZoom: 18,

src/fracTrackerMobileLayer.js

@@ -1,23 +1,102 @@
-fracTrackerMobileLayer = function(map) {
-  var FracTracker_mobile = L.esri.featureLayer({
-    url: 'https://services.arcgis.com/jDGuO8tYggdCCnUJ/arcgis/rest/services/FracTrackerMobileAppNPCAMesaVerdeNationalPark_051416/FeatureServer/0/',
-    simplifyFactor: 1,
-  });
-
-  FracTracker_mobile.bindPopup(function(layer) {
-    return L.Util.template('<p><strong>Id : </strong>{OBJECTID}<br><strong>FT_MV_ID : </strong>{FT_MV_ID}<br><strong>Long : </strong>{Long}<br><strong>Lat :</strong> {Lat} <br> <strong>Caption : </strong>{caption} <br> <strong>issue :</strong> {issue} <br> <strong>facility :</strong> {facility} <br><strong> Location :</strong> {location} <br> <strong>URL :</strong> <a href={URL2}>{URL2}</a> <br> <img src={URL2} height="280" width="290"></p>', layer.feature.properties);
-  });
-
-  FracTracker_mobile.on('loading', function(e) {
-    if (typeof map.spin === 'function') {
-      map.spin(true);
-    }
-  });
-  FracTracker_mobile.on('load', function(e) {
-    if (typeof map.spin === 'function') {
-      map.spin(false);
-    }
-  });
-
-  return FracTracker_mobile;
+L.GeoJSON.FracTrackerMobile = L.GeoJSON.extend(
+  {
+    options: { },
+
+    initialize: function(options) {
+      options = options || {};
+      L.Util.setOptions(this, options);
+      this._layers = {};
+    },
+
+    onAdd: function(map) {
+      map.on('moveend', this.requestData, this);
+      this._map = map;
+      this.requestData();
+    },
+
+    onRemove: function(map) {
+      map.off('moveend', this.requestData, this);
+      if (typeof map.spin === 'function') {
+        map.spin(false);
+      }
+      this.clearLayers();
+      this._layers = {};
+    },
+
+    requestData: function() {
+      var self = this;
+
+      (function() {
+        var bounds = self._map.getBounds();
+        var northEast = bounds.getNorthEast();
+        var southWest = bounds.getSouthWest();
+        var left = southWest.lng;
+        var right = northEast.lng;
+        var top = northEast.lat;
+        var bottom = southWest.lat;
+        var polygon = left + ' ' + top + ',' + right + ' ' + top + ',' + right + ' ' + bottom + ',' + left + ' ' + bottom + ',' + left + ' ' + top;
+
+        var $ = window.jQuery;
+        var fractrackerMobile_url = 'https://cors-anywhere.herokuapp.com/https://api.fractracker.org/v1/data/report?page=1&results_per_page=250&q={"filters":[{"name":"geometry","op":"intersects","val":"SRID=4326;POLYGON((' + polygon +'))"}],"order_by":[{"field":"report_date","direction":"desc"},{"field":"id","direction":"desc"}]}';
+
+        if (typeof self._map.spin === 'function') {
+          self._map.spin(true);
+        }
+
+        return $.getJSON(fractrackerMobile_url);
+
+      })().done(function(data) {
+        self.parseData(data);
+        if (typeof self._map.spin === 'function') {
+          self._map.spin(false);
+        }
+      });
+    },
+
+    parseData: function(data) {
+      if (!!data) {
+        for ( var i = 0; i < data.features.length; i++) {
+          this.addMarker(data.features[i]);
+        }
+      }
+    },
+
+    getMarker: function(data) {
+      var coords = this.coordsToLatLng(data.geometry.coordinates || data.geometry.geometries[0].coordinates);
+      var lat = coords.lat;
+      var lng = coords.lng;
+      var description = data.properties.description ? data.properties.description : '';
+      var date = new Date(data.properties.report_date).toUTCString();
+      var dateModified = new Date(data.properties.modified_on).toUTCString();
+      var organizationName = data.properties.created_by.organization_name ? data.properties.created_by.organization_name : '';
+      var imageUrl = data.properties.images[0] && data.properties.images[0].properties.square;
+      var imageElement = imageUrl ? '<img src="'  + imageUrl + '" alt="User image" width="100%" />' : '';
+      var marker;
+      if (!isNaN((lat)) && !isNaN((lng)) ) {
+        marker = new L.circleMarker([lat, lng], { radius: 5, color: '#e4458b'})
+        .bindPopup(imageElement + '<br><strong>'+ description + '</strong><br>Lat : ' + lat + '<br>Lon : '+ lng + '<br>Reported on : ' + date + '<br>Modified on : ' + dateModified + '<br>' + organizationName);
+      }
+      return marker;
+    },
+
+    addMarker: function(data) {
+      var marker;
+      var key = data.id;
+      if (!this._layers[key]) {
+        marker = this.getMarker(data);
+        this._layers[key] = marker;
+        this.addLayer(marker);
+      }
+    },
+
+    coordsToLatLng: function(coords) {
+      return new L.LatLng(coords[1], coords[0]);
+    },
+
+  },
+);
+
+
+L.geoJSON.fracTrackerMobile = function(options) {
+  return new L.GeoJSON.FracTrackerMobile(options);
 };

src/layerData.json

@@ -59,14 +59,14 @@
       "type": "",
       "disclaimer": "Data from agency data sets to crowd-sourced data"
     },
-    "description": "FracTracker used the mobile app to help volunteers document the rich biodiversity in and near Mesa Verde",
-    "layer_desc": "User reports in NPCA-Mesa Verde National Park",
+    "description": "",
+    "layer_desc": "User reports",
     "icon": "#e4458b",
     "extents": {
       "bounds": [
-                  [51.536085601784755, -59.98535156250001],
-                  [27.800209937418252, -123.26660156250001]
-                ],
+        [-44.087585028245165, -148.88671875000003],
+        [76.63922560965888, 140.62500000000003]
+      ],
       "minZoom": 5,
       "maxZoom": 15
     }