Add switcher for carto and shortbread styles (#264)

Author: mustaphaturhan

package-lock.json

@@ -33,6 +33,7 @@
     "d3": "^7.9.0",
     "date-fns": "^2.29.3",
     "json-format": "^1.0.1",
+    "lucide-react": "^0.552.0",
     "maplibre-gl": "^5.8.0",
     "prop-types": "^15.8.1",
     "ramda": "^0.28.0",

package.json

@@ -0,0 +1,21 @@
+{
+  "version": 8,
+  "sources": {
+    "raster-tiles": {
+      "type": "raster",
+      "tiles": ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+      "tileSize": 256,
+      "minzoom": 0,
+      "maxzoom": 19
+    }
+  },
+  "layers": [
+    {
+      "id": "simple-tiles",
+      "type": "raster",
+      "source": "raster-tiles",
+      "attribution": "© OpenStreetMap contributors"
+    }
+  ],
+  "id": "blank"
+}

src/map/carto.json

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+type CustomControlProps = {
+  position: keyof typeof controlPositions;
+};
+
+const controlPositions = {
+  topLeft: '.maplibregl-ctrl-top-left',
+  topRight: '.maplibregl-ctrl-top-right',
+  bottomLeft: '.maplibregl-ctrl-bottom-left',
+  bottomRight: '.maplibregl-ctrl-bottom-right',
+};
+
+export const CustomControl = ({
+  position,
+  children,
+}: PropsWithChildren<CustomControlProps>) => {
+  const [groupContainer, setGroupContainer] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  useEffect(() => {
+    const parentElement = document.querySelector(controlPositions[position]);
+    const groupDiv = document.createElement('div');
+
+    if (parentElement) {
+      groupDiv.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-group');
+
+      setGroupContainer(groupDiv);
+      parentElement.appendChild(groupDiv);
+    }
+
+    return () => {
+      if (parentElement) {
+        parentElement.removeChild(groupDiv);
+      }
+    };
+  }, []);
+
+  if (!groupContainer) return null;
+
+  return createPortal(<>{children}</>, groupContainer);
+};
+
+type ControlButtonProps = {
+  title: string;
+  onClick: () => void;
+  icon: ReactNode;
+};
+
+export const ControlButton = ({ title, onClick, icon }: ControlButtonProps) => {
+  return (
+    <button type="button" aria-label={title} title={title} onClick={onClick}>
+      <span className="flex justify-center items-center" aria-hidden={true}>
+        {icon}
+      </span>
+    </button>
+  );
+};

src/map/custom-control.tsx

@@ -52,6 +52,8 @@ import type { Feature, FeatureCollection, LineString } from 'geojson';
 
 // Import the style JSON
 import mapStyle from './style.json';
+import cartoStyle from './carto.json';
+import { ResetBoundsControl, getInitialMapStyle } from './map-style-control';
 
 const centerCoords = process.env.REACT_APP_CENTER_COORDS!.split(',');
 
@@ -181,6 +183,9 @@ const MapComponent = ({
     latitude: center[1],
     zoom: zoom_initial,
   });
+  const [currentMapStyle, setCurrentMapStyle] = useState<
+    'shortbread' | 'carto'
+  >(getInitialMapStyle);
 
   const mapRef = useRef<MapRef>(null);
   const drawRef = useRef<MaplibreTerradrawControl | null>(null);
@@ -191,6 +196,21 @@ const MapComponent = ({
     []
   );
 
+  // Handle map style changes
+  const handleStyleChange = useCallback((style: 'shortbread' | 'carto') => {
+    setCurrentMapStyle(style);
+
+    // Update URL params (only add 'style' param if not shortbread)
+    const url = new URL(window.location.href);
+    if (style === 'carto') {
+      url.searchParams.set('style', 'carto');
+    } else {
+      // Remove style param for shortbread (it's the default)
+      url.searchParams.delete('style');
+    }
+    window.history.replaceState({}, '', url.toString());
+  }, []);
+
   const updateExcludePolygons = useCallback(() => {
     if (!drawRef.current) return;
     const terraDrawInstance = drawRef.current.getTerraDrawInstance();
@@ -1011,7 +1031,11 @@ const MapComponent = ({
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
           interactiveLayerIds={['routes-line']}
-          mapStyle={mapStyle as unknown as maplibregl.StyleSpecification}
+          mapStyle={
+            (currentMapStyle === 'carto'
+              ? cartoStyle
+              : mapStyle) as unknown as maplibregl.StyleSpecification
+          }
           style={{ width: '100%', height: '100vh' }}
           maxBounds={maxBounds}
           minZoom={2}
@@ -1024,6 +1048,7 @@ const MapComponent = ({
             onUpdate={updateExcludePolygons}
             controlRef={drawRef}
           />
+          <ResetBoundsControl onStyleChange={handleStyleChange} />
 
           {/* Route lines */}
           {routeGeoJSON && (

src/map/index.tsx

@@ -0,0 +1,196 @@
+import { useState, useEffect, useMemo, memo } from 'react';
+import { Popup } from 'semantic-ui-react';
+import { LayersIcon } from 'lucide-react';
+import Map, { useMap } from 'react-map-gl/maplibre';
+import type maplibregl from 'maplibre-gl';
+import { ControlButton, CustomControl } from './custom-control';
+
+import shortbreadStyle from './style.json';
+import cartoStyle from './carto.json';
+
+export const MAP_STYLE_STORAGE_KEY = 'selectedMapStyle';
+
+type MapStyleType = 'shortbread' | 'carto';
+
+// Map style configurations
+const MAP_STYLES = [
+  {
+    id: 'shortbread',
+    label: 'Shortbread',
+    style: shortbreadStyle,
+  },
+  {
+    id: 'carto',
+    label: 'Carto',
+    style: cartoStyle,
+  },
+] as const;
+
+export const getInitialMapStyle = (): MapStyleType => {
+  // check url params first
+  const urlParams = new URLSearchParams(window.location.search);
+  const styleParam = urlParams.get('style');
+  if (styleParam === 'carto' || styleParam === 'shortbread') {
+    return styleParam;
+  }
+
+  // fallback to localStorage
+  const savedStyle = localStorage.getItem(MAP_STYLE_STORAGE_KEY);
+  return savedStyle === 'shortbread' || savedStyle === 'carto'
+    ? savedStyle
+    : 'shortbread';
+};
+
+interface ResetBoundsControlProps {
+  onStyleChange?: (style: MapStyleType) => void;
+}
+
+interface MapStyleOptionProps {
+  id: MapStyleType;
+  label: string;
+  style: typeof shortbreadStyle | typeof cartoStyle;
+  isSelected: boolean;
+  onSelect: (id: MapStyleType) => void;
+  mapCenter: { lng: number; lat: number } | undefined;
+  zoom: number | undefined;
+}
+
+const MapStyleOption = memo(
+  ({
+    id,
+    label,
+    style,
+    isSelected,
+    onSelect,
+    mapCenter,
+    zoom,
+  }: MapStyleOptionProps) => {
+    // Memoize the map style to prevent unnecessary re-renders
+    const memoizedMapStyle = useMemo(
+      () => style as unknown as maplibregl.StyleSpecification,
+      [style]
+    );
+
+    return (
+      <div>
+        <div
+          onClick={() => onSelect(id)}
+          style={{
+            border: `3px solid ${isSelected ? '#2185d0' : 'transparent'}`,
+            borderRadius: '4px',
+            cursor: 'pointer',
+            transition: 'border-color 0.2s ease',
+            overflow: 'hidden',
+          }}
+        >
+          <Map
+            id={`${id}-map`}
+            onMove={() => {}}
+            longitude={mapCenter?.lng}
+            latitude={mapCenter?.lat}
+            zoom={zoom}
+            attributionControl={false}
+            style={{
+              width: '226px',
+              height: '64px',
+              display: 'block',
+            }}
+            mapStyle={memoizedMapStyle}
+            boxZoom={false}
+            doubleClickZoom={false}
+            dragPan={false}
+            dragRotate={false}
+            interactive={false}
+          />
+        </div>
+        <div
+          style={{
+            marginTop: '6px',
+            fontSize: '13px',
+            fontWeight: isSelected ? 'bold' : 'normal',
+            color: isSelected ? '#2185d0' : '#666',
+            textAlign: 'center',
+          }}
+        >
+          {label}
+        </div>
+      </div>
+    );
+  }
+);
+
+MapStyleOption.displayName = 'MapStyleOption';
+
+export const ResetBoundsControl = ({
+  onStyleChange,
+}: ResetBoundsControlProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedStyle, setSelectedStyle] =
+    useState<MapStyleType>(getInitialMapStyle);
+
+  const { current: map } = useMap();
+  const mapCenter = map?.getCenter();
+  const zoom = map?.getZoom();
+
+  // Save to localStorage whenever selectedStyle changes
+  useEffect(() => {
+    localStorage.setItem(MAP_STYLE_STORAGE_KEY, selectedStyle);
+    onStyleChange?.(selectedStyle);
+  }, [selectedStyle, onStyleChange]);
+
+  const toggleDrawer = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
+  // Memoize the map options to prevent re-creating them on every render
+  const mapOptions = useMemo(
+    () =>
+      MAP_STYLES.map((mapStyle) => ({
+        ...mapStyle,
+        isSelected: selectedStyle === mapStyle.id,
+      })),
+    [selectedStyle]
+  );
+
+  return (
+    <Popup
+      trigger={
+        <CustomControl position="topRight">
+          <ControlButton
+            title="Map Styles"
+            onClick={toggleDrawer}
+            icon={<LayersIcon size={17} />}
+          />
+        </CustomControl>
+      }
+      content={
+        isOpen ? (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '10px',
+            }}
+          >
+            {mapOptions.map((mapOption) => (
+              <MapStyleOption
+                key={mapOption.id}
+                id={mapOption.id}
+                label={mapOption.label}
+                style={mapOption.style}
+                isSelected={mapOption.isSelected}
+                onSelect={setSelectedStyle}
+                mapCenter={mapCenter}
+                zoom={zoom}
+              />
+            ))}
+          </div>
+        ) : null
+      }
+      on="click"
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      onOpen={() => setIsOpen(true)}
+    />
+  );
+};