From 62c0ba4f01e6c8da03b273c4754941dd4f4ae57b Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 20 Dec 2017 00:23:47 +0100 Subject: [PATCH] Added Layers to SelectionMap. Fixes in index and more --- imports/startup/server/IPGeocoder.js | 2 +- .../components/SelectionMap/SelectionMap.js | 34 ++++---- .../SubscriptionEditor/SubscriptionEditor.js | 13 +++- .../FireSubscription/FireSubscription.js | 21 ++++- imports/ui/pages/FiresMap/FiresMap.js | 77 ++++++------------- .../pages/NewSubscription/NewSubscription.js | 40 ++++++++-- .../ui/pages/Subscriptions/Subscriptions.js | 5 +- 7 files changed, 112 insertions(+), 80 deletions(-) diff --git a/imports/startup/server/IPGeocoder.js b/imports/startup/server/IPGeocoder.js index 6cae62b..e145311 100644 --- a/imports/startup/server/IPGeocoder.js +++ b/imports/startup/server/IPGeocoder.js @@ -28,7 +28,7 @@ export function localize() { clientIP = this.connection.clientAddress; } else { console.warn(`We cannot get this meteor connection IP for this connection (${this.connection})`); - clientIP = '127.0.0.1'; + clientIP = '80.58.61.250'; } if (isPrivateIP(clientIP)) { clientIP = '80.58.61.250'; // Some Spain IP address diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js index 18216b9..9b6c22a 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.js +++ b/imports/ui/components/SelectionMap/SelectionMap.js @@ -6,13 +6,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet'; +import { Map, Marker, CircleMarker, Circle } from 'react-leaflet'; import Leaflet from 'leaflet'; import { translate } from 'react-i18next'; import { withTracker } from 'meteor/react-meteor-data'; import update from 'immutability-helper'; import geolocation from '/imports/startup/client/geolocation'; import { positionIcon } from '/imports/ui/components/Maps/Icons'; +import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; import 'leaflet-sleep/Leaflet.Sleep.js'; @@ -27,9 +28,10 @@ class SelectionMap extends Component { this.state = { center: props.center, marker: props.center, - zoom: props.zoom, + zoom: props.zoom || 11, distance: props.distance, - draggable: true + draggable: true, + subsFit: true }; this.getMap = this.getMap.bind(this); @@ -55,7 +57,7 @@ class SelectionMap extends Component { marker: nextMarker, distance: nextProps.distance || this.state.distance }); - // this.fit(); + this.fit(); } componentDidUpdate() { @@ -77,6 +79,9 @@ class SelectionMap extends Component { if (this.props.onViewportChanged) { this.props.onViewportChanged(viewport); } + this.state.subsFit = false; + this.state.center = viewport.center; + this.state.zoom = viewport.zoom; } getMap() { @@ -100,8 +105,8 @@ class SelectionMap extends Component { fit() { // console.log("fit!"); - if (this.subsUnionElement) { - // has autofit + if (this.props.currentSubs.length > 0 && this.state.subsFit) { + // has autofit, do nothing } else if (this.selectionMap && this.distanceCircle) { this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]); } @@ -125,13 +130,17 @@ class SelectionMap extends Component { } handleLeafletLoad(map) { - if (this.props.readOnly && this.props.currentSubs && map && !this.props.loadingSubs) { - this.state.union = subsUnion(this.state.union, { + if (this.props.currentSubs && map && !this.props.loadingSubs) { + const subsOpts = { map, show: true, - fit: true, + fit: this.state.subsFit, subs: this.props.currentSubs - }); + }; + if (!this.props.readOnly) { + subsOpts.color = '#F2F2F2'; + } + this.state.union = subsUnion(this.state.union, subsOpts); } } @@ -157,10 +166,7 @@ class SelectionMap extends Component { wakeMessage={this.props.t('Pulsa para activar')} sleepOpacity={0.6} > - + {!this.props.readOnly && ; } @@ -86,12 +90,15 @@ class FireSubscription extends React.Component { this.onSubs(state)} onSelection={state => this.onSelection(state)} readOnly={false} edit={false} + loadingSubs={this.props.loading} + currentSubs={this.props.subscriptions} /> @@ -101,11 +108,21 @@ class FireSubscription extends React.Component { FireSubscription.propTypes = { t: PropTypes.func.isRequired, + loading: PropTypes.bool.isRequired, + subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired, center: PropTypes.arrayOf(PropTypes.number), + zoom: PropTypes.number, distance: PropTypes.number, focusInput: PropTypes.bool.isRequired, subsBtn: PropTypes.string.isRequired, onSubs: PropTypes.func.isRequired }; -export default translate([], { wait: true })(FireSubscription); +export default translate([], { wait: true })(withTracker(() => { + const subscription = Meteor.subscribe('mysubscriptions'); + // console.log(UserSubsToFiresCollection.find().fetch()); + return { + loading: !subscription.ready(), + subscriptions: UserSubsToFiresCollection.find({ owner: Meteor.userId() }).fetch() + }; +})(FireSubscription)); diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index cb59a42..baee395 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/imports/ui/pages/FiresMap/FiresMap.js @@ -2,14 +2,14 @@ /* eslint-disable import/no-absolute-path */ /* eslint-disable react/jsx-indent-props */ /* eslint-disable react/jsx-indent */ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Row, Col, Checkbox } from 'react-bootstrap'; 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, LayersControl } from 'react-leaflet'; +import { Map } from 'react-leaflet'; import _ from 'lodash'; import 'leaflet/dist/leaflet.css'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; @@ -19,15 +19,13 @@ import geolocation from '/imports/startup/client/geolocation'; import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition'; import FireList from '/imports/ui/components/Maps/FireList'; import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion'; +import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers'; 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; +import './FiresMap.scss'; const MAXZOOM = 6; const MAXZOOMREACTIVE = 6; @@ -42,8 +40,7 @@ class FiresMap extends React.Component { this.state = { viewport: this.props.viewport, useMarkers: false, - showSubsUnion: true, - gkey: null + showSubsUnion: true }; const self = this; // viewportchange @@ -55,10 +52,6 @@ class FiresMap extends React.Component { } componentDidMount() { - const self = this; - Gkeys.load((err, key) => { - self.setState({ gkey: key }); - }); mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]); if (this.fireMap) { this.addScale(); @@ -111,8 +104,8 @@ class FiresMap extends React.Component { } handleLeafletLoad(map) { - console.log('Map loading'); - console.log(map); + // console.log('Map loading'); + // console.log(map); if (map) { this.state.union = subsUnion(this.state.union, { map, @@ -125,14 +118,7 @@ class FiresMap extends React.Component { render() { console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length} of ${this.props.activefirestotal} total. Subs users ready ${this.props.subsready}, reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`); - 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 */ @@ -187,7 +173,7 @@ class FiresMap extends React.Component { viewport={this.state.viewport} onViewportChanged={this.onViewportChanged} sleep={window.location.pathname === '/'} - sleepTime={750} + sleepTime={10750} wakeTime={750} sleepNote hoverToWake @@ -196,34 +182,21 @@ class FiresMap extends React.Component { > {/* http://wiki.openstreetmap.org/wiki/Tile_servers */} {!this.props.loading && - = MAXZOOM} - useMarkers={this.state.useMarkers} - nasa - />} - {!this.props.loading && - } - - {osmlayer} - { this.state.gkey && - - - } - { this.state.gkey && - - - } - { this.state.gkey && - - - } - + + = MAXZOOM} + useMarkers={this.state.useMarkers} + nasa + /> + + } + @@ -273,7 +246,7 @@ export default translate([], { wait: true })(withTracker(() => { // Warning with the performance of this log: // console.log(`Active fires ${ActiveFiresCollection.find().count()} of ${Counter.get('countActiveFires')}`); // console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`); - console.log(UserSubsToFiresCollection.find().fetch()); + // console.log(UserSubsToFiresCollection.find().fetch()); return { loading: !subscription.ready(), userSubs: UserSubsToFiresCollection.find().fetch(), diff --git a/imports/ui/pages/NewSubscription/NewSubscription.js b/imports/ui/pages/NewSubscription/NewSubscription.js index 99d97e7..a5e55a3 100644 --- a/imports/ui/pages/NewSubscription/NewSubscription.js +++ b/imports/ui/pages/NewSubscription/NewSubscription.js @@ -1,17 +1,41 @@ -import React from 'react'; +/* eslint-disable react/jsx-indent-props */ + +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Trans, translate } from 'react-i18next'; import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor'; -const NewSubscription = ({ history }) => ( -
-

Nueva zona

- -
-); +class NewSubscription extends Component { + constructor(props) { + super(props); + const pushState = this.props.location.state; + this.state = { + center: pushState ? pushState.center : [null, null], + zoom: pushState ? pushState.zoom : null + }; + } + + render() { + const { history } = this.props; + return ( +
+

Nueva zona

+ +
+ ); + } +} + +NewSubscription.defaultProps = { +}; NewSubscription.propTypes = { - history: PropTypes.object.isRequired + history: PropTypes.object.isRequired, + location: PropTypes.object }; export default translate([], { wait: true })(NewSubscription); diff --git a/imports/ui/pages/Subscriptions/Subscriptions.js b/imports/ui/pages/Subscriptions/Subscriptions.js index 32dab94..7a1953e 100644 --- a/imports/ui/pages/Subscriptions/Subscriptions.js +++ b/imports/ui/pages/Subscriptions/Subscriptions.js @@ -28,8 +28,9 @@ class Subscriptions extends Component { this.onSndBtn = this.onSndBtn.bind(this); } - onFstBtn(value) { - // ${match.url}/new + onFstBtn() { + console.log(this.state); + this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom }); } onSndBtn() {