From 534fc7065c96150fc4391c158c773a91f87fa1f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Taneli=20Riihim=C3=A4ki?= <m3034@student.jamk.fi> Date: Mon, 10 Jun 2019 08:55:10 +0300 Subject: [PATCH] Add a button to change map layers --- src/App.js | 16 +++++++++++++--- src/components/Header.js | 2 ++ src/components/UserMap.js | 5 +++-- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 1e6b752..7342088 100644 --- a/src/App.js +++ b/src/App.js @@ -7,20 +7,30 @@ import Header from './components/Header'; class App extends Component { constructor() { super(); + + // set initial state this.state = { lat: 62.2416479, lng: 25.7597186, - zoom: 13 + zoom: 13, + mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg' }; + + this.handleLayerChange = this.handleLayerChange.bind(this); } + // Toggles through the list and changes the mapUrl state + handleLayerChange = () => { + const maps = ['https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg', 'https://tiles.kartat.kapsi.fi/peruskartta/{z}/{x}/{y}.jpg','https://tiles.kartat.kapsi.fi/ortokuva/{z}/{x}/{y}.jpg']; + this.setState({mapUrl: maps.indexOf(this.state.mapUrl) < maps.length - 1 ? maps[maps.indexOf(this.state.mapUrl) + 1] : maps[0]}) + }; render() { const initialPosition = [this.state.lat, this.state.lng]; return ( <div> - <UserMap position={initialPosition} zoom={this.state.zoom} />, - <Header /> + <UserMap position={initialPosition} zoom={this.state.zoom} mapUrl={this.state.mapUrl} />, + <Header handleLayerChange={this.handleLayerChange} /> </div> ); } diff --git a/src/components/Header.js b/src/components/Header.js index 4406f82..7079906 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -77,6 +77,7 @@ class Header extends React.Component { <button onClick={this.handleLogout}>logout</button> )} {this.state.username && <button>{this.state.username}</button>} + <button onClick={this.props.handleLayerChange}>change layer</button> </div> {this.state.register && ( <RegisterForm @@ -92,6 +93,7 @@ class Header extends React.Component { toggleView={this.toggleView} /> )} + </div> ); } diff --git a/src/components/UserMap.js b/src/components/UserMap.js index 6058074..af15759 100644 --- a/src/components/UserMap.js +++ b/src/components/UserMap.js @@ -14,6 +14,7 @@ class UserMap extends Component { this.state = { ownLat: null, ownLng: null, + mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg' } this.watchPositionId = null; @@ -68,10 +69,10 @@ class UserMap extends Component { <Map className='map' center={this.props.position} zoom={this.props.zoom}> <TileLayer attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>' - url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg' + url={this.props.mapUrl} /> <ZoomControl position='topright' /> - <DrawTools position={this.props.position} /> + <DrawTools position={this.props.position} /> <Marker position={this.props.position}> <Popup> Se on perjantai, my dudes <br /> -- GitLab