diff --git a/src/App.js b/src/App.js
index 1e6b7527fbf44491f60a3a80ee94b604f5f5d6dc..7342088361a7e2c36e0cf4cd71d5a6b7e269817b 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 4406f82407fb761209ea19f44e63f55c23ca5ff0..70799067bb53691f50038a5c987469665f162b8b 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 b943bde95e6a201429a69749b5140fd8a5d6ba45..1ec4c484d990b5b29ff443a7840a86e2517bda78 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;
@@ -80,11 +81,11 @@ class UserMap extends Component {
     return (
       <Map className='map' center={this.props.position} zoom={this.props.zoom}>
         <TileLayer
-          attribution='Maanmittauslaitoksen kartta'
-          url=' https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+          attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
+          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 />