Add marker callback

2 files changed, 41 insertions, 6 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index f2ac1b7b..fadfe9e7 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,5 +1,6 @@
 import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import mapboxgl from 'mapbox-gl';
 
 import mapManager from './mapManager';
 
@@ -52,13 +53,17 @@ const MainMap = () => {
     mapManager.registerListener(() => setMapReady(true));
   }, []);
 
+  const markerClickHandler = (event) => {
+    // TODO
+  };
+
   useEffect(() => {
     if (mapReady) {
       mapManager.map.addSource('positions', {
         'type': 'geojson',
         'data': positions,
       });
-      mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}');
+      mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}', markerClickHandler);
 
       const bounds = mapManager.calculateBounds(positions.features);
       if (bounds) {
@@ -69,8 +74,7 @@ const MainMap = () => {
       }
 
       return () => {
-        mapManager.map.removeLayer('device-icon');
-        mapManager.map.removeSource('positions');
+        mapManager.removeLayer('device-icon', 'positions');
       };
     }
   }, [mapReady]);
diff --git a/modern/src/mapManager.js b/modern/src/mapManager.js
index 9c2915b3..7c7e2929 100644
--- a/modern/src/mapManager.js
+++ b/modern/src/mapManager.js
@@ -40,7 +40,11 @@ const loadIcon = (key, background, url) => {
   });
 };
 
-const addLayer = (id, source, icon, text) => {
+const layerClickCallbacks = {};
+const layerMouseEnterCallbacks = {};
+const layerMauseLeaveCallbacks = {};
+
+const addLayer = (id, source, icon, text, onClick) => {
   const layer = {
     'id': id,
     'type': 'symbol',
@@ -66,6 +70,33 @@ const addLayer = (id, source, icon, text) => {
     }
   }
   map.addLayer(layer);
+
+  layerClickCallbacks[id] = onClick;
+  map.on('click', id, onClick);
+
+  layerMouseEnterCallbacks[id] = () => {
+    map.getCanvas().style.cursor = 'pointer';
+  };
+  map.on('mouseenter', id, layerMouseEnterCallbacks[id]);
+
+  layerMauseLeaveCallbacks[id] = () => {
+    map.getCanvas().style.cursor = '';
+  };
+  map.on('mouseleave', id, layerMauseLeaveCallbacks[id]);
+}
+
+const removeLayer = (id, source) => {
+  map.off('click', id, layerClickCallbacks[id]);
+  delete layerClickCallbacks[id];
+
+  map.off('mouseenter', id, layerMouseEnterCallbacks[id]);
+  delete layerMouseEnterCallbacks[id];
+
+  map.off('mouseleave', id, layerMauseLeaveCallbacks[id]);
+  delete layerMauseLeaveCallbacks[id];
+
+  map.removeLayer(id);
+  map.removeSource(source);
 }
 
 const calculateBounds = features => {
@@ -138,8 +169,7 @@ const map = new mapboxgl.Map({
 map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', () => {
-
-  loadImage('images/background.svg').then((background) => {
+  loadImage('images/background.svg').then(background => {
     Promise.all([
       loadIcon('icon-marker', background, 'images/icon/marker.svg')
     ]).then(() => {
@@ -157,5 +187,6 @@ export default {
   map,
   registerListener,
   addLayer,
+  removeLayer,
   calculateBounds,
 };