Added google maps

angular.json

@@ -39,6 +39,7 @@
               "./node_modules/leaflet-openweathermap/leaflet-openweathermap.js",
               "./node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js",
               "./node_modules/leaflet-bing-layer/leaflet-bing-layer.js",
+              "./node_modules/leaflet.gridlayer.googlemutant/Leaflet.GoogleMutant.js",
               "./node_modules/esri-leaflet/dist/esri-leaflet.js",
               "./src/assets/js/leaflet.Editable.js",
               "./node_modules/jquery/dist/jquery.js"

package.json

@@ -38,6 +38,7 @@
     "leaflet-openweathermap": "^1.0.0",
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet-rotatedmarker": "^0.2.0",
+    "leaflet.gridlayer.googlemutant": "^0.8.0",
     "lodash": "^4.17.15",
     "momentjs": "^2.0.0",
     "ng-click-outside": "^5.0.0",

src/app/services/map.service.ts

@@ -7,6 +7,10 @@ declare const L;
 
 export enum MapLayers {
     BING,
+    GOOGLE_HYBRID,
+    GOOGLE_ROAD,
+    GOOGLE_SATELLITE,
+    GOOGLE_TERRAIN,
     ESRI_TOPOGRAPHIC,
     ESRI_IMAGERY,
     ESRI_IMAGERY_CLARITY
@@ -156,11 +160,23 @@ export class MapService {
 
     setMapLayer(layer?: MapLayers) {
         if(this.mapLayer) this.map.removeLayer(this.mapLayer);
-        if(layer == null) layer = MapLayers.BING;
+        if(layer == null) layer = MapLayers.GOOGLE_HYBRID;
         switch(layer) {
             case MapLayers.BING:
                 this.mapLayer = L.tileLayer.bing(environment.bing);
                 break;
+            case MapLayers.GOOGLE_HYBRID:
+                this.mapLayer = L.gridLayer.googleMutant({type: 'hybrid'});
+                break;
+            case MapLayers.GOOGLE_ROAD:
+                this.mapLayer = L.gridLayer.googleMutant({type: 'roadmap'});
+                break;
+            case MapLayers.GOOGLE_SATELLITE:
+                this.mapLayer = L.gridLayer.googleMutant({type: 'satellite'});
+                break;
+            case MapLayers.GOOGLE_TERRAIN:
+                this.mapLayer = L.gridLayer.googleMutant({type: 'terrain'});
+                break;
             case MapLayers.ESRI_TOPOGRAPHIC:
                 this.mapLayer = L.esri.basemapLayer('Topographic');
                 break;

src/app/views/map/map.component.ts

@@ -55,7 +55,11 @@ export class MapComponent implements OnDestroy, OnInit {
             {name: 'Place Relative', icon: 'control_camera', click: this.placeRelative},
             {name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub},
             {name: 'Map Style', icon: 'terrain', subMenu: [
-                    {name: 'Bing:Satellite', toggle: true, enabled: true, click: () => this.map.setMapLayer(MapLayers.BING)},
+                    {name: 'Bing:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.BING)},
+                    {name: 'Google:Hybrid', toggle: true, enabled: true, click: () => this.map.setMapLayer(MapLayers.GOOGLE_HYBRID)},
+                    {name: 'Google:Road', toggle: true, click: () => this.map.setMapLayer(MapLayers.GOOGLE_ROAD)},
+                    {name: 'Google:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.GOOGLE_SATELLITE)},
+                    {name: 'Google:Terrain', toggle: true, click: () => this.map.setMapLayer(MapLayers.GOOGLE_TERRAIN)},
                     {name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
                     {name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
                     {name: 'ESRI:Satellite Clear', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)}

src/environments/environment.prod.ts

@@ -9,6 +9,7 @@ export const environment = {
     messagingSenderId: "443222036375",
     appId: "1:443222036375:web:2e2906e3ca49aa63"
   },
+  googleMaps: 'AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE',
   openWeather: 'e8391af54b6fc09dc82b019fc68b8409',
   production: true
 };

src/environments/environment.ts

@@ -13,6 +13,7 @@ export const environment = {
     messagingSenderId: "443222036375",
     appId: "1:443222036375:web:2e2906e3ca49aa63"
   },
+  googleMaps: 'AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE',
   openWeather: 'e8391af54b6fc09dc82b019fc68b8409',
   production: false
 };

src/index.html

@@ -27,6 +27,8 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="manifest" href="manifest.webmanifest">
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE" async defer></script>
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -35,3 +35,15 @@ body {
     overflow: hidden;
   }
 }
+
+a[href^="http://maps.google.com/maps"]{display:none !important}
+a[href^="https://maps.google.com/maps"]{display:none !important}
+
+.gmnoprint a, .gmnoprint span, .gm-style-cc {
+  display: none;
+}
+
+.gmnoprint div {
+  background: none !important;
+
+}

yarn.lock

@@ -4577,6 +4577,11 @@ leaflet-virtual-grid@^1.0.7:
   dependencies:
     leaflet "^1.0.0"
 
+leaflet.gridlayer.googlemutant@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz#9636630cb669577f5bc55ff171dd0a3cc44ece1e"
+  integrity sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA==
+
 leaflet@^1.0.0, leaflet@^1.0.0-beta.2, leaflet@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf"