Merge pull request #150 from harsh5902/master

resolved issue Include OSM link somewhere #54
nilsnolde · Mar 24, 2023 · 0cc557c · 0cc557c
2 parents ff2cb36 + e5784b4
commit 0cc557c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/Map/Map.css b/src/Map/Map.css
@@ -0,0 +1,12 @@
+#osm-button {
+  position: absolute;
+  bottom: 20px;
+  right: 60px;
+  z-index: 1000;
+}
+
+/* defining the container styles the map sits in */
+.map-style{
+  width: 100%;
+  height: 100vh;
+}
diff --git a/src/Map/Map.jsx b/src/Map/Map.jsx
@@ -31,17 +31,12 @@ import {
 } from 'utils/valhalla'
 import { colorMappings, buildHeightgraphData } from 'utils/heightgraph'
 import formatDuration from 'utils/date_time'
+import './Map.css'
 const OSMTiles = L.tileLayer(process.env.REACT_APP_TILE_SERVER_URL, {
   attribution:
     '<a href="https://map.project-osrm.org/about.html" target="_blank">About this service and privacy policy</a> | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 })
 
-// defining the container styles the map sits in
-const style = {
-  width: '100%',
-  height: '100vh',
-}
-
 const convertDDToDMS = (decimalDegrees) =>
   [
     0 | decimalDegrees,
@@ -827,6 +822,14 @@ class Map extends React.Component {
     }
   }
 
+  handleOpenOSM = () => {
+    const { map } = this
+    const { lat, lng } = map.getCenter()
+    const zoom = map.getZoom()
+    const osmURL = `https://www.openstreetmap.org/#map=${zoom}/${lat}/${lng}`
+    window.open(osmURL, '_blank')
+  }
+
   render() {
     const { activeTab } = this.props
     const MapPopup = (isInfo) => {
@@ -1028,7 +1031,16 @@ class Map extends React.Component {
     const leafletPopupDiv = document.querySelector('.leaflet-popup-content')
     return (
       <React.Fragment>
-        <div id="map" style={style} />
+        <div>
+          <div id="map" className="map-style" />
+          <button
+            className="ui primary button"
+            id="osm-button"
+            onClick={this.handleOpenOSM}
+          >
+            Open OSM
+          </button>
+        </div>
         <div>
           {this.state.showPopup && leafletPopupDiv
             ? ReactDOM.createPortal(