diff --git a/package.json b/package.json
index 1e9df8ae90..6597039c64 100644
--- 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
index 2431780eeb..d42ba35121 100644
--- 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: ()=> (
{title}
)}))};
}
@@ -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
index 0af4c0391d..c25209e1ff 100644
--- 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
index f0bfadac9f..16fb133b2c 100644
--- 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
index aaf6656705..d7ed526bfe 100644
--- 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
index 974e31e96d..a76dfe3f5c 100644
--- 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
index abe0dd7290..b91f139abd 100644
--- 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
index fca25cc056..86a72eac8b 100644
--- 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();