Created component to show a map on a modal window

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