Add a button to change map layers

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>
     );
   }

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>
     );
   }

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='&copy; <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 />