TODO: Display overlay when feature is clicked

refs #49

app/listings/map.tsx

@@ -142,6 +142,7 @@ export function ListingsMap(props: ListingsMapInterface) {
             }),
         })
 
+        // Change features display style based on the map's zoom level
         let featureDisplayState: 'icon' | 'text' = 'icon';
         const MAP_ZOOM_TEXT = 15;
         map.on('moveend', (e) => {
@@ -157,13 +158,14 @@ export function ListingsMap(props: ListingsMapInterface) {
             }
         })
 
+        // Change feature display style to active when hovered upon
         let activeIndex: number = -1;
         let previousStyle: StyleLike | undefined;
         map.on('pointermove', (e) => {
             // Hover (revert style)
             if (activeIndex >= 0) {
-                // Use icons features if zoom level is big
-                // Use text features if zoom level is small
+                // Uses icon features if zoom level is big
+                // Uses text features if zoom level is small
                 let activeFeature = mapFeatures.iconFeatures.at(activeIndex);
                 if (featureDisplayState === 'text') {
                     activeFeature = mapFeatures.textFeatures.at(activeIndex);
@@ -184,10 +186,6 @@ export function ListingsMap(props: ListingsMapInterface) {
                 const hoveredFeature = hoveredFeatures.at(hoveredFeatures.length - 1) as Feature;
                 const hoveredIndex = NumberUtils.toNumber(hoveredFeature.getId(), -1)
 
-                // TODO: Display popup/banner of listing card
-                // 1. https://openlayers.org/en/latest/examples/overlay.html (HTML only)
-                // 2. https://openlayers.org/en/latest/examples/popup.html (Bootstrap)
-                // 3. https://openlayers.org/en/latest/examples/select-features.html
                 if (hoveredIndex !== activeIndex) {
                     activeIndex = hoveredIndex
                     const activeFeature = mapFeatures.activeFeatures.at(activeIndex);
@@ -200,6 +198,16 @@ export function ListingsMap(props: ListingsMapInterface) {
             })
         })
 
+        // TODO: Display popup/banner of listing card
+        // 1. https://openlayers.org/en/latest/examples/overlay.html (Bootstrap)
+        // 2. https://openlayers.org/en/latest/examples/popup.html (HTML only)
+        // 3. https://openlayers.org/en/latest/examples/select-features.html
+        map.on('click', (e) => {
+            if (activeIndex >= 0) {
+                console.log("You clicked a feature");
+            }
+        })
+
         return () => map.dispose()
     }, [])