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}>