diff --git a/src/app/find-properties/[[...opa_id]]/page.tsx b/src/app/find-properties/[[...opa_id]]/page.tsx index 994fc1d0..fa18a00b 100644 --- a/src/app/find-properties/[[...opa_id]]/page.tsx +++ b/src/app/find-properties/[[...opa_id]]/page.tsx @@ -10,7 +10,7 @@ import { } from "@/components"; import { FilterProvider } from "@/context/FilterContext"; import { NextUIProvider, Spinner } from "@nextui-org/react"; -import { X } from "@phosphor-icons/react"; +import { X, GlobeHemisphereWest, ListBullets } from "@phosphor-icons/react"; import { MapGeoJSONFeature } from "maplibre-gl"; import StreetView from "../../../components/StreetView"; import { centroid } from "@turf/centroid"; @@ -180,7 +180,6 @@ const MapPage = ({ params }: MapPageProps) => { smallScreenMode, setShouldFilterSavedProperties, updateCurrentView, - updateSmallScreenMode, }; const isVisible = (mode: string) => smallScreenMode === mode ? "" : "max-sm:hidden"; @@ -306,6 +305,19 @@ const MapPage = ({ params }: MapPageProps) => { /> )} + + ) : ( + + ) + } + /> diff --git a/src/app/globals.css b/src/app/globals.css index f787aa75..b38e9e32 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -326,7 +326,8 @@ a .bg-color-none { /* Style override for map controls */ .maplibregl-ctrl button.maplibregl-ctrl-geolocate, .maplibregl-ctrl button.maplibregl-ctrl-zoom-in, -.maplibregl-ctrl button.maplibregl-ctrl-zoom-out { +.maplibregl-ctrl button.maplibregl-ctrl-zoom-out, +.maplibregl-ctrl button.custom-legend-info { border-radius: 0.25em; height: 40px; width: 40px; @@ -345,6 +346,14 @@ a .bg-color-none { background-image: url('data:image/svg+xml,') !important; } +.custom-legend-info-div { + top: 82%; + @apply left-7 fixed; +} + +.custom-legend-info-icon { + background-image: url('data:image/svg+xml,') !important; +} /* Tooltips for maplibre components, classes style the title attributes */ .maplibregl-ctrl button.maplibregl-ctrl-geolocate[title]:hover::after, .maplibregl-ctrl button.maplibregl-ctrl-zoom-in[title]:hover::after, diff --git a/src/components/MapLegendControl/MapLegend.tsx b/src/components/MapLegendControl/MapLegend.tsx index 4514ad09..83148274 100644 --- a/src/components/MapLegendControl/MapLegend.tsx +++ b/src/components/MapLegendControl/MapLegend.tsx @@ -1,9 +1,10 @@ import { ExpressionName } from "mapbox-gl"; -import React, { ReactElement } from "react"; +import React, { ReactElement, Dispatch, SetStateAction } from "react"; import { renderToStaticMarkup } from "react-dom/server"; import { FillLayerSpecification } from "maplibre-gl"; import { IControl, MapboxMap } from "react-map-gl"; + import "../../app/mapLegend.css"; interface LayerStyleMetadata { @@ -79,28 +80,32 @@ function MapLegend(layerStyle: FillLayerSpecification) { ); return ( -
-
- - {(layerStyle.metadata as LayerStyleMetadata).name} - -
    {paneBlocks}
-
-
+ <> +
console.log('hit') }> +
+ + {(layerStyle.metadata as LayerStyleMetadata).name} + +
    {paneBlocks}
+
+
+ ); } export class MapLegendControlClass implements IControl { private _map: MapboxMap | undefined; private _container: HTMLElement; + private handler: () => void; - constructor(layerStyle: FillLayerSpecification) { + constructor(layerStyle: FillLayerSpecification, setSmallScreenToggle: Dispatch>) { this._container = document.createElement("div"); this._container.classList.add("mapboxgl-ctrl", "mapboxgl-ctrl-legend"); // render legend as static markup so it can be rendered with map + this.handler = () => setSmallScreenToggle(s => !s); this._container.innerHTML = renderToStaticMarkup( ); @@ -109,10 +114,12 @@ export class MapLegendControlClass implements IControl { // able to add event listeners here for interactivity with layer onAdd = (map: MapboxMap) => { this._map = map; + this._container.addEventListener("click", this.handler); return this._container; }; onRemove = () => { + this._container.removeEventListener("click", this.handler); this._container.parentNode?.removeChild(this._container); this._map = undefined; }; diff --git a/src/components/MapLegendControl/MapLegendControl.tsx b/src/components/MapLegendControl/MapLegendControl.tsx index b216a8f5..0eee8ad2 100644 --- a/src/components/MapLegendControl/MapLegendControl.tsx +++ b/src/components/MapLegendControl/MapLegendControl.tsx @@ -1,15 +1,16 @@ import { ControlPosition, FillLayerSpecification } from "maplibre-gl"; -import React from "react"; +import React, { Dispatch, SetStateAction } from "react"; import { useControl } from "react-map-gl"; import { MapLegendControlClass } from "./MapLegend"; interface LegendOptions { position: ControlPosition; layerStyle: FillLayerSpecification; + setSmallScreenToggle: Dispatch>; } export default function MapLegendControl(props: LegendOptions) { - useControl(() => new MapLegendControlClass(props.layerStyle), { + useControl(() => new MapLegendControlClass(props.layerStyle, props.setSmallScreenToggle), { position: props.position, }); return null; diff --git a/src/components/PropertyMap.tsx b/src/components/PropertyMap.tsx index cbfcbc79..a31c6437 100644 --- a/src/components/PropertyMap.tsx +++ b/src/components/PropertyMap.tsx @@ -50,6 +50,7 @@ import { Info, X } from "@phosphor-icons/react"; import { centroid } from "@turf/centroid"; import { Position } from "geojson"; import { toTitleCase } from "../utilities/toTitleCase"; +import { ThemeButton } from "../components/ThemeButton"; type SearchedProperty = { coordinates: [number, number]; @@ -108,14 +109,27 @@ const layerStylePoints: CircleLayerSpecification = { // info icon in legend summary let summaryInfo: ReactElement | null = null; -const MapControls = () => ( - <> - - - - - -); +const MapControls = () => { + const [smallScreenToggle, setSmallScreenToggle] = useState(false); + return ( + <> + + + + {(smallScreenToggle || window.innerWidth > 640) ? + + : +
+ } + onPress={() => setSmallScreenToggle(s => !s)} + /> +
+ } + + ) +}; interface PropertyMapProps { featuresInView: MapGeoJSONFeature[]; @@ -147,6 +161,7 @@ const PropertyMap: FC = ({ coordinates: [-75.1628565788269, 39.97008211622267], address: "", }); + const [smallScreenToggle, setSmallScreenToggle] = useState(false); useEffect(() => { let protocol = new Protocol(); diff --git a/src/components/SidePanelControlBar.tsx b/src/components/SidePanelControlBar.tsx index e8a430a5..dd2abd10 100644 --- a/src/components/SidePanelControlBar.tsx +++ b/src/components/SidePanelControlBar.tsx @@ -5,9 +5,7 @@ import { BarClickOptions } from "@/app/find-properties/[[...opa_id]]/page"; import { BookmarkSimple, DownloadSimple, - Funnel, - GlobeHemisphereWest, - SquaresFour, + Funnel } from "@phosphor-icons/react"; import { ThemeButton } from "./ThemeButton"; import { useFilter } from "@/context/FilterContext"; @@ -22,7 +20,6 @@ type SidePanelControlBarProps = { smallScreenMode: string; setShouldFilterSavedProperties: (shouldFilter: boolean) => void; updateCurrentView: (view: BarClickOptions) => void; - updateSmallScreenMode: () => void; }; const SearchBarComponent: FC = ({ @@ -34,7 +31,6 @@ const SearchBarComponent: FC = ({ smallScreenMode, setShouldFilterSavedProperties, updateCurrentView, - updateSmallScreenMode, }) => { const filterRef = useRef(null); const savedRef = useRef(null); @@ -73,19 +69,6 @@ const SearchBarComponent: FC = ({ <>
{/* Left-aligned content: Total Properties in View */} - - ) : ( - - ) - } - />