LeafletMap: improve GeoJSON layer handling

src/client/components/facet_results/LeafletMap.js

@@ -222,9 +222,9 @@ class LeafletMap extends React.Component {
     if (this.props.showExternalLayers) {
       const basemaps = {
         [intl.get(`leafletMap.basemaps.mapbox.${MAPBOX_STYLE}`)]: mapboxBaseLayer
-      // [intl.get('leafletMap.basemaps.googleRoadmap')]: googleRoadmap,
-      // [intl.get('leafletMap.basemaps.topographicalMapNLS')]: topographicalMapNLS,
-      // [intl.get('leafletMap.basemaps.backgroundMapNLS')]: backgroundMapNLS
+        // [intl.get('leafletMap.basemaps.googleRoadmap')]: googleRoadmap,
+        // [intl.get('leafletMap.basemaps.topographicalMapNLS')]: topographicalMapNLS,
+        // [intl.get('leafletMap.basemaps.backgroundMapNLS')]: backgroundMapNLS
       }
       this.initOverLays(basemaps)
     }
@@ -250,8 +250,8 @@ class LeafletMap extends React.Component {
     // return 'https://avoin-karttakuva.maanmittauslaitos.fi/avoin/wmts/1.0.0/' +
     // layerID + '/default/WGS84_Pseudo-Mercator/{z}/{x}/{y}.png';
     return 'https://avoin-karttakuva.maanmittauslaitos.fi/avoin/wmts?service=WMTS' +
-    '&request=GetTile&version=1.0.0&layer=' + layerID + '&style=default' +
-    '&format=image/png&TileMatrixSet=WGS84_Pseudo-Mercator&TileMatrix={z}&TileRow={y}&TileCol={x}'
+      '&request=GetTile&version=1.0.0&layer=' + layerID + '&style=default' +
+      '&format=image/png&TileMatrixSet=WGS84_Pseudo-Mercator&TileMatrix={z}&TileRow={y}&TileCol={x}'
   }
 
   boundsToValues = () => {
@@ -308,6 +308,11 @@ class LeafletMap extends React.Component {
             layerIDs: this.state.activeOverlays,
             bounds: this.leafletMap.getBounds()
           })
+        } else {
+          this.props.showError({
+            title: '',
+            text: intl.get('leafletMap.wrongZoomLevelFHA')
+          })
         }
       }
     })
@@ -327,28 +332,28 @@ class LeafletMap extends React.Component {
       this.setState({ prevZoomLevel: this.leafletMap.getZoom() })
     })
     // Fired when zooming ends
-    // this.leafletMap.on('zoomend', () => {
-    //   if (this.state.activeOverlays.length > 0 && this.isSafeToLoadLargeLayersAfterZooming()) {
-    //     this.props.fetchGeoJSONLayers({
-    //       layerIDs: this.state.activeOverlays,
-    //       bounds: this.leafletMap.getBounds()
-    //     })
-    //   }
-    // })
+    this.leafletMap.on('zoomend', () => {
+      if (this.state.activeOverlays.length > 0 && this.isSafeToLoadLargeLayersAfterZooming()) {
+        this.props.fetchGeoJSONLayers({
+          layerIDs: this.state.activeOverlays,
+          bounds: this.leafletMap.getBounds()
+        })
+      }
+    })
     // Fired when dragging ends
-    // this.leafletMap.on('dragend', () => {
-    //   if (this.state.activeOverlays.length > 0 && this.isSafeToLoadLargeLayers()) {
-    //     this.props.fetchGeoJSONLayers({
-    //       layerIDs: this.state.activeOverlays,
-    //       bounds: this.leafletMap.getBounds()
-    //     })
-    //   }
-    // })
+    this.leafletMap.on('dragend', () => {
+      if (this.state.activeOverlays.length > 0 && this.isSafeToLoadLargeLayers()) {
+        this.props.fetchGeoJSONLayers({
+          layerIDs: this.state.activeOverlays,
+          bounds: this.leafletMap.getBounds()
+        })
+      }
+    })
   }
 
   isSafeToLoadLargeLayersAfterZooming = () => {
     return (this.leafletMap.getZoom() === 13 ||
-    (this.leafletMap.getZoom() >= 13 && this.state.prevZoomLevel > this.leafletMap.getZoom()))
+      (this.leafletMap.getZoom() >= 13 && this.state.prevZoomLevel > this.leafletMap.getZoom()))
   }
 
   isSafeToLoadLargeLayers = () => this.leafletMap.getZoom() >= 13
