Added Google Maps layers. Improved key load

imports/startup/client/Gkeys.js

@@ -1,7 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
-import i18n from 'i18next';
 import { Tracker } from 'meteor/tracker';
+import GoogleMapsLoader from 'google-maps';
 
 class GkeysC {
   constructor() {
@@ -10,16 +10,14 @@ class GkeysC {
     this.callbacks = [];
     Meteor.startup(() => {
       Meteor.call('getMapKey', (error, key) => {
-        const script = document.createElement('script');
-        script.type = 'text/javascript';
-        script.onload = () => {
+        // console.log(google.maps);
+        GoogleMapsLoader.KEY = key;
+        GoogleMapsLoader.LIBRARIES = ['places'];
+        GoogleMapsLoader.load(() => {
           self.gmapkey.set(key);
           console.log('GMaps script just loaded');
           self.doCallbacks(key);
-        };
-        // https://stackoverflow.com/questions/28130114/google-maps-places-autocomplete-language-output
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${key}&libraries=places&language=${i18n.language}`;
-        document.body.appendChild(script);
+        });
       });
     });
   }
@@ -37,7 +35,7 @@ class GkeysC {
       const key = this.gmapkey.get();
       if (key) {
         // already loaded
-        console.log(`GMaps already loaded:`);
+        console.log('GMaps already loaded');
         this.doCallbacks(key);
         computation.stop();
       } else {

imports/ui/pages/FiresMap/FiresMap.js

@@ -9,7 +9,7 @@ import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
-import { Map, TileLayer } from 'react-leaflet';
+import { Map, TileLayer, LayersControl } from 'react-leaflet';
 import LGeo from 'leaflet-geodesy';
 import _ from 'lodash';
 import 'leaflet/dist/leaflet.css';
@@ -24,22 +24,29 @@ import Loading from '/imports/ui/components/Loading/Loading';
 import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
 import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
+import Gkeys from '/imports/startup/client/Gkeys';
+import { GoogleLayer } from 'react-leaflet-google/lib/';
 import './FiresMap.scss';
 
+const { BaseLayer } = LayersControl;
+
 const MAXZOOM = 6;
 const zoom = new ReactiveVar(8);
 const lat = new ReactiveVar();
 const lng = new ReactiveVar();
-const height = new ReactiveVar();
-const width = new ReactiveVar();
+const height = new ReactiveVar(400);
+const width = new ReactiveVar(400);
 
+// TODO share only the used part of fires data
+// Remove map in subscription
 class FiresMap extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       viewport: this.props.viewport,
       useMarkers: false,
-      showSubsUnion: true
+      showSubsUnion: true,
+      gkey: null
     };
     const self = this;
     // viewportchange
@@ -51,6 +58,10 @@ class FiresMap extends React.Component {
   }
 
   componentDidMount() {
+    const self = this;
+    Gkeys.load((err, key) => {
+      self.setState({ gkey: key });
+    });
     height.set(this.divElement.clientHeight);
     width.set(this.divElement.clientWidth);
     this.addScale();
@@ -141,6 +152,14 @@ class FiresMap extends React.Component {
       this.showSubsUnion(this.state.showSubsUnion);
     }
     console.log('Rendering map');
+    const { t } = this.props;
+    const osmlayer = (
+      <BaseLayer checked name={t('Mapa gris de OpenStreetMap')}>
+        <TileLayer
+            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+            url="http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
+        />
+      </BaseLayer>);
     return (
       /* Large number of markers:
          https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
@@ -193,10 +212,6 @@ class FiresMap extends React.Component {
                sleepOpacity={0.6}
            >
              {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
-             <TileLayer
-                 attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-                 url="http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
-             />
              <FireList
                  fires={this.props.activefires}
                  scale={this.state.viewport.zoom >= MAXZOOM}
@@ -209,6 +224,21 @@ class FiresMap extends React.Component {
                  useMarkers={this.state.useMarkers}
                  nasa={false}
              />
+             <LayersControl position="topright">
+               {osmlayer}
+               { this.state.gkey &&
+                 <BaseLayer name={t('Mapa de carreteras de Google')}>
+                   <GoogleLayer googlekey={this.state.gkey} maptype="ROADMAP" />
+                 </BaseLayer>}
+               { this.state.gkey &&
+                 <BaseLayer name={t('Mapa de terreno de Google')}>
+                   <GoogleLayer googlekey={this.state.gkey} maptype="TERRAIN" />
+                 </BaseLayer>}
+               { this.state.gkey &&
+                 <BaseLayer name={t('Mapa de satélite de Google')}>
+                   <GoogleLayer googlekey={this.state.gkey} maptype="SATELLITE" />
+                 </BaseLayer>}
+             </LayersControl>
            </Map>
          </Row>
          <Row>

package-lock.json

@@ -4723,6 +4723,11 @@
         "pinkie-promise": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
       }
     },
+    "google-maps": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/google-maps/-/google-maps-3.2.1.tgz",
+      "integrity": "sha1-wHWPKxdaSo0RDBq7H8TMOMEXbgY="
+    },
     "graceful-fs": {
       "version": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
@@ -9945,6 +9950,11 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-leaflet-google": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet-google/-/react-leaflet-google-3.2.0.tgz",
+      "integrity": "sha1-67F5qBIOQ0Ui0GK8eTdojKLtD20="
+    },
     "react-overlays": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.7.4.tgz",

package.json

@@ -14,6 +14,7 @@
     "commonmark": "^0.28.1",
     "core-js": "^2.5.1",
     "fs": "0.0.1-security",
+    "google-maps": "^3.2.1",
     "handlebars": "^4.0.11",
     "history": "^4.7.2",
     "html5-device-mockups": "^3.2.0",
@@ -51,6 +52,7 @@
     "react-i18next": "^7.1.1",
     "react-leaflet": "^1.7.7",
     "react-leaflet-control": "^1.4.0",
+    "react-leaflet-google": "^3.2.0",
     "react-places-autocomplete": "^5.4.3",
     "react-resize-detector": "^1.1.0",
     "react-router-bootstrap": "^0.24.4",