From 532972a4f70c3e833d1c47ad4e65da84bf091ebd Mon Sep 17 00:00:00 2001 From: crisner Date: Tue, 7 Jan 2020 21:47:59 +0530 Subject: [PATCH 1/4] Implement changes to fractracker mobile layer --- example/layers.js | 2 +- src/fracTrackerMobileLayer.js | 122 ++++++++++++++++++++++++++++------ src/layerData.json | 10 +-- 3 files changed, 106 insertions(+), 28 deletions(-) diff --git a/example/layers.js b/example/layers.js index 010fc5c70..0c2f385f0 100644 --- a/example/layers.js +++ b/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.fractrackerMobileLayer(); var EonetFiresLayer = L.geoJSON.eonetFiresLayer(); diff --git a/src/fracTrackerMobileLayer.js b/src/fracTrackerMobileLayer.js index 3df54585b..b3ffb0617 100644 --- a/src/fracTrackerMobileLayer.js +++ b/src/fracTrackerMobileLayer.js @@ -1,23 +1,101 @@ -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('

Id : {OBJECTID}
FT_MV_ID : {FT_MV_ID}
Long : {Long}
Lat : {Lat}
Caption : {caption}
issue : {issue}
facility : {facility}
Location : {location}
URL : {URL2}

', 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.FractrackerMobileLayer = 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); + } + + $.getJSON(fractrackerMobile_url, function(data) { + console.log(data); + self.parseData(data); + if (typeof self._map.spin === 'function') { + self._map.spin(false); + } + }); + })(); + }, + + parseData: function(data) { + if (!!data) { + for (i = 0; i < data.features.length; i++) { + this.addMarker(data.features[i]); + } + } + }, + + getMarker: function(data) { + var coords = this.coordsToLatLng(data.geometry.geometries[0].coordinates); + var lat = coords.lat; + var lng = coords.lng; + var 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 marker; + if (!isNaN((lat)) && !isNaN((lng)) ) { + marker = new L.circleMarker([lat, lng], { radius: 5, color: '#e4458b'}) + .bindPopup('User image
'+ description + '
Lat : ' + lat + '
Lon : '+ lng + '
Reported on : ' + date + '
Modified on : ' + dateModified + '
' + 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.fractrackerMobileLayer = function(options) { + return new L.GeoJSON.FractrackerMobileLayer(options); }; diff --git a/src/layerData.json b/src/layerData.json index 99c06f1d3..eb7e6dfb5 100644 --- a/src/layerData.json +++ b/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 } From af5e51f5fde2b9dbeae82cbb57f95ad3a2baecfa Mon Sep 17 00:00:00 2001 From: crisner Date: Wed, 8 Jan 2020 12:34:23 +0530 Subject: [PATCH 2/4] Update layer in AllLayers.js and refactor code --- src/AllLayers.js | 4 ++-- src/fracTrackerMobileLayer.js | 29 +++++++++++++++-------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/AllLayers.js b/src/AllLayers.js index c3dced657..cbe06cca3 100644 --- a/src/AllLayers.js +++ b/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, diff --git a/src/fracTrackerMobileLayer.js b/src/fracTrackerMobileLayer.js index b3ffb0617..6f15e2983 100644 --- a/src/fracTrackerMobileLayer.js +++ b/src/fracTrackerMobileLayer.js @@ -1,4 +1,4 @@ -L.GeoJSON.FractrackerMobileLayer = L.GeoJSON.extend( +L.GeoJSON.FracTrackerMobile = L.GeoJSON.extend( { options: { }, @@ -43,14 +43,14 @@ L.GeoJSON.FractrackerMobileLayer = L.GeoJSON.extend( self._map.spin(true); } - $.getJSON(fractrackerMobile_url, function(data) { - console.log(data); - self.parseData(data); - if (typeof self._map.spin === 'function') { - self._map.spin(false); - } - }); - })(); + return $.getJSON(fractrackerMobile_url); + + })().done(function(data) { + self.parseData(data); + if (typeof self._map.spin === 'function') { + self._map.spin(false); + } + }); }, parseData: function(data) { @@ -62,18 +62,19 @@ L.GeoJSON.FractrackerMobileLayer = L.GeoJSON.extend( }, getMarker: function(data) { - var coords = this.coordsToLatLng(data.geometry.geometries[0].coordinates); + 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; + 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 ? 'User image' : ''; var marker; if (!isNaN((lat)) && !isNaN((lng)) ) { marker = new L.circleMarker([lat, lng], { radius: 5, color: '#e4458b'}) - .bindPopup('User image
'+ description + '
Lat : ' + lat + '
Lon : '+ lng + '
Reported on : ' + date + '
Modified on : ' + dateModified + '
' + organizationName); + .bindPopup(imageElement + '
'+ description + '
Lat : ' + lat + '
Lon : '+ lng + '
Reported on : ' + date + '
Modified on : ' + dateModified + '
' + organizationName); } return marker; }, @@ -96,6 +97,6 @@ L.GeoJSON.FractrackerMobileLayer = L.GeoJSON.extend( ); -L.geoJSON.fractrackerMobileLayer = function(options) { - return new L.GeoJSON.FractrackerMobileLayer(options); +L.geoJSON.fracTrackerMobile = function(options) { + return new L.GeoJSON.FracTrackerMobile(options); }; From a2698f25df9b618c80477e4d84d77144c176c116 Mon Sep 17 00:00:00 2001 From: crisner Date: Wed, 8 Jan 2020 12:58:35 +0530 Subject: [PATCH 3/4] Update layer name change in layers.js --- example/layers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/layers.js b/example/layers.js index 0c2f385f0..107706d91 100644 --- a/example/layers.js +++ b/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 = L.geoJSON.fractrackerMobileLayer(); +var FracTracker_mobile = L.geoJSON.fracTrackerMobile(); var EonetFiresLayer = L.geoJSON.eonetFiresLayer(); From 046483eeb61d69f1c3c10ec1d88f1e66ae9173c6 Mon Sep 17 00:00:00 2001 From: crisner Date: Wed, 8 Jan 2020 14:40:42 +0530 Subject: [PATCH 4/4] Add basic tests --- Gruntfile.js | 6 ++++-- _SpecRunner.html | 4 ++++ spec/javascripts/fracTrackerMobileLayer.spec.js | 12 ++++++++++++ src/fracTrackerMobileLayer.js | 2 +- 4 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 spec/javascripts/fracTrackerMobileLayer.spec.js diff --git a/Gruntfile.js b/Gruntfile.js index f786ee048..a3c62950f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -42,7 +42,8 @@ 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' } } }, @@ -50,7 +51,8 @@ module.exports = function(grunt) { 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", diff --git a/_SpecRunner.html b/_SpecRunner.html index a7bdef2e6..8dee71e2a 100644 --- a/_SpecRunner.html +++ b/_SpecRunner.html @@ -38,8 +38,12 @@ + + + + diff --git a/spec/javascripts/fracTrackerMobileLayer.spec.js b/spec/javascripts/fracTrackerMobileLayer.spec.js new file mode 100644 index 000000000..29cfc244f --- /dev/null +++ b/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); + }); + +}); \ No newline at end of file diff --git a/src/fracTrackerMobileLayer.js b/src/fracTrackerMobileLayer.js index 6f15e2983..79e1d9693 100644 --- a/src/fracTrackerMobileLayer.js +++ b/src/fracTrackerMobileLayer.js @@ -55,7 +55,7 @@ L.GeoJSON.FracTrackerMobile = L.GeoJSON.extend( parseData: function(data) { if (!!data) { - for (i = 0; i < data.features.length; i++) { + for ( var i = 0; i < data.features.length; i++) { this.addMarker(data.features[i]); } }