Created component to show a map on a modal window

package.json

@@ -29,6 +29,7 @@
     "chart.js": "^2.7.2",
     "classnames": "^2.2.6",
     "csvjson": "^5.1.0",
+    "leaflet": "^1.4.0",
     "moment": "^2.22.2",
     "promise": "^8.0.1",
     "prop-types": "^15.6.2",
@@ -41,6 +42,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "~1.5.0",
     "react-dom": "^16.7.0",
+    "react-leaflet": "^2.1.4",
     "react-moment": "^0.7.6",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",

src/index.js

@@ -8,6 +8,7 @@ import registerServiceWorker from './registerServiceWorker';
 import container from './container';
 import store from './container/store';
 import '../node_modules/react-datepicker/dist/react-datepicker.css';
+import '../node_modules/leaflet/dist/leaflet.css';
 import './common/react-tagsinput.scss';
 import './index.scss';
 

src/visits/SortableBarGraph.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
 import SortingDropdown from '../utils/SortingDropdown';
 import GraphCard from './GraphCard';
+import MapModal from './helpers/MapModal';
+
+const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
 
 export default class SortableBarGraph extends React.Component {
   static propTypes = {
@@ -14,6 +17,7 @@ export default class SortableBarGraph extends React.Component {
   state = {
     orderField: undefined,
     orderDir: undefined,
+    mapIsOpened: false,
   };
 
   render() {
@@ -23,7 +27,6 @@ export default class SortableBarGraph extends React.Component {
         return stats;
       }
 
-      const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
       const sortedPairs = sortBy(
         pipe(
           prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
@@ -35,10 +38,14 @@ export default class SortableBarGraph extends React.Component {
       return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
     };
 
+    const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
+
     return (
       <GraphCard stats={sortStats()} isBarChart>
         {title}
         <div className="float-right">
+          <button className="btn btn-link btn-sm" onClick={toggleMap}>Show in map</button>
+          <MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
           <SortingDropdown
             isButton={false}
             right

src/visits/helpers/MapModal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import * as PropTypes from 'prop-types';
+import './MapModal.scss';
+
+const propTypes = {
+  toggle: PropTypes.func,
+  isOpen: PropTypes.bool,
+  title: PropTypes.string,
+};
+
+const madridLat = 40.416775;
+const madridLong = -3.703790;
+const latLong = [ madridLat, madridLong ];
+
+const MapModal = ({ toggle, isOpen, title }) => (
+  <Modal toggle={toggle} isOpen={isOpen} centered size="lg" className="map-modal__modal">
+    <ModalHeader toggle={toggle}>{title}</ModalHeader>
+    <ModalBody>
+      <Map center={latLong} zoom="13">
+        <TileLayer
+          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={latLong}>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker>
+      </Map>
+    </ModalBody>
+  </Modal>
+);
+
+MapModal.propTypes = propTypes;
+
+export default MapModal;

src/visits/helpers/MapModal.scss

@@ -0,0 +1,38 @@
+@import '../../utils/base';
+
+.map-modal__modal {
+  @media (min-width: $mdMin) {
+    $margin: 20px;
+    $offset: $margin * 2;
+
+    width: calc(100% - #{$offset});
+    max-width: calc(100% - #{$offset});
+    height: calc(100% - #{$offset});
+    margin: $margin;
+  }
+
+  @media (max-width: $smMax) {
+    $margin: 10px;
+    $offset: $margin * 2;
+
+    width: calc(100% - #{$offset});
+    max-width: calc(100% - #{$offset});
+    height: calc(100% - #{$offset});
+    margin: $margin;
+  }
+}
+
+.map-modal__modal .modal-content {
+  height: 100%;
+}
+
+.map-modal__modal .modal-body {
+  padding: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.map-modal__modal .leaflet-container {
+  flex: 1 1 auto;
+  border-radius: 0 0 .3rem .3rem;
+}

yarn.lock

@@ -736,7 +736,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
   dependencies:
@@ -4356,7 +4356,7 @@ hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e"
   dependencies:
@@ -5720,6 +5720,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b"
+  integrity sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw==
+
 left-pad@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
@@ -5804,6 +5809,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash-es@^4.0.0:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
+  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
+
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -7589,11 +7599,6 @@ postcss-reduce-initial@^4.0.2:
 postcss-reduce-transforms@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561"
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
 
 postcss-replace-overflow-wrap@^3.0.0:
   version "3.0.0"
@@ -8062,6 +8067,17 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.6.1, react-is@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
 
+react-leaflet@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.1.4.tgz#44192a972892c690d4148e48dacd613168fd8cc4"
+  integrity sha512-OJvLq13ID5X6H/AM7woPmuqK7qEjT7RE81kysYU3X4HACsumAmvRuWffffxQ8Fl+m2cxkqF78eRmsWj5w9r1xw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    hoist-non-react-statics "^3.2.1"
+    lodash "^4.0.0"
+    lodash-es "^4.0.0"
+    warning "^4.0.0"
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8897,11 +8913,6 @@ shebang-regex@^1.0.0:
 shell-quote@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
-  dependencies:
-    array-filter "~0.0.0"
-    array-map "~0.0.0"
-    array-reduce "~0.0.0"
-    jsonify "~0.0.0"
 
 shellwords@^0.1.1:
   version "0.1.1"
@@ -10109,7 +10120,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.1:
+warning@^4.0.0, warning@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607"
   dependencies: