diff --git a/app/listings/map.tsx b/app/listings/map.tsx index 2a86805f..7361c331 100644 --- a/app/listings/map.tsx +++ b/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() }, [])