From 68b35f88d351f7efa6c5cc2533c415adb7b8859c Mon Sep 17 00:00:00 2001 From: Jonathan Beezley Date: Mon, 28 Nov 2016 14:49:20 -0500 Subject: [PATCH 1/8] Enable selectionAPI on features --- web_external/js/views/adapters/Adapters.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/web_external/js/views/adapters/Adapters.js b/web_external/js/views/adapters/Adapters.js index 407cc7e9..0c98adf5 100644 --- a/web_external/js/views/adapters/Adapters.js +++ b/web_external/js/views/adapters/Adapters.js @@ -153,6 +153,17 @@ minerva.rendering.geo.GeometryRepresentation = minerva.rendering.geo.defineMapLa */ this.init = function (container, dataset, visProperties, data) { this.geoJsLayer = container.createLayer('feature'); + + // force selection api on all features for this layer + var _createFeature = this.geoJsLayer.createFeature; + this.geoJsLayer.createFeature = function (name, arg) { + if (!arg) { + arg = {} + } + arg.selectionAPI = true; + return _createFeature.call(this, name, arg); + } + this._injectStyle(data, visProperties, data.summary || {}); try { var reader = geo.createFileReader(this.readerType, {layer: this.geoJsLayer}); From f13108486aa61dd14fff42e6e1ffaa13322a38a0 Mon Sep 17 00:00:00 2001 From: Jonathan Beezley Date: Mon, 28 Nov 2016 15:16:01 -0500 Subject: [PATCH 2/8] Collect geojson properties on click --- web_external/js/views/adapters/Adapters.js | 1 + .../js/views/widgets/WMSFeatureInfoWidget.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/web_external/js/views/adapters/Adapters.js b/web_external/js/views/adapters/Adapters.js index 0c98adf5..8dc29d67 100644 --- a/web_external/js/views/adapters/Adapters.js +++ b/web_external/js/views/adapters/Adapters.js @@ -153,6 +153,7 @@ minerva.rendering.geo.GeometryRepresentation = minerva.rendering.geo.defineMapLa */ this.init = function (container, dataset, visProperties, data) { this.geoJsLayer = container.createLayer('feature'); + dataset.geoJsLayer = this.geoJsLayer; // force selection api on all features for this layer var _createFeature = this.geoJsLayer.createFeature; diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index 8b3f59ef..673db7d2 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -7,6 +7,24 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ .map(function (dataset) { return dataset.get('_id'); }) .value(); + var geojsonProperties = _.chain(this.parentView.collection.models) + .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) + .map(function (dataset) { + var features = dataset.geoJsLayer.features(); + var props = []; + _.each(features, function (feature) { + var hits = feature.pointSearch(event.geo); + if (hits && hits.found) { + props.push.apply(props, _.pluck(hits.found, 'properties')); + } + }); + return props; + }) + .flatten(true) + .value(); + + console.log(geojsonProperties); + var coord = event.geo; var pnt = this.map.gcsToDisplay(coord); From c0b15e18d7a065494cb71da72c86b4a2fbd7bb43 Mon Sep 17 00:00:00 2001 From: Jonathan Beezley Date: Mon, 28 Nov 2016 15:27:50 -0500 Subject: [PATCH 3/8] Add semicolons for linting --- web_external/js/views/adapters/Adapters.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_external/js/views/adapters/Adapters.js b/web_external/js/views/adapters/Adapters.js index 8dc29d67..79f89e5b 100644 --- a/web_external/js/views/adapters/Adapters.js +++ b/web_external/js/views/adapters/Adapters.js @@ -159,11 +159,11 @@ minerva.rendering.geo.GeometryRepresentation = minerva.rendering.geo.defineMapLa var _createFeature = this.geoJsLayer.createFeature; this.geoJsLayer.createFeature = function (name, arg) { if (!arg) { - arg = {} + arg = {}; } arg.selectionAPI = true; return _createFeature.call(this, name, arg); - } + }; this._injectStyle(data, visProperties, data.summary || {}); try { From c841bdebb0ff35ad52e15b43a0acb7c849b99937 Mon Sep 17 00:00:00 2001 From: "doruk.ozturk" Date: Wed, 30 Nov 2016 09:51:03 -0500 Subject: [PATCH 4/8] Change the structure to match with WMS response --- .../js/views/widgets/WMSFeatureInfoWidget.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index 673db7d2..ca331baa 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -7,9 +7,11 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ .map(function (dataset) { return dataset.get('_id'); }) .value(); - var geojsonProperties = _.chain(this.parentView.collection.models) + var geojsonLayers = []; + _.chain(this.parentView.collection.models) .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) .map(function (dataset) { + var layer = {}; var features = dataset.geoJsLayer.features(); var props = []; _.each(features, function (feature) { @@ -18,12 +20,10 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ props.push.apply(props, _.pluck(hits.found, 'properties')); } }); - return props; + layer['id'] = dataset.get('name'); + layer['properties'] = props; + geojsonLayers.push(layer); }) - .flatten(true) - .value(); - - console.log(geojsonProperties); var coord = event.geo; var pnt = this.map.gcsToDisplay(coord); From f956cbd9bf6d048c0cad6e5a5330908a41e9691b Mon Sep 17 00:00:00 2001 From: "doruk.ozturk" Date: Thu, 1 Dec 2016 09:08:14 -0500 Subject: [PATCH 5/8] Refactor callInfo method for clarity --- .../js/views/widgets/WMSFeatureInfoWidget.js | 121 +++++++++++------- .../widgets/wmsFeatureInfoContent.jade | 1 + 2 files changed, 78 insertions(+), 44 deletions(-) create mode 100644 web_external/templates/widgets/wmsFeatureInfoContent.jade diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index ca331baa..bc3f47fe 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -1,60 +1,79 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ callInfo: function (event) { - // Query layers with given coordinates - var displayedDatasets = _.chain(this.parentView.collection.models) - .filter(function (set) { return set.get('displayed') && set.getDatasetType() !== 'geojson'; }) - .map(function (dataset) { return dataset.get('_id'); }) - .value(); - var geojsonLayers = []; - _.chain(this.parentView.collection.models) - .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) - .map(function (dataset) { - var layer = {}; - var features = dataset.geoJsLayer.features(); - var props = []; - _.each(features, function (feature) { - var hits = feature.pointSearch(event.geo); - if (hits && hits.found) { - props.push.apply(props, _.pluck(hits.found, 'properties')); - } + var that = this + + function getActiveWmsLayers () { + return _.chain(that.parentView.collection.models) + .filter(function (set) { return set.get('displayed') && set.getDatasetType() !== 'geojson'; }) + .map(function (dataset) { return dataset.get('_id'); }) + .value(); + } + + function getActiveGeojsonLayers () { + var geojsonLayers = []; + _.chain(that.parentView.collection.models) + .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) + .map(function (dataset) { + var layer = {}; + var features = dataset.geoJsLayer.features(); + var props = []; + _.each(features, function (feature) { + var hits = feature.pointSearch(event.geo); + if (hits && hits.found) { + props.push.apply(props, _.pluck(hits.found, 'properties')); + } + }); + layer['id'] = dataset.get('name'); + layer['properties'] = props; + geojsonLayers.push(layer); }); - layer['id'] = dataset.get('name'); - layer['properties'] = props; - geojsonLayers.push(layer); - }) - var coord = event.geo; - var pnt = this.map.gcsToDisplay(coord); + return geojsonLayers + } + + function getInspectMapParams(event) { + var mapParams = {}; + var coord = event.geo; + var pnt = that.map.gcsToDisplay(coord); - // Spherical Mercator projection. - var mapBounds = this.map.bounds(undefined, 'EPSG:3857'); + // Spherical Mercator projection. + var mapBounds = that.map.bounds(undefined, 'EPSG:3857'); - if (mapBounds.left > mapBounds.right) { - // 20037508.34 is the maximum extent of the Spherical Mercator projection. - mapBounds.right = 20037508.34 + (20037508.34 - mapBounds.right); + if (mapBounds.left > mapBounds.right) { + // 20037508.34 is the maximum extent of the Spherical Mercator projection. + mapBounds.right = 20037508.34 + (20037508.34 - mapBounds.right); + } + mapParams['x'] = Math.round(pnt.x); + mapParams['y'] = Math.round(pnt.y); + mapParams['bbox'] = mapBounds.left + ',' + mapBounds.bottom + ',' + mapBounds.right + ',' + mapBounds.top; + mapParams['width'] = that.map.node().width(); + mapParams['height'] = that.map.node().height(); + return mapParams; } - var bbox = mapBounds.left + ',' + mapBounds.bottom + ',' + mapBounds.right + ',' + mapBounds.top; - var width = this.map.node().width(); - var height = this.map.node().height(); - var x = Math.round(pnt.x); - var y = Math.round(pnt.y); - var panel = this; + var activeWmsLayers = getActiveWmsLayers(); + var mapParams = getInspectMapParams(event); - if (displayedDatasets.length > 0) { + if (activeWmsLayers.length > 0) { girder.restRequest({ path: '/minerva_get_feature_info', type: 'GET', data: { - 'activeLayers': displayedDatasets, - 'bbox': bbox, - 'x': x, - 'y': y, - 'width': width, - 'height': height} + 'activeLayers': activeWmsLayers, + 'bbox': mapParams.bbox, + 'x': mapParams.x, + 'y': mapParams.y, + 'width': mapParams.width, + 'height': mapParams.height} }).done(function (data) { + var obj = JSON.parse(data); + var activeGeojsonLayers = getActiveGeojsonLayers(); + var inspectResp = obj.features.concat(activeGeojsonLayers); + that.renderContents(inspectResp); + + /* var layer_div = document.createElement('div'); layer_div.className = 'accordion'; var tbl_div = document.createElement('div'); @@ -83,10 +102,13 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ }); tbl_div.appendChild(tbl_body); layer_div.appendChild(tbl_div); - panel.content = panel.content + layer_div.outerHTML; - $('#m-wms-info-dialog').html(panel.content); - $('#m-wms-info-dialog').dialog('open'); + that.content = that.content + layer_div.outerHTML; + $('#m-wms-info-dialog').html(that.content); + */ }); + } else { + var activeGeojsonLayers = getActiveGeojsonLayers(); + that.renderContents(activeGeojsonLayers); } }, @@ -104,6 +126,17 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ 'srs=EPSG:3857&INFO_FORMAT=application/json&format=image%2Fpng'; }, + renderContents: function (inspectResp) { + $('#m-wms-info-dialog').html( + minerva.templates.wmsFeatureInfoContent({ + contents: inspectResp + }) + ); + if (inspectResp.length !== 0) { + $('#m-wms-info-dialog').dialog('open'); + } + }, + render: function () { this.$el.append(minerva.templates.wmsFeatureInfoWidget()); } diff --git a/web_external/templates/widgets/wmsFeatureInfoContent.jade b/web_external/templates/widgets/wmsFeatureInfoContent.jade new file mode 100644 index 00000000..91bd9e58 --- /dev/null +++ b/web_external/templates/widgets/wmsFeatureInfoContent.jade @@ -0,0 +1 @@ +h1 Hooray \ No newline at end of file From 8fc98de509c3e86f427c5e21e37cee0db63c5fc1 Mon Sep 17 00:00:00 2001 From: "doruk.ozturk" Date: Thu, 1 Dec 2016 09:26:53 -0500 Subject: [PATCH 6/8] Pass the content to the template --- web_external/js/views/widgets/WMSFeatureInfoWidget.js | 2 +- web_external/templates/widgets/wmsFeatureInfoContent.jade | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index bc3f47fe..44337810 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -129,7 +129,7 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ renderContents: function (inspectResp) { $('#m-wms-info-dialog').html( minerva.templates.wmsFeatureInfoContent({ - contents: inspectResp + layersInfo: inspectResp }) ); if (inspectResp.length !== 0) { diff --git a/web_external/templates/widgets/wmsFeatureInfoContent.jade b/web_external/templates/widgets/wmsFeatureInfoContent.jade index 91bd9e58..1f8a65ac 100644 --- a/web_external/templates/widgets/wmsFeatureInfoContent.jade +++ b/web_external/templates/widgets/wmsFeatureInfoContent.jade @@ -1 +1 @@ -h1 Hooray \ No newline at end of file +h4 #{layersInfo} \ No newline at end of file From 423574e7cb1c461072f4423139513b2c10b1eec1 Mon Sep 17 00:00:00 2001 From: "doruk.ozturk" Date: Thu, 1 Dec 2016 12:55:42 -0500 Subject: [PATCH 7/8] Layout the table templates and fix geojson props --- .../js/views/widgets/WMSFeatureInfoWidget.js | 59 ++++--------------- .../widgets/wmsFeatureInfoContent.jade | 14 ++++- 2 files changed, 25 insertions(+), 48 deletions(-) diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index 44337810..10e37896 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -1,36 +1,34 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ callInfo: function (event) { + var that = this; - var that = this - - function getActiveWmsLayers () { + function getActiveWmsLayers() { return _.chain(that.parentView.collection.models) .filter(function (set) { return set.get('displayed') && set.getDatasetType() !== 'geojson'; }) .map(function (dataset) { return dataset.get('_id'); }) .value(); } - function getActiveGeojsonLayers () { + function getActiveGeojsonLayers() { var geojsonLayers = []; _.chain(that.parentView.collection.models) .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) .map(function (dataset) { var layer = {}; var features = dataset.geoJsLayer.features(); - var props = []; _.each(features, function (feature) { var hits = feature.pointSearch(event.geo); - if (hits && hits.found) { - props.push.apply(props, _.pluck(hits.found, 'properties')); + if (hits && hits.found.length !== 0) { + layer['properties'] = hits.found[0].properties; } }); layer['id'] = dataset.get('name'); - layer['properties'] = props; geojsonLayers.push(layer); + return geojsonLayers; }); - return geojsonLayers + return geojsonLayers; } function getInspectMapParams(event) { @@ -72,39 +70,6 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ var activeGeojsonLayers = getActiveGeojsonLayers(); var inspectResp = obj.features.concat(activeGeojsonLayers); that.renderContents(inspectResp); - - /* - var layer_div = document.createElement('div'); - layer_div.className = 'accordion'; - var tbl_div = document.createElement('div'); - var tbl_body = document.createElement('table'); - var odd_even = false; - var header = false; - var obj = JSON.parse(data); - $.each(obj.features, function () { - var tbl_row; - if (!header) { - tbl_row = tbl_body.insertRow(); - tbl_row.className = 'header'; - $.each(this.properties, function (k) { - var cell = tbl_row.insertCell(); - cell.appendChild(document.createTextNode(k ? k.toString() : '')); - }); - header = true; - } - tbl_row = tbl_body.insertRow(); - tbl_row.className = odd_even ? 'odd' : 'even'; - $.each(this.properties, function (k, v) { - var cell = tbl_row.insertCell(); - cell.appendChild(document.createTextNode(v ? v.toString() : '')); - }); - odd_even = !odd_even; - }); - tbl_div.appendChild(tbl_body); - layer_div.appendChild(tbl_div); - that.content = that.content + layer_div.outerHTML; - $('#m-wms-info-dialog').html(that.content); - */ }); } else { var activeGeojsonLayers = getActiveGeojsonLayers(); @@ -127,12 +92,12 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ }, renderContents: function (inspectResp) { - $('#m-wms-info-dialog').html( - minerva.templates.wmsFeatureInfoContent({ - layersInfo: inspectResp - }) - ); if (inspectResp.length !== 0) { + $('#m-wms-info-dialog').html( + minerva.templates.wmsFeatureInfoContent({ + layersInfo: inspectResp + }) + ); $('#m-wms-info-dialog').dialog('open'); } }, diff --git a/web_external/templates/widgets/wmsFeatureInfoContent.jade b/web_external/templates/widgets/wmsFeatureInfoContent.jade index 1f8a65ac..f1414c08 100644 --- a/web_external/templates/widgets/wmsFeatureInfoContent.jade +++ b/web_external/templates/widgets/wmsFeatureInfoContent.jade @@ -1 +1,13 @@ -h4 #{layersInfo} \ No newline at end of file +if layersInfo + each layer in layersInfo + h4= layer.id + .accordion + div + table + tbody + tr(class="header") + each value, key in layer.properties + td= key + tr(class="even") + each value, key in layer.properties + td= value From 9a95646b0297c0a2e6f6d3688b30846b3e109203 Mon Sep 17 00:00:00 2001 From: Jonathan Beezley Date: Mon, 5 Dec 2016 13:01:23 -0500 Subject: [PATCH 8/8] Only get properties from valid geojson data objects --- web_external/js/views/widgets/WMSFeatureInfoWidget.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/web_external/js/views/widgets/WMSFeatureInfoWidget.js b/web_external/js/views/widgets/WMSFeatureInfoWidget.js index 10e37896..ebfff48e 100644 --- a/web_external/js/views/widgets/WMSFeatureInfoWidget.js +++ b/web_external/js/views/widgets/WMSFeatureInfoWidget.js @@ -15,12 +15,17 @@ minerva.views.WmsFeatureInfoWidget = minerva.View.extend({ _.chain(that.parentView.collection.models) .filter(function (set) { return set.get('displayed') && set.getDatasetType() === 'geojson'; }) .map(function (dataset) { + var i; var layer = {}; var features = dataset.geoJsLayer.features(); _.each(features, function (feature) { var hits = feature.pointSearch(event.geo); - if (hits && hits.found.length !== 0) { - layer['properties'] = hits.found[0].properties; + if (hits && hits.found) { + for (i = hits.found.length - 1; i >= 0; i -= 1) { + if (hits.found[i].properties) { + layer['properties'] = hits.found[i].properties; + } + } } }); layer['id'] = dataset.get('name');