Full screen on maps

imports/ui/components/Maps/FullScreenMap.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import FullscreenControl from 'react-leaflet-fullscreen';
+import 'react-leaflet-fullscreen/dist/styles.css';
+
+class FullScreenMap extends Component {
+  render() {
+    const { t } = this.props;
+    return (
+      <FullscreenControl
+          position="topleft"
+          title={t('Pantalla completa')}
+          titleCancel={t('Salir de pantalla completa')}
+      />
+    );
+  }
+}
+
+FullScreenMap.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+export default translate([], { wait: true })(FullScreenMap);

imports/ui/components/SelectionMap/SelectionMap.js

@@ -23,6 +23,8 @@ import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
 import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import { isChrome } from '/imports/ui/components/Utils/isMobile';
+import FullScreenMap from '/imports/ui/components/Maps/FullScreenMap';
+
 import './SelectionMap.scss';
 
 export const action = {
@@ -253,6 +255,7 @@ class SelectionMap extends Component {
                       </Button>
                   </ButtonGroup>
                 </Control>
+                <FullScreenMap />
           </Map>
         </Col>
       </Row>

imports/ui/pages/Fires/Fires.js

@@ -23,6 +23,7 @@ import FalsePositiveTypes from '/imports/api/FalsePositives/FalsePositiveTypes';
 import FalsePositivesCollection, { falsePositivesRemap } from '/imports/api/FalsePositives/FalsePositives';
 import IndustriesCollection, { industriesRemap } from '/imports/api/Industries/Industries';
 import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
+import FullScreenMap from '/imports/ui/components/Maps/FullScreenMap';
 import './Fires.scss';
 
 class Fire extends React.Component {
@@ -136,6 +137,7 @@ class Fire extends React.Component {
                  industries
              />
              <DefMapLayers satellite />
+             <FullScreenMap />
            </Map>
            <p>{t('Coordenadas:')} {fire.lat}, {fire.lon}</p>
            {(fire.type === 'modis' || fire.type === 'viirs') &&

imports/ui/pages/FiresMap/FiresMap.js

@@ -34,6 +34,7 @@ import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
 import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMobile';
 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 './FiresMap.scss';
 
@@ -316,6 +317,7 @@ class FiresMap extends React.Component {
                  <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
                </ButtonGroup>
              </Control>
+             <FullScreenMap />
            </Map>
            <Row>
              <Col xs={12} sm={12} md={12} lg={12}>

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -24,6 +24,7 @@ import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
 import { isChrome } from '/imports/ui/components/Utils/isMobile';
 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 './SubscriptionsMap.scss';
 
@@ -141,6 +142,7 @@ class SubscriptionsMap extends React.Component {
                </Button>
              </ButtonGroup>
            </Control>
+           <FullScreenMap />
          </Map>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12}>

package-lock.json

@@ -7535,6 +7535,11 @@
       "resolved": "https://registry.npmjs.org/leaflet-sleep/-/leaflet-sleep-0.5.1.tgz",
       "integrity": "sha1-kfhDPzjtu2uKm3jT0E7HOW6fYPY="
     },
+    "leaflet.fullscreen": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-1.4.4.tgz",
+      "integrity": "sha512-HxHDHAQt/Q7nMlo/v3MUhir30GXt4YXIbmyJT53EnnBAyXC6IbKXeCnl2Mlsj6V5kSBwh3J8No6btaBdAz64og=="
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
@@ -10385,6 +10390,14 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-leaflet-fullscreen": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/react-leaflet-fullscreen/-/react-leaflet-fullscreen-0.0.6.tgz",
+      "integrity": "sha512-YWP58+mgpyAbTPGdMRRWGuHV4GrkThmDRXth7qcVGqBxJTj1Nt4xy2zwOKcEYtfTimiG4lEXS18UQ+5cyuh0FQ==",
+      "requires": {
+        "leaflet.fullscreen": "1.4.4"
+      }
+    },
     "react-leaflet-google": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/react-leaflet-google/-/react-leaflet-google-3.2.1.tgz",

package.json

@@ -63,6 +63,7 @@
     "react-i18next": "^7.1.1",
     "react-leaflet": "^1.8.0",
     "react-leaflet-control": "^1.4.0",
+    "react-leaflet-fullscreen": "0.0.6",
     "react-leaflet-google": "^3.2.1",
     "react-leaflet-sidebarv2": "^0.5.1",
     "react-places-autocomplete": "^5.4.3",

public/locales/en/common.json

@@ -219,5 +219,9 @@
   "Neighborhoods monitoring and fighting fires? What is all this about?",
   "noActiveNeigFireInMap": "There are no fires recently reported by our users in this area.",
   "Es una industria (fuente: registro oficial)":
-  "It's an industry (source: oficial register)"
+  "It's an industry (source: oficial register)",
+  "Pantalla completa":
+  "Fullscreen",
+  "Salir de pantalla completa":
+  "Exit fullscreen mode"
 }

public/locales/es/common.json

@@ -306,5 +306,9 @@
   "¿Vecindarios vigilando y combatiendo fuegos? ¿de qué va todo esto?",
   "noActiveNeigFireInMap": "No hay fuegos notificados recientemente por nuestros usuarios/as en esta zona.",
   "Es una industria (fuente: registro oficial)":
-  "Es una industria (fuente: registro oficial)"
+  "Es una industria (fuente: registro oficial)",
+  "Pantalla completa":
+  "Pantalla completa",
+  "Salir de pantalla completa":
+  "Salir de pantalla completa"
 }