Adds Button To Change Map Style

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

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@maptiler/sdk": "^2.5.1",
     "@maptiler/geocoding-control": "^1.4.1",
     "@nextui-org/react": "^2.4.6",
     "@phosphor-icons/react": "^2.1.7",

src/components/MapStyleSwitcher.tsx

@@ -0,0 +1,91 @@
+'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);
+  type BaseMap = {
+    name: string;
+    img: string;
+  };
+
+  type BaseMaps = Record<string, BaseMap>;
+
+  const baseMaps: BaseMaps = {
+    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',
+    },
+    STREETS: {
+      name: 'Street',
+      img: 'https://cloud.maptiler.com/static/img/maps/streets.png',
+    },
+  };
+
+  useEffect(() => {
+    handleStyleChange(baseMaps[activeStyle].name);
+  }, [activeStyle]);
+
+  const onClick = (key: string) => {
+    setActiveStyle(key);
+    handleStyleChange(baseMaps[key].name);
+  };
+
+  return (
+    <div
+      className="relative maplibregl-ctrl maplibregl-ctrl-basemaps p-2 w-1/5"
+      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 pl-2 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,
@@ -25,6 +25,7 @@ import Map, {
 } from 'react-map-gl/maplibre';
 import maplibregl, {
   Map as MaplibreMap,
+  IControl,
   PointLike,
   MapGeoJSONFeature,
   ColorSpecification,
@@ -49,6 +50,13 @@ import { centroid } from '@turf/centroid';
 import { Position } from 'geojson';
 import { toTitleCase } from '../utilities/toTitleCase';
 import { ThemeButton } from '../components/ThemeButton';
+import MapStyleSwitcher from './MapStyleSwitcher';
+
+type MapStyle = {
+  url: string;
+};
+
+type MapStyles = Record<string, MapStyle>;
 
 type SearchedProperty = {
   coordinates: [number, number];
@@ -104,15 +112,30 @@ const layerStylePoints: CircleLayerSpecification = {
   },
 };
 
+const mapStyles: 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" />
+      <MapStyleSwitcher handleStyleChange={handleStyleChange} />
       {smallScreenToggle || window.innerWidth > 640 ? (
         <MapLegendControl
           position="bottom-left"
@@ -161,7 +184,10 @@ const PropertyMap: FC<PropertyMapProps> = ({
   const { appFilter } = useFilter();
   const [popupInfo, setPopupInfo] = useState<any | null>(null);
   const [map, setMap] = useState<MaplibreMap | null>(null);
-  const [mapController, setMapController] = useState();
+  const [mapController, setMapController] = useState<IControl>();
+  const [currentStyle, setCurrentStyle] = useState<string>(
+    'Data Visualization View'
+  );
   const [searchedProperty, setSearchedProperty] = useState<SearchedProperty>({
     coordinates: [-75.1628565788269, 39.97008211622267],
     address: '',
@@ -180,6 +206,10 @@ const PropertyMap: FC<PropertyMapProps> = ({
     handleMapClick(e.lngLat);
   };
 
+  const handleStyleChange = (styleName: string) => {
+    setCurrentStyle(styleName);
+  };
+
   const moveMap = (targetPoint: LngLatLike) => {
     if (map) {
       map.easeTo({
@@ -373,7 +403,7 @@ 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;
@@ -385,7 +415,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
       <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}
@@ -409,8 +439,20 @@ const PropertyMap: FC<PropertyMapProps> = ({
         onSourceData={(e) => {
           handleSetFeatures(e);
         }}
+        onStyleData={(e) => {
+          const layerIds = e.target
+            .getStyle()
+            .layers.map((layer: any) => layer.id);
+          const layersApplied = layers.every((layer) =>
+            layerIds.includes(layer)
+          );
+          if (layersApplied) {
+            setHasLoadingError(false);
+          }
+        }}
         onMoveEnd={handleSetFeatures}
       >
+        <MapControls handleStyleChange={handleStyleChange} />
         <div
           className="geocoding"
           style={{
@@ -453,7 +495,6 @@ const PropertyMap: FC<PropertyMapProps> = ({
             }}
           />
         </div>
-        <MapControls />
         {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;
+}

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Hotjar } from './Hotjar';
 export { default as Footer } from './Footer';
 export { default as PropertyMap } from './PropertyMap';
 export { default as PropertyDetailSection } from './PropertyDetailSection';
+export { default as MapStyleSwitcher } from './MapStyleSwitcher';
 export { default as SidePanel } from './SidePanel';
 export { default as SidePanelControlBar } from './SidePanelControlBar';
 export { default as FilterView } from './FilterView';