From 3d3926626bcce537420fe5430612fa0fd7c7c54e Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Fri, 1 Jun 2018 12:40:20 +0300
Subject: [PATCH] Add google maps baselayers
---
src/components/LeafletMap.js | 33 +++++++++++++++++++++++++++------
1 file changed, 27 insertions(+), 6 deletions(-)
diff --git a/src/components/LeafletMap.js b/src/components/LeafletMap.js
index 0600e97b..4d4ff4e6 100644
--- a/src/components/LeafletMap.js
+++ b/src/components/LeafletMap.js
@@ -12,14 +12,23 @@ import 'react-leaflet-fullscreen/dist/styles.css';
import 'react-leaflet-markercluster/dist/styles.min.css';
import SimpleSlider from './SimpleSlider';
import Control from 'react-leaflet-control';
+import { GoogleLayer } from 'react-leaflet-google';
+
+// https://console.developers.google.com/apis/credentials?project=hipla-187309
+const key = 'AIzaSyCKWw5FjhwLsfp_l2gjVAifPkT3cxGXhA4';
+const road = 'ROADMAP'; // displays the default road map view. This is the default map type.
+const satellite = 'SATELLITE'; // displays Google Earth satellite images.
+const hybrid = 'HYBRID'; // displays a mixture of normal and satellite views.
+const terrain = 'TERRAIN'; // displays a physical map based on terrain information.
+
class LeafletMap extends React.Component {
constructor(props) {
super(props);
this.state = {
- lat: 64.950916,
- lng: 27.095982,
+ lat: 63.78248603116502,
+ lng: 40.10009765625001,
zoom: 5,
opacity: 1.0
};
@@ -31,13 +40,26 @@ class LeafletMap extends React.Component {
render() {
const position = [this.state.lat, this.state.lng];
-
+
return (
<Map
center={position}
- zoom={this.state.zoom}>
+ zoom={this.state.zoom}
+ >
<LayersControl position="topright">
- <LayersControl.BaseLayer checked name="OpenStreetMap">
+ <LayersControl.BaseLayer checked name='Google Maps Roads'>
+ <GoogleLayer googlekey={key} maptype={road}/>
+ </LayersControl.BaseLayer>
+ <LayersControl.BaseLayer name='Google Maps Satellite'>
+ <GoogleLayer googlekey={key} maptype={satellite} />
+ </LayersControl.BaseLayer>
+ <LayersControl.BaseLayer name='Google Maps Hybrid'>
+ <GoogleLayer googlekey={key} maptype={hybrid} />
+ </LayersControl.BaseLayer>
+ <LayersControl.BaseLayer name='Google Maps Terrain'>
+ <GoogleLayer googlekey={key} maptype={terrain} />
+ </LayersControl.BaseLayer>
+ <LayersControl.BaseLayer name="OpenStreetMap">
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -57,7 +79,6 @@ class LeafletMap extends React.Component {
opacity={this.state.opacity}
/>
</LayersControl.Overlay>
-
</LayersControl>
<MarkerClusterGroup>
<ResultMarkerList results={this.props.results} />
--
GitLab