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}
-
-
-
-
+ <>
+ console.log('hit') }>
+
+
+ {(layerStyle.metadata as LayerStyleMetadata).name}
+
+
+
+
+ >
);
}
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 */}
-
- ) : (
-
- )
- }
- />