#9523 Geocarousel section - Click on marker issue (#9529)

* #9523 Geocorousel section - Click on marker issue * remove unused dependencies * fix tests
geosolutions-it · Oct 2, 2023 · eeb0a10 · eeb0a10
1 parent 2fa78a5
commit eeb0a10
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -296,8 +296,6 @@
     "stream": "0.0.2",
     "tinycolor2": "1.4.1",
     "turf-bbox": "3.0.10",
-    "turf-buffer": "3.0.10",
-    "turf-intersect": "3.0.10",
     "turf-point": "2.0.1",
     "turf-point-on-surface": "3.0.10",
     "turf-union": "3.0.10",

diff --git a/web/client/components/geostory/common/enhancers/withPopupSupport.jsx b/web/client/components/geostory/common/enhancers/withPopupSupport.jsx
@@ -16,8 +16,6 @@ import {
     withHandlers
 } from 'recompose';
 import uuidv1 from 'uuid/v1';
-import buffer from "turf-buffer";
-import intersect from "turf-intersect";
 import MapInfoViewer from '../../../common/MapInfoViewer';
 import { getDefaultInfoFormat } from '../../../common/enhancers/withIdentifyPopup';
 import { isEqual } from "lodash";
@@ -39,74 +37,16 @@ function isGeoStoryVectorLayer(layerInfo) {
     return layerInfo && layerInfo.indexOf('geostory-vector') === 0;
 }
 
