diff --git a/src/client/actions/index.js b/src/client/actions/index.js index 2719e69fb4e0279d1a5996dcfa96a84379aaa8e2..2cb7134771036aaf290c4b67d58158e81675b03d 100644 --- a/src/client/actions/index.js +++ b/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) => ({ diff --git a/src/client/components/map/LeafletMap.js b/src/client/components/map/LeafletMap.js index f7913f4bd7b950faf22770bdb91e13cb90a37a0c..a1379141e37d1aa46828d56f2edd14bbed1fa340 100644 --- a/src/client/components/map/LeafletMap.js +++ b/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'; diff --git a/src/client/epics/index.js b/src/client/epics/index.js index 263b2c8922caefb44b7f58fb772cbf34b121f797..4c75d2d685fa61d9171466c2f9886479d11c2457 100644 --- a/src/client/epics/index.js +++ b/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) // }) diff --git a/src/server/index.js b/src/server/index.js index 77227de405331f243f5a1e970559eac1850e7335..ceefe1a522db5d1eee7367fea35ffacae7560958 100644 --- a/src/server/index.js +++ b/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) {