Adds Button To Change Map Style

.eslintrc.json

@@ -5,6 +5,7 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
+  "root": true,
   "extends": [
     "next/core-web-vitals",
     "plugin:react/recommended",

next.config.js

@@ -6,7 +6,7 @@ module.exports = {
     PROJECT_ROOT: __dirname,
   },
   images: {
-    domains: ['storage.googleapis.com'],
+    domains: ['storage.googleapis.com', 'cloud.maptiler.com'],
   },
   async redirects() {
     return [

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+    "@maptiler/sdk": "^2.5.1",
     "@nextui-org/react": "^2.4.6",
     "@phosphor-icons/react": "^2.1.7",
     "@turf/centroid": "^7.0.0",
@@ -37,14 +38,6 @@
     "typescript": "5.5.3"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.2.5",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-custom-rules": "file:./eslint-plugin-custom-rules",
-    "eslint-plugin-react": "^7.34.4",
-    "eslint-plugin-prettier": "^5.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
@@ -57,6 +50,14 @@
     "@types/pg": "^8.11.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-custom-rules": "file:./eslint-plugin-custom-rules",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.34.4",
     "postcss-nesting": "^12.1.5",
     "postcss-preset-env": "^9.6.0",
     "semantic-release": "^24.0.0"

src/components/MapStyleSwitcher.tsx

@@ -0,0 +1,84 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+interface MapStyleSwitcherProps {
+  handleStyleChange: (style: string) => void;
+}
+
+const MapStyleSwitcher: React.FC<MapStyleSwitcherProps> = ({
+  handleStyleChange,
+}) => {
+  const [activeStyle, setActiveStyle] = useState('DATAVIZ');
+  const [isHovered, setIsHovered] = useState(false);
+  useEffect(() => {
+    console.log('MapStyleSwitcher rendered', handleStyleChange);
+  });
+  const baseMaps = {
+    STREETS: {
+      name: 'Street',
+      img: 'https://cloud.maptiler.com/static/img/maps/streets.png',
+    },
+    DATAVIZ: {
+      name: 'DataVisualization',
+      img: 'https://cloud.maptiler.com/static/img/maps/dataviz.png',
+    },
+    HYBRID: {
+      name: 'Hybrid',
+      img: 'https://cloud.maptiler.com/static/img/maps/hybrid.png',
+    },
+  };
+
+  const onClick = (key: string) => {
+    setActiveStyle(key);
+    console.log(handleStyleChange);
+    handleStyleChange(baseMaps[key].name);
+  };
+
+  return (
+    <div
+      className="relative maplibregl-ctrl maplibregl-ctrl-basemaps"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Image
+        src={baseMaps[activeStyle].img}
+        alt={activeStyle}
+        width={65}
+        height={65}
+        title={activeStyle.toLowerCase()}
+        className="cursor-pointer w-16 h-16 rounded-md border-2 border-gray-400 z-10"
+      />
+
+      <div
+        className={`absolute flex flex-row items-center transition-transform duration-300 ${
+          isHovered
+            ? 'translate-x-20 opacity-100'
+            : 'translate-x-0 opacity-0 pointer-events-none'
+        }`}
+        style={{
+          left: '4rem',
+          top: '50%',
+          transform: 'translateY(-50%)',
+        }}
+      >
+        {Object.keys(baseMaps)
+          .filter((key) => key !== activeStyle)
+          .map((key) => (
+            <Image
+              key={key}
+              src={baseMaps[key].img}
+              alt={key}
+              width={65}
+              height={65}
+              title={key.toLowerCase()}
+              onClick={() => onClick(key)}
+              className={`cursor-pointer rounded-md border-2 border-transparent hover:border-gray-400`}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default MapStyleSwitcher;

src/components/PropertyMap.tsx

@@ -1,5 +1,5 @@
 'use client';
-
+import '../components/components-css/PropertyMap.css';
 import {
   FC,
   useEffect,
@@ -51,6 +51,7 @@ import { centroid } from '@turf/centroid';
 import { Position } from 'geojson';
 import { toTitleCase } from '../utilities/toTitleCase';
 import { ThemeButton } from '../components/ThemeButton';
+import MapStyleSwitcher from './MapStyleSwitcher';
 
 type SearchedProperty = {
   coordinates: [number, number];
@@ -106,16 +107,31 @@ const layerStylePoints: CircleLayerSpecification = {
   },
 };
 
+const mapStyles = {
+  DataVisualization: {
+    url: `https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`,
+  },
+  Hybrid: {
+    url: `https://api.maptiler.com/maps/hybrid/style.json?key=${maptilerApiKey}`,
+  },
+  Street: {
+    url: `https://api.maptiler.com/maps/streets/style.json?key=${maptilerApiKey}`,
+  },
+};
+
 // info icon in legend summary
 let summaryInfo: ReactElement | null = null;
 
-const MapControls = () => {
+const MapControls: React.FC<{
+  handleStyleChange: (styleName: string) => void;
+}> = ({ handleStyleChange }) => {
   const [smallScreenToggle, setSmallScreenToggle] = useState<boolean>(false);
   return (
     <>
       <NavigationControl showCompass={false} position="bottom-right" />
       <GeolocateControl position="bottom-right" />
       <ScaleControl />
+      <MapStyleSwitcher handleStyleChange={handleStyleChange} />
       {smallScreenToggle || window.innerWidth > 640 ? (
         <MapLegendControl
           position="bottom-left"
@@ -164,6 +180,9 @@ const PropertyMap: FC<PropertyMapProps> = ({
   const { appFilter } = useFilter();
   const [popupInfo, setPopupInfo] = useState<any | null>(null);
   const [map, setMap] = useState<MaplibreMap | null>(null);
+  const [currentStyle, setCurrentStyle] = useState<string>(
+    'Data Visualization View'
+  );
   const geocoderRef = useRef<MapboxGeocoder | null>(null);
   const [searchedProperty, setSearchedProperty] = useState<SearchedProperty>({
     coordinates: [-75.1628565788269, 39.97008211622267],
@@ -183,6 +202,10 @@ const PropertyMap: FC<PropertyMapProps> = ({
     handleMapClick(e.lngLat);
   };
 
+  const handleStyleChange = (styleName: string) => {
+    setCurrentStyle(styleName);
+  };
+
   const moveMap = (targetPoint: LngLatLike) => {
     if (map) {
       map.easeTo({
@@ -421,27 +444,76 @@ const PropertyMap: FC<PropertyMapProps> = ({
     if (map) {
       updateFilter();
     }
-  }, [map, appFilter]);
+  }, [map, appFilter, currentStyle]);
 
   const changeCursor = (e: any, cursorType: 'pointer' | 'default') => {
     e.target.getCanvas().style.cursor = cursorType;
   };
 
+  map?.on('load', () => {
+    console.log('Map loaded, checking layers...');
+
+    if (!map.getLayer('vacant_properties_tiles_points')) {
+      map.addLayer(layerStylePoints);
+    }
+    if (!map.getLayer('vacant_properties_tiles_polygons')) {
+      map.addLayer(layerStylePolygon);
+    }
+
+    if (
+      map.getLayer('vacant_properties_tiles_points') &&
+      map.getLayer('vacant_properties_tiles_polygons')
+    ) {
+      console.log('Both layers found, applying filters...');
+
+      const mapFilter = Object.entries(appFilter).reduce(
+        (acc, [property, filterItem]) => {
+          if (filterItem.values.length) {
+            const thisFilterGroup: any = ['any'];
+            filterItem.values.forEach((item) => {
+              if (filterItem.useIndexOfFilter) {
+                thisFilterGroup.push([
+                  '>=',
+                  ['index-of', item, ['get', property]],
+                  0,
+                ]);
+              } else {
+                thisFilterGroup.push(['in', ['get', property], item]);
+              }
+            });
+            acc.push(thisFilterGroup);
+          }
+          return acc;
+        },
+        [] as any[]
+      );
+
+      map.setFilter('vacant_properties_tiles_points', ['all', ...mapFilter]);
+      map.setFilter('vacant_properties_tiles_polygons', ['all', ...mapFilter]);
+    } else {
+      console.warn('Layers not found, skipping filter application.');
+    }
+  });
   // map load
   return (
     <div className="customized-map relative max-sm:min-h-[calc(100svh-100px)] max-sm:max-h-[calc(100svh-100px) h-full overflow-auto w-full">
       <Map
         mapLib={maplibregl as any}
         initialViewState={initialViewState}
-        mapStyle={`https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`}
+        mapStyle={mapStyles[currentStyle]?.url}
         onMouseEnter={(e) => changeCursor(e, 'pointer')}
         onMouseLeave={(e) => changeCursor(e, 'default')}
         onClick={onMapClick}
         minZoom={MIN_MAP_ZOOM}
         maxZoom={MAX_MAP_ZOOM}
         interactiveLayerIds={layers}
         onError={(e) => {
-          setHasLoadingError(true);
+          console.log(e);
+          if (
+            e.message ===
+            "The layer 'vacant_properties_tiles_polygons' does not exist in the map's style and cannot be queried for features."
+          )
+            setHasLoadingError(true);
         }}
         onLoad={(e) => {
           setMap(e.target);
@@ -451,7 +523,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
         }}
         onMoveEnd={handleSetFeatures}
       >
-        <MapControls />
+        <MapControls handleStyleChange={handleStyleChange} />
         {popupInfo && (
           <Popup
             className="customized-map-popup"

src/components/components-css/PropertyMap.css

@@ -0,0 +1,16 @@
+.map-style-button {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1;
+  padding: 10px 15px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.map-style-button:hover {
+  background: #e0e0e0;
+}