-export const getIntersectedFeature = (layer, request, metadata) => {
-    const point = {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [request.lng, request.lat]
-        }
-    };
-    let unit = metadata && metadata.units;
-    switch (unit) {
-    case "m":
-        unit = "meters";
-        break;
-    case "deg":
-        unit = "degrees";
-        break;
-    case "mi":
-        unit = "miles";
-        break;
-    default:
-        unit = "meters";
-    }
-    let resolution = metadata && metadata.resolution || 1;
-    let bufferedPoint = buffer(point, (metadata.buffer || 1) * resolution, unit);
-    const intersected = (layer.features || []).filter(
-        (feature) => {
-            try {
-                if (feature.type === "FeatureCollection" && feature.features && feature.features.length) {
-                    return feature.features.reduce((p, c) => {
-                        // if required use the geodesic geometry
-                        let ft = c.properties.useGeodesicLines && c.properties.geometryGeodesic ? {...c,
-                            geometry: c.properties.geometryGeodesic
-                        } : c;
-                        return p || intersect(bufferedPoint, resolution && metadata.buffer && unit ? buffer(ft, 1, "meters") : ft);
-                    }, false);
-                }
-                return intersect(bufferedPoint, resolution && metadata.buffer && unit ? buffer(feature, 1, "meters") : feature);
-
-            } catch (e) {
-                return false;
-            }
-        }
-
-    );
-    return {
-        data: {
-            crs: null,
-            features: intersected,
-            totalFeatures: "unknown",
-            type: "FeatureCollection"
-        },
-        queryParams: request,
-        layerMetadata: metadata
-    };
-};
-
 export const withCarouselMarkerInteraction = compose(
     connect((state)=>({sections: getAllGeoCarouselSections(state)}), {onClickMarker: update}),
     withHandlers({
-        onClickMarker: ({onClickMarker = () => {}, sections = {}}) => (responses, layerInfo, popups) => {
-            const {response: { features: [{contentRefId} = {}] = []} = {}} = find(responses,
-                ({queryParams: {request} = {}, layerMetadata: {title} = {}} = {})=> !request && title.toLowerCase() === layerInfo) || {};
-            const result = find(sections, ({contents}) => find(contents, {id: contentRefId}));
+        onClickMarker: ({onClickMarker = () => {}}) => (responses, layerInfo, popups) => {
+            const {response: { features: [selectedFeature] = []} = {}} = find(responses,
+                ({queryParams: {request} = {}, layerMetadata: {layerId} = {}} = {})=> !request && layerId.toLowerCase() === layerInfo) || {};
             let _popup = {popups: []};
-            if (result) {
-                const {id: contentId, title = ''} = find(result.contents, {id: contentRefId}) || {};
-                onClickMarker(`sections[{"id":"${result.id}"}].contents[{"id":"${contentId}"}].carouselToggle`, true);
+            if (selectedFeature?.properties) {
+                const { sectionId, contentId, title } = selectedFeature?.properties;
+                onClickMarker(`sections[{"id":"${sectionId}"}].contents[{"id":"${contentId}"}].carouselToggle`, true);
                 if (title) {
                     _popup = {popups: popups.map((popup) => ({...popup, component: ()=> (<div className={"ms-geostory-carousel-viewer"}>{title}</div>)}))};
                 }
@@ -175,7 +115,7 @@ const withIdentifyRequest  = mapPropsStream(props$ => {
                                         featuresCrs: response.featuresCrs
                                     }
                                 })
-                        ) : Observable.of(getIntersectedFeature(layer, request, metadata))
+                        ) : Observable.empty()
                     )
                         .catch((e) => ({
                             error: e.data || e.statusText || e.status,

diff --git a/web/client/components/map/openlayers/__tests__/VectorStyle-test.js b/web/client/components/map/openlayers/__tests__/VectorStyle-test.js
@@ -131,8 +131,8 @@ describe('Test VectorStyle', () => {
         expect(olStyle[0].getStroke()).toBe(null);
         expect(olStyle[0].getFill()).toBe(null);
         expect(olStyle[0].getImage().getSrc()).toBe(shadowImageUrl);
-        expect(olStyle[0].getImage().getAnchor()).toEqual([12, 12]);
-        expect(olStyle[0].getImage().getSize()).toEqual(null);
+        expect(olStyle[0].getImage().getAnchor()).toEqual([15, 42]);
+        expect(olStyle[0].getImage().getSize()).toEqual([30, 42]);
         expect(olStyle[0].getImage().getOrigin()).toEqual([0, 0]);
         // ******** marker ********
         expect(olStyle[1].getFill()).toBe(null);
@@ -162,8 +162,8 @@ describe('Test VectorStyle', () => {
         expect(olStyle[0].getStroke()).toBe(null);
         expect(olStyle[0].getFill()).toBe(null);
         expect(olStyle[0].getImage().getSrc()).toBe(shadowImageUrl);
-        expect(olStyle[0].getImage().getAnchor()).toEqual([12, 12]);
-        expect(olStyle[0].getImage().getSize()).toEqual(null);
+        expect(olStyle[0].getImage().getAnchor()).toEqual([15, 42]);
+        expect(olStyle[0].getImage().getSize()).toEqual([30, 42]);
         expect(olStyle[0].getImage().getOrigin()).toEqual([0, 0]);
         // **************** marker ****************
         expect(olStyle[1].getFill()).toBe(null);

diff --git a/web/client/utils/GeoStoryUtils.js b/web/client/utils/GeoStoryUtils.js
@@ -643,11 +643,19 @@ export function getVectorLayerFromContents({
         id: `geostory-vector-${id}`,
         name: `geostory-vector-${id}`,
         type: 'vector',
+        // TODO: review style using geostyler format
+        // this will help remove legacy code such as VectorStyle file for ol
         features: contents.reduce((acc, content, idx) => [
             ...acc, ...(
                 (content?.features || [])
                     .map((feature) => ({
                         ...feature,
+                        properties: {
+                            ...feature.properties,
+                            title: content.title,
+                            sectionId: id,
+                            contentId: content.id
+                        },
                         contentRefId: content.id,
                         ...(featureStyle && {
                             style: featureStyle({ content, feature }, idx)

diff --git a/web/client/utils/MarkerUtils.js b/web/client/utils/MarkerUtils.js
@@ -34,6 +34,7 @@ const loadGlyphs = (font) => {
 
 const extraMarkers = {
     size: [36, 46],
+    shadowSize: [30, 42],
     margin: [3, 2],
     colors: ['red', 'orange-dark', 'orange', 'yellow', 'blue-dark', 'blue', 'cyan', 'purple', 'violet',
         'pink', 'green-dark', 'green', 'green-light', 'black'],

diff --git a/web/client/utils/__tests__/GeoStoryUtils-test.js b/web/client/utils/__tests__/GeoStoryUtils-test.js
@@ -535,6 +535,7 @@ describe("GeoStory Utils", () => {
         const contents = [
             {
                 id: 'content-1',
+                title: 'Title',
                 features: [{
                     properties: {},
                     geometry: { type: 'Point', coordinates: [0, 0] }
@@ -555,7 +556,11 @@ describe("GeoStory Utils", () => {
             type: 'vector',
             features: [
                 {
-                    properties: {},
+                    properties: {
+                        title: 'Title',
+                        sectionId: 'section-id',
+                        contentId: 'content-1'
+                    },
                     geometry: { type: 'Point', coordinates: [ 0, 0 ] },
                     contentRefId: 'content-1'
                 }
@@ -574,6 +579,7 @@ describe("GeoStory Utils", () => {
             contents: [
                 {
                     id: 'content-1',
+                    title: 'Title',
                     features: [{
                         properties: {},
                         geometry: { type: 'Point', coordinates: [0, 0] },
@@ -592,7 +598,11 @@ describe("GeoStory Utils", () => {
             type: 'vector',
             features: [
                 {
-                    properties: {},
+                    properties: {
+                        title: 'Title',
+                        sectionId: 'section-id',
+                        contentId: 'content-1'
+                    },
                     geometry: { type: 'Point', coordinates: [ 0, 0 ] },
                     contentRefId: 'content-1',
                     style: {
@@ -613,6 +623,7 @@ describe("GeoStory Utils", () => {
             contents: [
                 {
                     id: 'content-1',
+                    title: 'Title',
                     features: [{
                         properties: {},
                         geometry: { type: 'Point', coordinates: [0, 0] }
@@ -630,7 +641,11 @@ describe("GeoStory Utils", () => {
             type: 'vector',
             features: [
                 {
-                    properties: {},
+                    properties: {
+                        title: 'Title',
+                        sectionId: 'section-id',
+                        contentId: 'content-1'
+                    },
                     geometry: { type: 'Point', coordinates: [ 0, 0 ] },
                     contentRefId: 'content-1'
                 }

diff --git a/web/client/utils/openlayers/Icons.js b/web/client/utils/openlayers/Icons.js
@@ -56,21 +56,22 @@ export default {
     extra: {
         getIcon: (options = {}) => {
             const rotation = !isNil(options.style && options.style.rotation) ? options.style.rotation : 0;
-            return [new Style({
+            return [ new Style({
                 image: new Icon(({
                     rotation,
-                    anchor: [12, 12],
-                    anchorXUnits: 'pixels',
-                    anchorYUnits: 'pixels',
-                    src: extraMarkerShadow
+                    anchor: [0.5, 1],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'fraction',
+                    src: extraMarkerShadow,
+                    size: markers.shadowSize
                 }))
             }), new Style({
                 image: new Icon({
                     rotation,
                     src: extraMarker,
-                    anchor: [markers.size[0] / 2, markers.size[1]],
-                    anchorXUnits: 'pixels',
-                    anchorYUnits: 'pixels',
+                    anchor: [0.5, 1],
+                    anchorXUnits: 'fraction',
+                    anchorYUnits: 'fraction',
                     size: markers.size,
                     offset: [markers.colors.indexOf(options.style.iconColor || 'blue') * markers.size[0], markers.shapes.indexOf(options.style.iconShape || 'circle') * markers.size[1]]
                 }),

diff --git a/web/client/utils/openlayers/__tests__/Icons-test.js b/web/client/utils/openlayers/__tests__/Icons-test.js
@@ -26,10 +26,10 @@ describe('Icons openlayers styles', () => {
         const shadow = styles[0];
         expect(shadow).toExist();
         const shadowImage = shadow.getImage();
-        expect(shadowImage.getAnchor()).toEqual([12, 12]);
+        expect(shadowImage.getAnchor()).toEqual([15, 42]);
         expect(shadowImage.getOpacity()).toEqual(1);
         expect(shadowImage.getRotation()).toEqual(1);
-        expect(shadowImage.getSize()).toEqual(null);
+        expect(shadowImage.getSize()).toEqual([30, 42]);
         const icon = styles[1];
         expect(icon).toExist();
         const iconImage = icon.getImage();