From 5d216d81d42fe7b990fb13edc751791702a931ed Mon Sep 17 00:00:00 2001 From: vjrj Date: Tue, 27 Feb 2018 17:46:00 +0100 Subject: [PATCH] Location search in Fire Map --- .../LocationAutocomplete.js} | 14 +++---- .../FireSubscription/FireSubscription.js | 6 +-- imports/ui/pages/FiresMap/FiresMap.js | 42 ++++++++++++++----- public/locales/en/common.json | 4 +- public/locales/es/common.json | 4 +- 5 files changed, 47 insertions(+), 23 deletions(-) rename imports/ui/{pages/FireSubscription/SubsAutocomplete.js => components/LocationAutocomplete/LocationAutocomplete.js} (90%) diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js similarity index 90% rename from imports/ui/pages/FireSubscription/SubsAutocomplete.js rename to imports/ui/components/LocationAutocomplete/LocationAutocomplete.js index 0f6a852..c781b55 100644 --- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js +++ b/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 (
- - {t(label)} - + { label.length > 0 && {t(label)} } - {t(helpText)} + { helpText.length > 0 && {t(helpText)} }
); } } -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); diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js index 4aac3b7..8013b86 100644 --- a/imports/ui/pages/FireSubscription/FireSubscription.js +++ b/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 &&
- { + 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
; + } + 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 { {isNotHomeAndMobile && + this.onAutocompleteChange(value)} + /> this.setShowSubsUnion(e.target.checked)}> Resaltar en verde el área vigilada por nuestros usuarios/as (*) @@ -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 + ); } */ } }); diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 09ac8d8..909a0bb 100644 --- a/public/locales/en/common.json +++ b/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" } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index fd3c095..6f2051f 100644 --- a/public/locales/es/common.json +++ b/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" }