#3045: Add all locations overlay to the map

client/src/components/Leaflet.js

@@ -1,4 +1,5 @@
-import { Control, CRS, Icon, Map, Marker, TileLayer } from "leaflet"
+import { Control, CRS, DivIcon, Icon, Map, Marker, TileLayer } from "leaflet"
+import AppContext from "components/AppContext"
 import "leaflet-defaulticon-compatibility"
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"
 import {
@@ -14,8 +15,12 @@ import "leaflet.markercluster/dist/MarkerCluster.css"
 import "leaflet.markercluster/dist/MarkerCluster.Default.css"
 import "leaflet/dist/leaflet.css"
 import { Location } from "models"
+import GeoLocation from "pages/locations/GeoLocation"
 import PropTypes from "prop-types"
 import React, { useCallback, useEffect, useRef, useState } from "react"
+import ReactDOM from "react-dom"
+import MARKER_FLAG_BLUE_2X from "resources/leaflet/marker-flag-blue-2x.png"
+import MARKER_FLAG_BLUE from "resources/leaflet/marker-flag-blue.png"
 import MARKER_ICON_2X from "resources/leaflet/marker-icon-2x.png"
 import MARKER_ICON from "resources/leaflet/marker-icon.png"
 import MARKER_SHADOW from "resources/leaflet/marker-shadow.png"
@@ -64,6 +69,14 @@ const icon = new Icon({
   shadowSize: [41, 41]
 })
 
+const locationIcon = new Icon({
+  iconUrl: MARKER_FLAG_BLUE,
+  iconRetinaUrl: MARKER_FLAG_BLUE_2X,
+  iconSize: [64, 64],
+  iconAnchor: [18, 62],
+  popupAnchor: [2, -58]
+})
+
 const addLayers = (map, layerControl) => {
   let defaultLayer = null
   Settings.imagery.baseLayers.forEach(layerConfig => {
@@ -85,11 +98,12 @@ const addLayers = (map, layerControl) => {
   }
 }
 
-const Leaflet = ({
+const BaseLeaflet = ({
   width,
   height,
   marginBottom,
   markers,
+  allLocations,
   mapId: initialMapId,
   onMapClick
 }) => {
@@ -108,6 +122,7 @@ const Leaflet = ({
 
   const [map, setMap] = useState(null)
   const [markerLayer, setMarkerLayer] = useState(null)
+  const [layerControl, setLayerControl] = useState(null)
   const [doInitializeMarkerLayer, setDoInitializeMarkerLayer] = useState(false)
   const prevMarkersRef = useRef()
 
@@ -121,7 +136,8 @@ const Leaflet = ({
           icon: icon,
           draggable: m.draggable || false,
           autoPan: m.autoPan || false,
-          id: m.id
+          id: m.id,
+          zIndexOffset: 1000
         })
         if (m.name) {
           marker.bindPopup(m.name)
@@ -166,6 +182,7 @@ const Leaflet = ({
     const layerControl = new Control.Layers({}, {}, { collapsed: false })
     layerControl.addTo(newMap)
     addLayers(newMap, layerControl)
+    setLayerControl(layerControl)
 
     setMap(newMap)
 
@@ -238,20 +255,82 @@ const Leaflet = ({
     widthPropUnchanged
   ])
 
+  useEffect(() => {
+    if (!map || !layerControl || !allLocations?.length) {
+      return
+    }
+    const allMarkers = allLocations
+      .filter(loc => Location.hasCoordinates(loc))
+      .map(location => {
+        const popupContent = document.createElement("div")
+        popupContent.setAttribute("style", "width: 300px;text-align: center")
+
+        return new Marker([location.lat, location.lng], {
+          icon: locationIcon,
+          draggable: false,
+          autoPan: false,
+          id: location.uuid
+        })
+          .bindTooltip(location.name, {
+            direction: "top",
+            permanent: true,
+            offset: [0, -58]
+          })
+          .bindPopup(popupContent)
+          .on("popupopen", e => {
+            // TODO LinkTo component will be utilized here to provide routing
+            ReactDOM.render(
+              <>
+                <b>{location.name}</b> @{" "}
+                <GeoLocation lat={location.lat} lng={location.lng} />
+              </>,
+              e.popup.getContent()
+            )
+          })
+      })
+
+    const locationsLayer = new MarkerClusterGroup({
+      iconCreateFunction: function(cluster) {
+        return new DivIcon({
+          className: "all-locations-marker-cluster-icon-container",
+          html: `
+              <img src="${MARKER_FLAG_BLUE}" class="alm-cluster-icon" alt="" />
+              <div class="alm-cluster-text">${cluster.getChildCount()}</div>
+          `
+        })
+      }
+    }).addLayers(allMarkers)
+
+    layerControl.addOverlay(locationsLayer, "All Locations")
+    locationsLayer.addTo(map) // make "All Locations" selected by default
+
+    return () => {
+      layerControl.removeLayer(locationsLayer)
+      map.removeLayer(locationsLayer)
+    }
+  }, [map, layerControl, allLocations])
+
   return <div id={mapId} style={style} />
 }
-Leaflet.propTypes = {
+BaseLeaflet.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   marginBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   markers: PropTypes.array,
+  allLocations: PropTypes.arrayOf(PropTypes.object).isRequired,
   mapId: PropTypes.string, // pass this when you have more than one map on a page
   onMapClick: PropTypes.func
 }
-Leaflet.defaultProps = {
+BaseLeaflet.defaultProps = {
   width: "100%",
   height: "500px",
   marginBottom: "18px"
 }
 
+const Leaflet = props => (
+  <AppContext.Consumer>
+    {context => <BaseLeaflet allLocations={context.allLocations} {...props} />}
+  </AppContext.Consumer>
+)
+
 export default Leaflet

client/src/index.css

@@ -1098,3 +1098,36 @@ header.searchPagination {
 		height: 100% !important;
 	}
 }
+
+.all-locations-marker-cluster-icon-container {
+	border: 1px solid #3272cb;
+	position: relative !important;
+	border-radius: 6px;
+	background: white;
+}
+
+.all-locations-marker-cluster-icon-container:hover {
+	z-index: 9999 !important;
+}
+
+.all-locations-marker-cluster-icon-container .alm-cluster-icon {
+	transform-origin: bottom center;
+	transform: translate(-14px, -54px);
+	/* Prevents hover on parent container. If the mouse is on the image, parent container is not hovered while
+	 other childs and parent itself remains hoverable. Image is much larger than the container and it overflows parent.
+	 If hover is not prevented on the image then parent receives "z-index: 9999" which makes any marker beneath unclickable. */
+	pointer-events: none;
+}
+
+.all-locations-marker-cluster-icon-container .alm-cluster-text {
+	width: 34px;
+	height: 26px;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	transform: translate(3px, -36px);
+	font-size: 14px;
+	padding: 3px 0 0 5px;
+	color: white;
+	font-weight: bold;
+}

client/src/pages/App.js

@@ -124,6 +124,15 @@ const GQL_GET_APP_DATA = gql`
         shortName
       }
     }
+
+    locationList(query: { pageSize: 0 }) {
+      list {
+        uuid
+        name
+        lat
+        lng
+      }
+    }
   }
 `
 
@@ -161,7 +170,8 @@ const App = ({ pageDispatchers, pageProps }) => {
         appSettings: appState.settings,
         currentUser: appState.currentUser,
         loadAppData: refetch,
-        notifications: appState.notifications
+        notifications: appState.notifications,
+        allLocations: appState.allLocations
       }}
     >
       <ResponsiveLayout
@@ -205,12 +215,15 @@ const App = ({ pageDispatchers, pageProps }) => {
 
     const currentUser = new Person(data.me)
     const notifications = getNotifications(currentUser)
+    const allLocations = data?.locationList?.list || []
+
     return {
       currentUser,
       settings,
       advisorOrganizations,
       principalOrganizations,
-      notifications
+      notifications,
+      allLocations
     }
   }
 }

client/src/pages/locations/Form.js

@@ -33,7 +33,7 @@ const GQL_UPDATE_LOCATION = gql`
 `
 
 const LocationForm = ({ edit, title, initialValues }) => {
-  const { currentUser } = useContext(AppContext)
+  const { currentUser, loadAppData } = useContext(AppContext)
   const history = useHistory()
   const [error, setError] = useState(null)
   const canEditName =
@@ -245,6 +245,8 @@ const LocationForm = ({ edit, title, initialValues }) => {
         ? response[operation].uuid
         : initialValues.uuid
     })
+    // After successful submit, reload all locations data
+    loadAppData()
     // After successful submit, reset the form in order to make sure the dirty
     // prop is also reset (otherwise we would get a blocking navigation warning)
     form.resetForm()