diff --git a/src/client/components/map/LeafletMap.js b/src/client/components/map/LeafletMap.js index b47e3e7872d68666e4d2ce5dcb9032c1a3482344..391353f5708c5b4dc4ddfe832f7d40bbc4356a0c 100644 --- a/src/client/components/map/LeafletMap.js +++ b/src/client/components/map/LeafletMap.js @@ -27,6 +27,7 @@ const ColorIcon = L.Icon.extend({ class LeafletMap2 extends React.Component { componentDidMount() { + this.props.getGeoJSON(); // Base layers const OSMBaseLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { @@ -50,7 +51,9 @@ class LeafletMap2 extends React.Component { // attribution: 'National Land Survey of Finland' // }); - // Overlay layers + //console.log(this.createNLSUrl('kiinteistojaotus')); + + // Overlays const realEstateMapNLS = L.tileLayer(this.createNLSUrl('kiinteistojaotus'), { attribution: 'National Land Survey of Finland' }); @@ -105,10 +108,10 @@ class LeafletMap2 extends React.Component { 'Senate atlas (MapWarper)': senateAtlas, 'Western Front July 1917 (MapWarper)': westernFront }; - L.control.layers(baseMaps, overlayMaps).addTo(this.map); + this.layerControl = L.control.layers(baseMaps, overlayMaps).addTo(this.map); } - componentDidUpdate({ results, mapMode }) { + componentDidUpdate({ results, mapMode, geoJSON }) { // check if results data or mapMode have changed if (this.props.results !== results || this.props.mapMode !== mapMode) { if (this.props.mapMode === 'cluster') { @@ -117,6 +120,10 @@ class LeafletMap2 extends React.Component { this.updateMarkers(this.props.results); } } + if (this.props.geoJSON !== geoJSON) { + const sockenMapKotus = L.geoJSON(this.props.geoJSON); + this.layerControl.addOverlay(sockenMapKotus, 'Kotus pitäjät'); + } } updateMarkers(results) { @@ -160,6 +167,9 @@ class LeafletMap2 extends React.Component { } createNLSUrl(layerID) { + // 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}'; @@ -172,7 +182,10 @@ class LeafletMap2 extends React.Component { LeafletMap2.propTypes = { results: PropTypes.array, - mapMode: PropTypes.string.isRequired + mapMode: PropTypes.string.isRequired, + geoJSON: PropTypes.object, + //geoJSONKey: PropTypes.number, + getGeoJSON: PropTypes.func.isRequired, }; export default LeafletMap2; diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js index 121607e2a45864f5e16e36a3dc5054be520eef6c..30c81f9a8a679fc6fc8eb0b4c7bc9f5b4170fbad 100644 --- a/src/client/containers/MapApp.js +++ b/src/client/containers/MapApp.js @@ -170,9 +170,9 @@ let MapApp = (props) => { <LeafletMap results={props.results} mapMode={props.mapMode} - // geoJSON={props.geoJSON} + geoJSON={props.geoJSON} // geoJSONKey={props.geoJSONKey} - // getGeoJSON={props.getGeoJSON} + getGeoJSON={props.getGeoJSON} // sliderValue={100} /> );