Location search in Fire Map

imports/ui/components/LocationAutocomplete/LocationAutocomplete.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-indent-props */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, translate } from 'react-i18next';
+import { translate } from 'react-i18next';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
 import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
 
-class SubsAutocomplete extends React.Component {
+class LocationAutocomplete extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -58,9 +58,7 @@ class SubsAutocomplete extends React.Component {
     return (
       <form>
         <FormGroup>
-          <ControlLabel>
-            {t(label)}
-          </ControlLabel>
+          { label.length > 0 && <ControlLabel>{t(label)}</ControlLabel> }
           <PlacesAutocomplete
               styles={myStyles}
               autocompleteItem={AutocompleteItem}
@@ -89,14 +87,14 @@ class SubsAutocomplete extends React.Component {
                   autoFocus: this.props.focusInput
                 }}
           />
-          <HelpBlock>{t(helpText)}</HelpBlock>
+          { helpText.length > 0 && <HelpBlock>{t(helpText)}</HelpBlock> }
         </FormGroup>
       </form>
     );
   }
 }
 
-SubsAutocomplete.propTypes = {
+LocationAutocomplete.propTypes = {
   focusInput: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
@@ -105,4 +103,4 @@ SubsAutocomplete.propTypes = {
   i18n: PropTypes.object.isRequired
 };
 
-export default translate([], { wait: true })(SubsAutocomplete);
+export default translate([], { wait: true })(LocationAutocomplete);

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -7,8 +7,8 @@ import { translate } from 'react-i18next';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
 import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
 import Gkeys from '/imports/startup/client/Gkeys';
-import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
-import SubsAutocomplete from './SubsAutocomplete';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
+import LocationAutocomplete from '/imports/ui/components/LocationAutocomplete/LocationAutocomplete';
 import { isNotHomeAndMobile } from '/imports/ui/components/Utils/isMobile';
 
 class FireSubscription extends React.Component {
@@ -76,7 +76,7 @@ class FireSubscription extends React.Component {
           {isNotHomeAndMobile &&
           <Col xs={12} sm={12} md={6} lg={6} >
             <div>
-              <SubsAutocomplete
+              <LocationAutocomplete
                   focusInput={this.props.focusInput}
                   label="Indícanos la posición de la zona a vigilar (por ej. tu pueblo, una calle, etc):"
                   placeHolder="Escribe aquí un lugar"

imports/ui/pages/FiresMap/FiresMap.js

@@ -35,12 +35,15 @@ import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMob
 import { isHome } from '/imports/ui/components/Utils/location';
 import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
 import FullScreenMap from '/imports/ui/components/Maps/FullScreenMap';
+import LocationAutocomplete from '/imports/ui/components/LocationAutocomplete/LocationAutocomplete';
+import Gkeys from '/imports/startup/client/Gkeys';
 
 import './FiresMap.scss';
 
 const MAXZOOM = 6;
 const MAXZOOMREACTIVE = 6;
-const zoom = new ReactiveVar(8);
+const DEFZOOM = 8;
+const zoom = new ReactiveVar(DEFZOOM);
 const center = new ReactiveVar([0, 0]);
 const mapSize = new ReactiveVar();
 const marks = new ReactiveVar(false);
@@ -55,7 +58,7 @@ class FiresMap extends React.Component {
         center: props.center,
         zoom: props.zoom
       },
-      // init: true,
+      init: false,
       useMarkers: props.marks,
       scaleAdded: false,
       moving: false,
@@ -73,6 +76,10 @@ class FiresMap extends React.Component {
   }
 
   componentDidMount() {
+    const self = this;
+    Gkeys.load(() => {
+      self.setState({ init: true });
+    });
   }
 
   /* shouldComponentUpdate(nextProps, nextState) {
@@ -108,6 +115,10 @@ class FiresMap extends React.Component {
     this.debounceView(viewport);
   }
 
+  onAutocompleteChange(value) {
+    this.handleViewportChange({ center: [value.lat, value.lng], zoom: DEFZOOM - 1 });
+  }
+
   getMap() {
     return this.fireMap.leafletElement;
   }
@@ -192,6 +203,10 @@ class FiresMap extends React.Component {
 
     if (Meteor.isDevelopment) console.log(`Industries total: ${this.props.industries.length}`);
 
+    if (!this.state.init) {
+      return <div />;
+    }
+
     return (
       /* Large number of markers:
          https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
@@ -220,6 +235,13 @@ class FiresMap extends React.Component {
              <Col xs={12} sm={6} md={6} lg={6}>
                {isNotHomeAndMobile &&
                 <Fragment>
+                  <LocationAutocomplete
+                      focusInput={false}
+                      label=""
+                      placeHolder="Escribe un lugar para centrar el mapa"
+                      helpText=""
+                      onChange={value => this.onAutocompleteChange(value)}
+                  />
                   <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
                     <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
                   </Checkbox>
@@ -365,7 +387,7 @@ export default translate([], { wait: true })(withTracker(() => {
   const zoomStored = store.get('firesmap_zoom');
   const marksStored = store.get('firesmap_marks');
   const showUnionStored = store.get('firesmap_showunion');
-  zoom.set(zoomStored || 8);
+  zoom.set(zoomStored || DEFZOOM);
   center.set(centerStored || [0, 0]);
   if (typeof marksStored === 'boolean') {
     marks.set(marksStored);
@@ -396,13 +418,13 @@ export default translate([], { wait: true })(withTracker(() => {
         mapSize.get()[1].lat
       );
       /* if (withIndustries) {
-        Meteor.subscribe(
-          'industriesMyloc',
-          mapSize.get()[0].lng,
-          mapSize.get()[0].lat,
-          mapSize.get()[1].lng,
-          mapSize.get()[1].lat
-        );
+      Meteor.subscribe(
+        'industriesMyloc',
+        mapSize.get()[0].lng,
+        mapSize.get()[0].lat,
+        mapSize.get()[1].lng,
+        mapSize.get()[1].lat
+      );
       } */
     }
   });

public/locales/en/common.json

@@ -223,5 +223,7 @@
   "Pantalla completa":
   "Fullscreen",
   "Salir de pantalla completa":
-  "Exit fullscreen mode"
+  "Exit fullscreen mode",
+  "Escribe un lugar para centrar el mapa":
+  "Write a place to center the map"
 }

public/locales/es/common.json

@@ -310,5 +310,7 @@
   "Pantalla completa":
   "Pantalla completa",
   "Salir de pantalla completa":
-  "Salir de pantalla completa"
+  "Salir de pantalla completa",
+  "Escribe un lugar para centrar el mapa":
+  "Escribe un lugar para centrar el mapa"
 }