Implement status popup

1 files changed, 26 insertions, 3 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index fadfe9e7..5ba50982 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,8 +1,11 @@
 import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import ReactDOM from 'react-dom';
+import { Provider, useSelector } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 
 import mapManager from './mapManager';
+import store from './store';
+import StatusView from './StatusView';
 
 const MainMap = () => {
   const containerEl = useRef(null);
@@ -22,10 +25,11 @@ const MainMap = () => {
   const createFeature = (state, position) => {
     const device = state.devices.items[position.deviceId] || null;
     return {
+      deviceId: position.deviceId,
       name: device ? device.name : '',
     }
   };
-  
+
   const positions = useSelector(state => ({
     type: 'FeatureCollection',
     features: Object.values(state.positions.items).map(position => ({
@@ -54,7 +58,26 @@ const MainMap = () => {
   }, []);
 
   const markerClickHandler = (event) => {
-    // TODO
+    const feature = event.features[0];
+    let coordinates = feature.geometry.coordinates.slice();
+    while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) {
+      coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
+    }
+
+    const placeholder = document.createElement('div');
+    ReactDOM.render(
+      <Provider store={store}>
+        <StatusView deviceId={feature.properties.deviceId} />
+      </Provider>,
+      placeholder);
+
+    new mapboxgl.Popup({
+      offset: 25,
+      anchor: 'top'
+    })
+      .setDOMContent(placeholder)
+      .setLngLat(coordinates)
+      .addTo(mapManager.map);
   };
 
   useEffect(() => {