diff --git a/src/components/ui/LeafletMap.js b/src/components/ui/LeafletMap.js
index e83efdb..068b4cb 100644
--- a/src/components/ui/LeafletMap.js
+++ b/src/components/ui/LeafletMap.js
@@ -1,74 +1,107 @@
"use client";
-import { MapContainer, TileLayer, Marker, Popup, LayersControl } from 'react-leaflet';
-import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
-import { mapLayers } from './mapLayers';
+import {
+ MapContainer,
+ TileLayer,
+ Marker,
+ Popup,
+ LayersControl,
+} from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { useEffect } from "react";
+import { mapLayers } from "./mapLayers";
// Fix for default markers in react-leaflet
const fixLeafletIcons = () => {
- if (typeof window !== 'undefined') {
- const L = require('leaflet');
-
- delete L.Icon.Default.prototype._getIconUrl;
- L.Icon.Default.mergeOptions({
- iconRetinaUrl: '/leaflet/marker-icon-2x.png',
- iconUrl: '/leaflet/marker-icon.png',
- shadowUrl: '/leaflet/marker-shadow.png',
- });
- }
+ if (typeof window !== "undefined") {
+ const L = require("leaflet");
+
+ delete L.Icon.Default.prototype._getIconUrl;
+ L.Icon.Default.mergeOptions({
+ iconRetinaUrl: "/leaflet/marker-icon-2x.png",
+ iconUrl: "/leaflet/marker-icon.png",
+ shadowUrl: "/leaflet/marker-shadow.png",
+ });
+ }
};
-export default function EnhancedLeafletMap({
- center,
- zoom = 13,
- markers = [],
- showLayerControl = true,
- defaultLayer = 'OpenStreetMap'
+// Create colored marker icons
+const createColoredMarkerIcon = (color) => {
+ if (typeof window !== "undefined") {
+ const L = require("leaflet");
+
+ return new L.Icon({
+ iconUrl: `data:image/svg+xml;base64,${btoa(`
+
+ `)}`,
+ shadowUrl: "/leaflet/marker-shadow.png",
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41],
+ });
+ }
+ return null;
+};
+
+export default function EnhancedLeafletMap({
+ center,
+ zoom = 13,
+ markers = [],
+ showLayerControl = true,
+ defaultLayer = "OpenStreetMap",
}) {
- useEffect(() => {
- fixLeafletIcons();
- }, []);
+ useEffect(() => {
+ fixLeafletIcons();
+ }, []);
- const { BaseLayer } = LayersControl;
+ const { BaseLayer } = LayersControl;
- return (
-
- {showLayerControl ? (
-
- {mapLayers.base.map((layer, index) => (
-
-
-
- ))}
-
- ) : (
- // Default layer when no layer control
-
- )}
-
- {markers.map((marker, index) => (
-
- {marker.popup && {marker.popup}}
-
- ))}
-
- );
+ return (
+
+ {showLayerControl ? (
+
+ {mapLayers.base.map((layer, index) => (
+
+
+
+ ))}
+
+ ) : (
+ // Default layer when no layer control
+
+ )}{" "}
+ {markers.map((marker, index) => (
+
+ {marker.popup && {marker.popup}}
+
+ ))}
+
+ );
}
diff --git a/src/components/ui/ProjectMap.js b/src/components/ui/ProjectMap.js
index 2dd0847..89959f8 100644
--- a/src/components/ui/ProjectMap.js
+++ b/src/components/ui/ProjectMap.js
@@ -1,65 +1,173 @@
"use client";
-import { useEffect, useState } from 'react';
-import dynamic from 'next/dynamic';
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
// Dynamically import the map component to avoid SSR issues
-const DynamicMap = dynamic(() => import('./LeafletMap'), {
- ssr: false,
- loading: () =>
- Loading map...
-
+const DynamicMap = dynamic(() => import("./LeafletMap"), {
+ ssr: false,
+ loading: () => (
+
+ Loading map...
+
+ ),
});
-export default function ProjectMap({
- coordinates,
- projectName,
- showLayerControl = true,
- mapHeight = 'h-64',
- defaultLayer = 'OpenStreetMap'
+export default function ProjectMap({
+ coordinates,
+ projectName,
+ projectStatus = "registered",
+ showLayerControl = true,
+ mapHeight = "h-64",
+ defaultLayer = "OpenStreetMap",
}) {
- const [coords, setCoords] = useState(null);
+ const [coords, setCoords] = useState(null);
- useEffect(() => {
- if (coordinates) {
- // Parse coordinates string (e.g., "49.622958,20.629562")
- const [lat, lng] = coordinates.split(',').map(coord => parseFloat(coord.trim()));
-
- if (!isNaN(lat) && !isNaN(lng)) {
- setCoords({ lat, lng });
- }
- }
- }, [coordinates]);
+ // Status configuration matching the main map
+ const statusConfig = {
+ registered: { color: "#6B7280", label: "Registered" },
+ in_progress_design: { color: "#3B82F6", label: "In Progress (Design)" },
+ in_progress_construction: {
+ color: "#F59E0B",
+ label: "In Progress (Construction)",
+ },
+ fulfilled: { color: "#10B981", label: "Completed" },
+ };
- if (!coords) {
- return null;
- }
+ useEffect(() => {
+ if (coordinates) {
+ // Parse coordinates string (e.g., "49.622958,20.629562")
+ const [lat, lng] = coordinates
+ .split(",")
+ .map((coord) => parseFloat(coord.trim()));
- return (
-
-
-
Project Location
- {showLayerControl && (
-
- Use the layer control (π) to switch map views
-
- )}
-
-
-
-
-
- Coordinates: {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}
-
-
- );
+ if (!isNaN(lat) && !isNaN(lng)) {
+ setCoords({ lat, lng });
+ }
+ }
+ }, [coordinates]);
+ if (!coords) {
+ return (
+
+
+
+ Project Location
+
+
No coordinates available
+
+
+
+
+
Map unavailable
+
No coordinates provided
+
+
+
+ );
+ }
+
+ const statusInfo = statusConfig[projectStatus] || statusConfig.registered;
+
+ return (
+
+
+
+
+ Project Location
+
+
+
+ {showLayerControl && (
+
+ Use the layer control (π) to switch map views
+
+ )}
+
+
+
+
+
+ {projectName || "Project Location"}
+
+
+ {statusInfo.label}
+
+
+
+
+
+
+ {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}
+
+
+
+ ),
+ },
+ ]}
+ showLayerControl={showLayerControl}
+ defaultLayer={defaultLayer}
+ />
+
+
+
+ Coordinates: {coords.lat.toFixed(6)}, {coords.lng.toFixed(6)}
+
+
+
+
+ );
}
diff --git a/test-mobile.html b/test-mobile.html
new file mode 100644
index 0000000..d443c31
--- /dev/null
+++ b/test-mobile.html
@@ -0,0 +1,41 @@
+
+
+
+