Initial multiservice support for search

- Changed internal representation from nominatim to GeoJson - Fixed geosolutions-it#1507 Now Openlayers uses default style too - Fixes geosolutions-it#1505 Now the markers are correctly displaced - The selector for layers with marker generate marker layers only inside the selector (still to remove loading from flat layer to get better performances) - Initial support for WFS as external services - Moved businness logic from UI into a new epic
offtherailz · Feb 24, 2017 · bd3cf3a · bd3cf3a
1 parent ba1ed63
commit bd3cf3a
Show file tree

Hide file tree

Showing 20 changed files with 471 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -145,6 +145,7 @@
     "turf-bbox": "3.0.10",
     "turf-buffer": "3.0.10",
     "turf-intersect": "3.0.10",
+    "turf-point-on-surface": "3.0.10",
     "turf-union": "3.0.10",
     "url": "0.10.3",
     "w3c-schemas": "1.3.1",

diff --git a/tests.webpack.js b/tests.webpack.js
@@ -1,3 +1,3 @@
-var context = require.context('./web', true, /(-test\.jsx?)|(-test-chrome\.jsx?)$/);
+var context = require.context('./web/client/epics', true, /(-test\.jsx?)|(-test-chrome\.jsx?)$/);
 context.keys().forEach(context);
 module.exports = context;
diff --git a/web/client/actions/__tests__/layers-test.js b/web/client/actions/__tests__/layers-test.js
@@ -168,7 +168,7 @@ describe('Test correctness of the layers actions', () => {
         expect(action.type).toBe(UPDATE_SETTINGS);
         expect(action.options).toEqual({opacity: 0.5, size: 500});
     });
