div over leaflet map

1 files changed, 26 insertions, 12 deletions

diff --git a/client/map/index.js b/client/map/index.js
index d38855bf..53d9439d 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -2,25 +2,25 @@ import L from 'leaflet'
 import './leaflet.bezier'
 
 const arcStyles = {
-  'edu': {
+  edu: {
     color: 'rgb(245, 246, 150)',
     fillColor: 'rgb(245, 246, 150)',
     opacity: 0.5,
     weight: '1',
   },
-  'company': {
+  company: {
     color: 'rgb(50, 100, 246)',
     fillColor: 'rgb(50, 100, 246)',
     opacity: 1.0,
     weight: '2',
   },
-  'gov': {
+  gov: {
     color: 'rgb(245, 150, 100)',
     fillColor: 'rgb(245, 150, 150)',
     opacity: 1.0,
     weight: '2',
   },
-  'mil': {
+  mil: {
     color: 'rgb(245, 0, 0)',
     fillColor: 'rgb(245, 0, 0)',
     opacity: 1.0,
@@ -79,17 +79,31 @@ export default function append(el, payload) {
   }
 
   // ....i dont think the sort order does anything??
-  citations.sort((a,b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
-  .forEach(citation => {
-    const address = citation.addresses[0]
-    const latlng = [address.lat, address.lng].map(n => parseFloat(n))
-    if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
-    addMarker(map, latlng, citation.title, address.name)
-    addArc(map, source, latlng, arcStyles[address.type])
-  })
+  citations.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
+    .forEach(citation => {
+      const citationAddress = citation.addresses[0]
+      const latlng = [citationAddress.lat, citationAddress.lng].map(n => parseFloat(n))
+      if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
+      addMarker(map, latlng, citation.title, citationAddress.name)
+      addArc(map, source, latlng, arcStyles[citationAddress.type])
+    })
 
   console.log(paper)
 
   const rootMarker = addMarker(map, source, paper.title, paper.address)
   rootMarker.openPopup()
+
+  // a transparent div to cover the map, so normal scroll events will not be eaten by leaflet
+  const mapCover = document.createElement("div")
+  mapCover.classList.add("map_cover")
+  mapCover.innerHTML = "<div class='cover_message'>Click here to explore the map</div>"
+  mapCover.querySelector('div').addEventListener('click', () => {
+    el.removeChild(mapCover)
+  })
+  function stopPropagation(e) {
+    e.stopPropagation()
+  }
+  mapCover.addEventListener('mousewheel', stopPropagation, true)
+  mapCover.addEventListener('DOMMouseScroll', stopPropagation, true)
+  el.appendChild(mapCover)
 }