@@ -356,6 +361,8 @@ class LeafletMap extends React.Component {
   initOverLays = basemaps => {
     const fhaArchaeologicalSiteRegistryAreas = L.layerGroup([], {
       id: 'arkeologiset_kohteet_alue',
+      type: 'geoJSON',
+      source: 'FHA',
       // this layer includes only GeoJSON Polygons, define style for them
       geojsonMPolygonOptions: {
         color: '#dd2c00',
@@ -365,6 +372,8 @@ class LeafletMap extends React.Component {
     })
     const fhaArchaeologicalSiteRegistryPoints = L.layerGroup([], {
       id: 'arkeologiset_kohteet_piste',
+      type: 'geoJSON',
+      source: 'FHA',
       // this layer includes only GeoJSON points, define style for them
       geojsonMarkerOptions: {
         radius: 8,
@@ -377,6 +386,7 @@ class LeafletMap extends React.Component {
     // const kotusParishes1938 = L.layerGroup([], {
     //   id: 'kotus:pitajat',
     //   type: 'geoJSON',
+    //   source: 'kotus',
     //   // this layer includes only GeoJSON Polygons, define style for them
     //   geojsonMPolygonOptions: {
     //     color: '#dd2c00',
@@ -387,6 +397,7 @@ class LeafletMap extends React.Component {
     // const kotusParishesDialecticalRegions = L.layerGroup([], {
     //   id: 'kotus:rajat-sms-alueet',
     //   type: 'geoJSON',
+    //   source: 'kotus',
     //   // this layer includes only GeoJSON Polygons, define style for them
     //   geojsonMPolygonOptions: {
     //     color: '#fca903',
@@ -397,6 +408,7 @@ class LeafletMap extends React.Component {
     // const kotusParishesDialecticalSubRegions = L.layerGroup([], {
     //   id: 'kotus:rajat-sms-alueosat',
     //   type: 'geoJSON',
+    //   source: 'kotus',
     //   // this layer includes only GeoJSON Polygons, define style for them
     //   geojsonMPolygonOptions: {
     //     color: '#119100',
@@ -407,6 +419,7 @@ class LeafletMap extends React.Component {
     // const kotusParishesDialecticalBorder = L.layerGroup([], {
     //   id: 'kotus:rajat-lansi-ita',
     //   type: 'geoJSON',
+    //   source: 'kotus',
     //   // this layer includes only GeoJSON Polygons, define style for them
     //   geojsonMPolygonOptions: {
     //     color: '#2403fc',
@@ -456,7 +469,7 @@ class LeafletMap extends React.Component {
       style: leafletOverlay.options.geojsonMPolygonOptions,
       // add popups
       onEachFeature: (feature, layer) => {
-        layer.bindPopup(this.createPopUpContentGeoJSON(feature.properties))
+        layer.bindPopup(this.createPopUpContentGeoJSON(layerObj.layerID, feature.properties))
       }
     })
     leafletGeoJSONLayer.addTo(leafletOverlay).addTo(this.leafletMap)
@@ -583,10 +596,6 @@ class LeafletMap extends React.Component {
     this.leafletMap.removeControl(this.drawControlEditOnly)
   }
 
-  // drawHeatmap = latLngs => {
-
-  // }
-
   updateMarkers = results => {
     this.resultMarkerLayer.clearLayers()
     this.markers = {}
@@ -786,11 +795,17 @@ class LeafletMap extends React.Component {
         <p><b>${intl.get(`perspectives.${perspectiveID}.properties.source.label`)}</b>: ${data.source}</p>`
       }
     }
-
-    // console.log(popUpTemplate)
     return popUpTemplate
   }
 
+  createPopUpContentGeoJSON = (layerID, properties) => {
+    if (layerID === 'arkeologiset_kohteet_alue' || layerID === 'arkeologiset_kohteet_piste') {
+      return this.createPopUpContentGeoJSONFHA(properties)
+    } else {
+      return this.createPopUpContentGeoJSONKotus(properties)
+    }
+  }
+
   createPopUpContentGeoJSONFHA = properties => {
     let popupText = ''
     const name = properties.kohdenimi
@@ -882,7 +897,8 @@ LeafletMap.propTypes = {
   showExternalLayers: PropTypes.bool,
   updateFacetOption: PropTypes.func,
   facetedSearchMode: PropTypes.string,
-  container: PropTypes.string
+  container: PropTypes.string,
+  showError: PropTypes.func
 }
 
 export const LeafletMapComponent = LeafletMap

src/client/components/perspectives/sampo/FacetedSearchPerspective.js

@@ -26,6 +26,7 @@ const FacetedSearchPerspective = props => {
             updateRowsPerPage={props.updateRowsPerPage}
             updateFacetOption={props.updateFacetOption}
             sortResults={props.sortResults}
+            showError={props.showError}
             routeProps={props.routeProps}
             perspective={props.perspective}
             animationValue={props.animationValue}
@@ -49,6 +50,7 @@ const FacetedSearchPerspective = props => {
             updateRowsPerPage={props.updateRowsPerPage}
             updateFacetOption={props.updateFacetOption}
             sortResults={props.sortResults}
+            showError={props.showError}
             routeProps={props.routeProps}
             perspective={props.perspective}
             animationValue={props.animationValue}
@@ -72,6 +74,7 @@ const FacetedSearchPerspective = props => {
             updateRowsPerPage={props.updateRowsPerPage}
             updateFacetOption={props.updateFacetOption}
             sortResults={props.sortResults}
+            showError={props.showError}
             routeProps={props.routeProps}
             perspective={props.perspective}
             animationValue={props.animationValue}
@@ -141,6 +144,10 @@ FacetedSearchPerspective.propTypes = {
   /**
    * Redux action for updating the active selection or config of a facet.
    */
+  showError: PropTypes.func.isRequired,
+  /**
+   * Redux action for showing an error
+   */
   updateFacetOption: PropTypes.func.isRequired,
   /**
    * Routing information from React Router.

src/client/components/perspectives/sampo/Perspective1.js

@@ -42,8 +42,10 @@ const Perspective1 = props => {
         path={`${rootUrl}/${perspective.id}/faceted-search/production_places`}
         render={() =>
           <LeafletMap
-            center={[22.43, 10.37]}
-            zoom={2}
+            // center={[22.43, 10.37]}
+            // zoom={2}
+            center={[60.17, 24.81]}
+            zoom={14}
             results={props.placesResults.results}
             layers={props.leafletMapLayers}
             pageType='facetResults'
@@ -62,6 +64,7 @@ const Perspective1 = props => {
             showInstanceCountInClusters
             updateFacetOption={props.updateFacetOption}
             showExternalLayers
+            showError={props.showError}
           />}
       />
       <Route
@@ -152,7 +155,8 @@ Perspective1.propTypes = {
   animationValue: PropTypes.array.isRequired,
   animateMap: PropTypes.func.isRequired,
   screenSize: PropTypes.string.isRequired,
-  rootUrl: PropTypes.string.isRequired
+  rootUrl: PropTypes.string.isRequired,
+  showError: PropTypes.func.isRequired
 }
 
 export default Perspective1

src/client/components/perspectives/sampo/Perspective2.js

@@ -64,7 +64,8 @@ Perspective2.propTypes = {
   animationValue: PropTypes.array.isRequired,
   animateMap: PropTypes.func.isRequired,
   screenSize: PropTypes.string.isRequired,
-  rootUrl: PropTypes.string.isRequired
+  rootUrl: PropTypes.string.isRequired,
+  showError: PropTypes.func.isRequired
 }
 
 export default Perspective2

src/client/components/perspectives/sampo/Perspective3.js

@@ -91,7 +91,8 @@ Perspective3.propTypes = {
   animationValue: PropTypes.array.isRequired,
   animateMap: PropTypes.func.isRequired,
   screenSize: PropTypes.string.isRequired,
-  rootUrl: PropTypes.string.isRequired
+  rootUrl: PropTypes.string.isRequired,
+  showError: PropTypes.func.isRequired
 }
 
 export default Perspective3

src/client/configs/sampo/GeneralConfig.js

@@ -6,7 +6,7 @@ export const showLanguageButton = true
 
 export const publishedPort = 3006
 
-export const MAPBOX_ACCESS_TOKEN = '' // https://docs.mapbox.com/accounts/overview/tokens/
+export const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZWtrb25lbiIsImEiOiJja2FkbGxiY2owMDZkMnFxcGVqNTZ0dmk2In0.6keLTN8VveJkM5y4_OFmUw' // https://docs.mapbox.com/accounts/overview/tokens/
 
 export const MAPBOX_STYLE = 'light-v10' // https://docs.mapbox.com/api/maps/#styles
 

src/client/containers/SemanticPortal.js

@@ -371,6 +371,7 @@ const SemanticPortal = props => {
                                   updateRowsPerPage={props.updateRowsPerPage}
                                   updateFacetOption={props.updateFacetOption}
                                   sortResults={props.sortResults}
+                                  showError={props.showError}
                                   routeProps={routeProps}
                                   perspective={perspective}
                                   animationValue={props.animationValue}

src/client/epics/index.js

@@ -450,17 +450,17 @@ const fetchGeoJSONLayer = async (layerID, bounds) => {
   const baseUrl = 'http://kartta.nba.fi/arcgis/services/WFS/MV_Kulttuuriymparisto/MapServer/WFSServer'
   // const baseUrl = 'http://avaa.tdata.fi/geoserver/kotus/ows'
   // const baseUrl = 'http://avaa.tdata.fi/geoserver/paituli/wfs'
-  // const boundsStr =
-  //   `${bounds._southWest.lng},${bounds._southWest.lat},${bounds._northEast.lng},${bounds._northEast.lat}`
+  const boundsStr =
+    `${bounds._southWest.lng},${bounds._southWest.lat},${bounds._northEast.lng},${bounds._northEast.lat}`
   const mapServerParams = {
     request: 'GetFeature',
     service: 'WFS',
     version: '2.0.0',
     typeName: layerID,
     srsName: 'EPSG:4326',
-    // outputFormat: 'geojson'
-    outputFormat: 'application/json'
-    // bbox: boundsStr
+    outputFormat: 'geojson',
+    bbox: boundsStr
+    // outputFormat: 'application/json' for kotus layers
   }
   const url = `${baseUrl}?${querystring.stringify(mapServerParams)}`
   try {

src/client/translations/sampo/localeEN.js

@@ -104,6 +104,7 @@ export default {
       heatmap: 'Heatmap'
     },
     wrongZoomLevel: 'The map zoom level has to at least 11',
+    wrongZoomLevelFHA: 'The map zoom level has to be at least 13 in order to show this layer',
     tooManyResults: 'More than 3000 results, please use clustered map or heatmap'
   },
   instancePageGeneral: {