From 34a1e87c1e3c9381f09e814fb1befbc000e165ea Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Fri, 9 Apr 2021 09:14:42 +0300
Subject: [PATCH] GeoJSON styles as functions
---
.../components/facet_results/LeafletMap.js | 6 +-
.../perspectives/sampo/Perspective1.js | 67 +++++++++++++------
2 files changed, 48 insertions(+), 25 deletions(-)
diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js
index 251e70c5..f6d77e3e 100644
--- a/src/client/components/facet_results/LeafletMap.js
+++ b/src/client/components/facet_results/LeafletMap.js
@@ -478,14 +478,14 @@ class LeafletMap extends React.Component {
leafletGeoJSONBufferLayer.addTo(leafletOverlay).addTo(this.leafletMap)
}
- const { geojsonMarkerOptions, geojsonPolygonOptions, createPopup } = leafletOverlay.options
+ const { createGeoJSONPointStyle, createGeoJSONPolygonStyle, createPopup } = leafletOverlay.options
const leafletGeoJSONLayer = L.geoJSON(layerObj.geoJSON, {
// style for GeoJSON Points
pointToLayer: (feature, latlng) => {
- return L.circleMarker(latlng, geojsonMarkerOptions)
+ return L.circleMarker(latlng, createGeoJSONPointStyle(feature))
},
// style for GeoJSON Polygons
- style: geojsonPolygonOptions,
+ style: createGeoJSONPolygonStyle,
// add popups
onEachFeature: (feature, layer) => {
layer.bindPopup(createPopup(feature.properties))
diff --git a/src/client/components/perspectives/sampo/Perspective1.js b/src/client/components/perspectives/sampo/Perspective1.js
index b789c03f..0f87adaa 100644
--- a/src/client/components/perspectives/sampo/Perspective1.js
+++ b/src/client/components/perspectives/sampo/Perspective1.js
@@ -81,15 +81,27 @@ const Perspective1 = props => {
// buffer: {
// distance: 200,
// units: 'metres',
- // style: {
- // color: '#6E6E6E',
- // dashArray: '3, 5'
+ // style: feature => {
+ // if (feature.properties.laji.includes('poistettu kiinteä muinaisjäännös')) {
+ // return {
+ // fillOpacity: 0,
+ // weight: 0
+ // }
+ // } else {
+ // return {
+ // color: '#6E6E6E',
+ // dashArray: '3, 5'
+ // }
+ // }
// }
// },
- // // this layer includes only GeoJSON Polygons, define style for them
- // geojsonPolygonOptions: {
- // color: '#dd2c00',
- // cursor: 'pointer'
+ // createGeoJSONPointStyle: feature => null, // this layer includes only GeoJSON Polygons
+ // createGeoJSONPolygonStyle: feature => {
+ // // console.log(feature)
+ // return {
+ // color: '#dd2c00',
+ // cursor: 'pointer'
+ // }
// },
// createPopup: data => {
// let html = ''
@@ -117,20 +129,31 @@ const Perspective1 = props => {
// buffer: {
// distance: 200,
// units: 'metres',
- // style: {
- // color: '#6E6E6E',
- // dashArray: '3, 5'
+ // style: feature => {
+ // if (feature.properties.laji.includes('poistettu kiinteä muinaisjäännös')) {
+ // return {
+ // fillOpacity: 0,
+ // weight: 0
+ // }
+ // } else {
+ // return {
+ // color: '#6E6E6E',
+ // dashArray: '3, 5'
+ // }
+ // }
// }
// },
- // // this layer includes only GeoJSON points, define style for them
- // geojsonMarkerOptions: {
- // radius: 8,
- // fillColor: '#dd2c00',
- // color: '#000',
- // weight: 1,
- // opacity: 1,
- // fillOpacity: 0.8
+ // createGeoJSONPointStyle: feature => {
+ // return {
+ // radius: 8,
+ // fillColor: '#dd2c00',
+ // color: '#000',
+ // weight: 1,
+ // opacity: 1,
+ // fillOpacity: 0.8
+ // }
// },
+ // createGeoJSONPolygonStyle: feature => null, // this layer includes only GeoJSON points
// createPopup: data => {
// let html = ''
// const name = data.kohdenimi
@@ -175,10 +198,10 @@ const Perspective1 = props => {
attribution: 'Semantic Computing Research Group'
}
]}
- activeLayers={[
- // 'arkeologiset_kohteet_alue'
- // 'arkeologiset_kohteet_piste'
- ]}
+ // activeLayers={[
+ // 'arkeologiset_kohteet_alue',
+ // 'arkeologiset_kohteet_piste'
+ // ]}
layerControlExpanded
showError={props.showError}
/>}
--
GitLab