-    it('get layer capabilities', (done) => {
+    it('get layer capabilities', () => {
         const layer = {
             id: "TEST_ID",
             name: 'testworkspace:testlayer',
@@ -180,13 +180,5 @@ describe('Test correctness of the layers actions', () => {
         };
         const actionCall = getLayerCapabilities(layer);
         expect(actionCall).toExist();
-        actionCall((action)=> {
-            expect(action).toExist();
-            expect(action.options).toExist();
-            expect(action.type === UPDATE_NODE);
-            if (action.options.capabilities) {
-                done();
-            }
-        });
     });
 });
diff --git a/web/client/actions/__tests__/search-test.js b/web/client/actions/__tests__/search-test.js
@@ -12,10 +12,12 @@ var {
     TEXT_SEARCH_LOADING,
     TEXT_SEARCH_ERROR,
     TEXT_SEARCH_STARTED,
+    TEXT_SEARCH_ITEM_SELECTED,
     searchResultLoaded,
     searchTextLoading,
     searchResultError,
-    textSearch
+    textSearch,
+    selectSearchItem
 } = require('../search');
 
 describe('Test correctness of the search actions', () => {
@@ -49,5 +51,12 @@ describe('Test correctness of the search actions', () => {
         expect(retval2.results).toEqual(testVal);
         expect(retval2.append).toBe(true);
     });
+    it('serch item selected', () => {
+        const retval = selectSearchItem("A", "B");
+        expect(retval).toExist();
+        expect(retval.type).toBe(TEXT_SEARCH_ITEM_SELECTED);
+        expect(retval.item).toEqual("A");
+        expect(retval.mapConfig).toBe("B");
+    });
 
 });
diff --git a/web/client/actions/search.js b/web/client/actions/search.js
@@ -16,11 +16,14 @@ const TEXT_SEARCH_TEXT_CHANGE = 'TEXT_SEARCH_TEXT_CHANGE';
 const TEXT_SEARCH_LOADING = 'TEXT_SEARCH_LOADING';
 const TEXT_SEARCH_ERROR = 'TEXT_SEARCH_ERROR';
 
-function searchResultLoaded(results, append=false) {
+const TEXT_SEARCH_ITEM_SELECTED = 'TEXT_SEARCH_ITEM_SELECTED';
+
+function searchResultLoaded(results, append=false, services) {
     return {
         type: TEXT_SEARCH_RESULTS_LOADED,
         results: results,
-        append: append
+        append: append,
+        services
     };
 }
 
@@ -64,11 +67,21 @@ function addMarker(itemPosition) {
     };
 }
 
-function textSearch(searchText) {
+function textSearch(searchText, {services = null} = {}) {
     return {
         type: TEXT_SEARCH_STARTED,
-        searchText
+        searchText,
+        services
+    };
+}
+
+function selectSearchItem(item, mapConfig) {
+    return {
+        type: TEXT_SEARCH_ITEM_SELECTED,
+        item,
+        mapConfig
     };
+
 }
 
 
@@ -82,12 +95,14 @@ module.exports = {
     TEXT_SEARCH_RESET,
     TEXT_SEARCH_ADD_MARKER,
     TEXT_SEARCH_TEXT_CHANGE,
+    TEXT_SEARCH_ITEM_SELECTED,
     searchTextLoading,
     searchResultError,
     searchResultLoaded,
     textSearch,
     resultsPurge,
     resetSearch,
     addMarker,
-    searchTextChanged
+    searchTextChanged,
+    selectSearchItem
 };
diff --git a/web/client/api/Nominatim.js b/web/client/api/Nominatim.js
@@ -9,18 +9,18 @@ var axios = require('../libs/ajax');
 const urlUtil = require('url');
 const assign = require('object-assign');
 const DEFAULT_URL = 'nominatim.openstreetmap.org';
-const DEFAUTL_REVERSE_URL = 'nominatim.openstreetmap.org/reverse';
+const DEFAULT_REVERSE_URL = 'nominatim.openstreetmap.org/reverse';
 const defaultOptions = {
     format: 'json',
     bounded: 0,
-    addressdetails: 1
+    polygon_geojson: 1
 };
 /**
  * API for local config
  */
 const Api = {
     geocode: function(text, options) {
-        var params = assign({q: text}, options || {}, defaultOptions);
+        var params = assign({q: text}, defaultOptions, options || {});
         var url = urlUtil.format({
             protocol: window.location.protocol,
             host: DEFAULT_URL,
@@ -32,7 +32,7 @@ const Api = {
         const params = assign({lat: coords.lat, lon: coords.lng}, options || {}, defaultOptions);
         const url = urlUtil.format({
             protocol: window.location.protocol,
-            host: DEFAUTL_REVERSE_URL,
+            host: DEFAULT_REVERSE_URL,
             query: params
         });
         return axios.get(url);

diff --git a/web/client/api/searchText.js b/web/client/api/searchText.js
@@ -7,8 +7,8 @@
  */
 const WFS = require('./WFS');
 const assign = require('object-assign');
-
-
+const GeoCodeUtils = require('../utils/GeoCodeUtils');
+/*
 const toNominatim = (fc) =>
     fc.features && fc.features.map( (f) => ({
         boundingbox: f.properties.bbox,
@@ -17,18 +17,22 @@ const toNominatim = (fc) =>
         display_name: `${f.properties.STATE_NAME} (${f.properties.STATE_ABBR})`
 
     }));
-
+*/
 
 module.exports = {
-    nominatim: (searchText) => require('./Nominatim').geocode(searchText).then( res => res.data),
+    nominatim: (searchText, {options = null} = {}) =>
+        require('./Nominatim')
+        .geocode(searchText, options)
+        .then( res => GeoCodeUtils.nominatimToGeoJson(res.data)),
     wfs: (searchText, {url, typeName, queriableAttributes, outputFormat="application/json", predicate ="ILIKE", ...params }) => {
-        return WFS.getFeatureSimple(url,
-            assign({
-                maxFeatures: 10,
-                startIndex: 0,
-                typeName,
-                outputFormat,
-                cql_filter: queriableAttributes.map( attr => `${attr} ${predicate} '%${searchText}%'`).join(' OR ')
-            }, params)).then( response => toNominatim(response ));
+        return WFS
+            .getFeatureSimple(url, assign({
+                    maxFeatures: 10,
+                    startIndex: 0,
+                    typeName,
+                    outputFormat,
+                    cql_filter: queriableAttributes.map( attr => `${attr} ${predicate} '%${searchText}%'`).join(' OR ')
+                }, params))
+            .then( response => response.features );
     }
 };
diff --git a/web/client/components/map/leaflet/Feature.jsx b/web/client/components/map/leaflet/Feature.jsx
@@ -37,11 +37,16 @@ var getPointLayer = function(pointToLayer, geojson, latlng, options) {
             latlng,
             {
                 icon: L.icon({
-                        iconUrl: options.style.iconUrl
+                    iconUrl: options.style.iconUrl,
+                    iconSize: options.style.iconSize,
+                    shadowSize: options.style.shadowSize,
+                    iconAnchor: options.style.iconAnchor,
+                    shadowAnchor: options.style.shadowAnchor,
+                    popupAnchor: options.style.popupAnchor
                 })
             });
     }
-    return new L.Marker(latlng);
+    return L.marker(latlng);
 };
 
 var geometryToLayer = function(geojson, options) {

diff --git a/web/client/components/map/openlayers/plugins/VectorLayer.js b/web/client/components/map/openlayers/plugins/VectorLayer.js
@@ -142,25 +142,57 @@ Layers.registerType('vector', {
                 };
             }
 
-            if (options.style.iconUrl) {
-                style = {
-                    image: new ol.style.Icon(({
-                      anchor: [0.5, 1],
-                      anchorXUnits: 'fraction',
-                      anchorYUnits: 'fraction',
-                      src: options.style.iconUrl
-                    }))
+            if (options.style.iconUrl ) {
+                let markerStyle = [new ol.style.Style({
+                      image: new ol.style.Icon(({
+                        anchor: options.iconAnchor || [0.5, 1],
+                        anchorXUnits: options.iconAnchor ? 'pixels' : 'fraction',
+                        anchorYUnits: options.iconAnchor ? 'pixels' : 'fraction',
+                        src: options.style.iconUrl
+                      }))
+                })];
+                if (options.shadowUrl) {
+                    markerStyle = [new ol.style.Style({
+                          image: new ol.style.Icon(({
+                            anchor: [12, 41],
+                            anchorXUnits: 'pixels',
+                            anchorYUnits: 'pixels',
+                            src: options.style.shadowUrl || markerShadow
+                          }))
+                      }), markerStyle];
+                }
+                style = (feature) => {
+                    const type = feature.getGeometry().getType();
+                    switch (type) {
+                        case "Point":
+                        case "MultiPoint":
+                            return markerStyle;
+                        default:
+                            return styleFunction(feature);
+                    }
                 };
+            } else {
+                style = new ol.style.Style(style);
             }
-
-            style = new ol.style.Style(style);
         }
 
         return new ol.layer.Vector({
             msId: options.id,
             source: source,
             zIndex: options.zIndex,
-            style: (options.styleName && !options.overrideOLStyle) ? () => {return defaultStyles[options.styleName]; } : style || styleFunction
+            style: (options.styleName && !options.overrideOLStyle) ? (feature) => {
+                if (options.styleName === "marker") {
+                    const type = feature.getGeometry().getType();
+                    switch (type) {
+                        case "Point":
+                        case "MultiPoint":
+                            return defaultStyles.marker;
+                        default:
+                            break;
+                    }
+                }
+                return defaultStyles[options.styleName];
+            } : style || styleFunction
         });
     },
     update: (layer, newOptions, oldOptions) => {

diff --git a/web/client/components/mapcontrols/search/SearchResult.jsx b/web/client/components/mapcontrols/search/SearchResult.jsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const {get} = require('lodash');
+
+
+let SearchResult = React.createClass({
+    propTypes: {
+        item: React.PropTypes.object,
+        displayName: React.PropTypes.string,
+        idField: React.PropTypes.string,
+        icon: React.PropTypes.string,
+        onItemClick: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            displayName: "properties.display_name",
+            idField: "id",
+            icon: "properties.icon"
+        };
+    },
+    onClick() {
+        let item = this.props.item;
+        this.props.onItemClick(item);
+    },
+    render() {
+        if (this.props.item === undefined) {
+            return null;
+        }
+        let item = this.props.item;
+        return (
+            <div key={item.osm_id} className="search-result NominatimResult" onClick={this.onClick}>
+                <div className="icon"> <img src={item.icon} /></div>
+                {get(item, this.props.displayName) }
+            </div>
+        );
+    }
+});
+
+module.exports = SearchResult;