GeoJSON: add popups and layer argument

src/client/actions/index.js

@@ -98,8 +98,9 @@ export const updateMapMode = (mapMode) => ({
   mapMode
 });
 
-export const getGeoJSON = () => ({
+export const getGeoJSON = (layer) => ({
   type: GET_GEOJSON,
+  layer
 });
 
 export const updateGeoJSON = (geoJSON) => ({

src/client/components/map/LeafletMap.js

@@ -27,7 +27,7 @@ const ColorIcon = L.Icon.extend({
 class LeafletMap2 extends React.Component {
 
   componentDidMount() {
-    this.props.getGeoJSON();
+    this.props.getGeoJSON('kotus:pitajat');
 
     // Base layers
     const OSMBaseLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
@@ -121,7 +121,9 @@ class LeafletMap2 extends React.Component {
       }
     }
     if (this.props.geoJSON !== geoJSON) {
-      const sockenMapKotus = L.geoJSON(this.props.geoJSON);
+      const sockenMapKotus = L.geoJSON(this.props.geoJSON, {
+        onEachFeature: this.onEachFeature
+      });
       this.layerControl.addOverlay(sockenMapKotus, 'Kotus pitäjät');
     }
   }
@@ -166,6 +168,13 @@ class LeafletMap2 extends React.Component {
     return L.Util.template(popUpTemplate, result);
   }
 
+  onEachFeature(feature, layer) {
+    if (feature.properties && feature.properties.NIMI) {
+      const popupContent = '<p>Nimi: ' + feature.properties.NIMI + '</p></p>ID: ' + feature.id + '</p>';
+      layer.bindPopup(popupContent);
+    }
+  }
+
   createNLSUrl(layerID) {
     // return 'https://avoin-karttakuva.maanmittauslaitos.fi/avoin/wmts/1.0.0/' +
     // layerID + '/default/WGS84_Pseudo-Mercator/{z}/{x}/{y}.png';

src/client/epics/index.js

@@ -70,10 +70,11 @@ const getResultsEpic = (action$, store) => {
 };
 
 const getGeoJSONEpic = (action$) => {
-  const searchUrl = hiplaApiUrl + 'wfs';
+  const wfsUrl = hiplaApiUrl + 'wfs';
   return action$.ofType(GET_GEOJSON)
-    .switchMap(() => {
-      return ajax.getJSON(searchUrl)
+    .switchMap(action => {
+      const requestUrl = `${wfsUrl}?layer=${action.layer}`;
+      return ajax.getJSON(requestUrl)
         // .map(response => {
         //   console.log('res' + response)
         // })

src/server/index.js

@@ -68,7 +68,8 @@ app.get('/wfs', (req, res) => {
   //   kotus:rajat-sms-alueosat  murrealueenosat
   //   kotus:rajat-lansi-ita
   //   kotus:rajat-sms-alueet    murrealueet
-  const url = 'http://avaa.tdata.fi/geoserver/kotus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=kotus:pitajat&srsName=EPSG:4326&outputformat=json';
+  const layer = req.query.layer;
+  const url = 'http://avaa.tdata.fi/geoserver/kotus/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=' + layer + '&srsName=EPSG:4326&outputformat=json';
   request
     .get(url)
     .then(function(data) {