GeoJSON styles as functions

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))

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}
           />}