From 8b8b145360b7b7003818cb4648b036eee66e1764 Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 13 Dec 2017 11:56:51 +0100 Subject: [PATCH] Added Google Maps layers. Improved key load --- imports/startup/client/Gkeys.js | 16 ++++----- imports/ui/pages/FiresMap/FiresMap.js | 46 +++++++++++++++++++++----- package-lock.json | 10 ++++++ package.json | 2 ++ public/images/layers.png | Bin 0 -> 696 bytes 5 files changed, 57 insertions(+), 17 deletions(-) create mode 100644 public/images/layers.png diff --git a/imports/startup/client/Gkeys.js b/imports/startup/client/Gkeys.js index 75fd7a0..5b21f32 100644 --- a/imports/startup/client/Gkeys.js +++ b/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 { diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index c54d4e4..b8683ab 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/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 = ( + + + ); 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 */} - = MAXZOOM} @@ -209,6 +224,21 @@ class FiresMap extends React.Component { useMarkers={this.state.useMarkers} nasa={false} /> + + {osmlayer} + { this.state.gkey && + + + } + { this.state.gkey && + + + } + { this.state.gkey && + + + } + diff --git a/package-lock.json b/package-lock.json index d82e7cd..621f5d4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 774dcab..085d28b 100644 --- a/package.json +++ b/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", diff --git a/public/images/layers.png b/public/images/layers.png new file mode 100644 index 0000000000000000000000000000000000000000..1a72e5784b2b456eac5d7670738db80697af3377 GIT binary patch literal 696 zcmV;p0!RIcP)*@&l2<6p=!C&s@#ZL+%BQvF&b?w6S%wp=I>1QHj7AP5C)IWy#b znXXB;g;j=$a-tW89K%FbDceHVq&unY*Wx3L#=EGWH=rjqnp|4c_Ulec!ql3#G-5ZF zVlbBA@XP=)C8U&+Lrc)S4O5%1$&{(;7R^K(CSnvSr$v;+B$8q&7Bf|h$#PARo1^%M zf1H^nG-EiXVXr07OH(*8R)xa|FD;lXUlg_-%)~ZGsL2cX0NXaAzN2q%jqLRR6ruVk8`Jb7n#{`T;o@`F= z#3YcynIR^s83UNF3D!f5m#Mg)NJ24&Qfrqb&_z=yF;=B)#9Iq7u-@^O!(mW{D;qvr zPc)gVb%aowtS8m@ElL4A9G>w#ffQ~q{i&_i)*6f^)Sz|C?C>zb4Uo?H<-&Hz@a?J; z$ml@zGygWofb9$ZBj6aLjpLhsT2AzjOu=-*u_gSCU