Created component to show a map on a modal window

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