@treasuryspatial/map-react 0.1.0

package/dist/MapModeViewport.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Feature, Polygon } from 'geojson';
+import * as THREE from 'three';
+import { type FootprintStats, type MapFootprintSelection } from '@treasuryspatial/map-kit';
+export type MapModeCandidate = {
+    selection: MapFootprintSelection;
+    feature: Feature<Polygon>;
+    pointsLocal: number[][];
+    stats: FootprintStats;
+};
+export type MapModeViewportHandle = {
+    setLightingPreset: (presetKey: string) => void;
+    animateToView: (_viewKey: string) => void;
+    capturePngDataUrl: () => string;
+};
+export type ApplyLightingPreset = (scene: THREE.Scene, presetKey: string) => void;
+export type ResolveMeshGroup = (geometry3dm: string) => Promise<THREE.Group | null>;
+export type MapModeViewportProps = {
+    active: boolean;
+    geometry3dm?: string;
+    meshGroup?: THREE.Group | null;
+    materialSettings?: {
+        color: string;
+        textureUrl?: string;
+        textureRepeat?: number;
+    };
+    lightingPreset?: string;
+    confirmedSelection?: MapFootprintSelection | null;
+    confirmedFeature?: Feature<Polygon> | null;
+    candidate?: MapModeCandidate | null;
+    mapVisibility: 'on' | 'dim' | 'off';
+    onCandidateSelect: (candidate: MapModeCandidate) => void;
+    onCandidateClear: () => void;
+    accessToken?: string;
+    mapStyle?: string;
+    applyLightingPreset?: ApplyLightingPreset;
+    resolveMeshGroup?: ResolveMeshGroup;
+};
+export declare const MapModeViewport: React.ForwardRefExoticComponent<MapModeViewportProps & React.RefAttributes<MapModeViewportHandle>>;
+//# sourceMappingURL=MapModeViewport.d.ts.map

package/dist/MapModeViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapModeViewport.d.ts","sourceRoot":"","sources":["../src/MapModeViewport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgF,MAAM,OAAO,CAAC;AAErG,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,qBAAqB,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,MAAM,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AAClF,MAAM,MAAM,gBAAgB,GAAG,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,aAAa,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;IACpC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACzD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAMF,eAAO,MAAM,eAAe,oGAoU1B,CAAC"}

package/dist/MapModeViewport.js

@@ -0,0 +1,385 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import * as THREE from 'three';
+import { buildGeoJsonPolygon, computeCentroid, computeFootprintStats, createMapThreeLayer, ensureFootprintLayers, getOuterRing, toLocalMeters, toPolygonFeature, } from '@treasuryspatial/map-kit';
+const DEFAULT_CENTER = [-87.6298, 41.8781];
+const DEFAULT_ZOOM = 16.5;
+const DEFAULT_PITCH = 55;
+export const MapModeViewport = forwardRef(function MapModeViewport({ active, geometry3dm, meshGroup, materialSettings, lightingPreset = 'studio', confirmedSelection, confirmedFeature, candidate, mapVisibility, onCandidateSelect, onCandidateClear, accessToken: accessTokenProp, mapStyle: mapStyleProp, applyLightingPreset, resolveMeshGroup, }, ref) {
+    const containerRef = useRef(null);
+    const mapRef = useRef(null);
+    const mapboxRef = useRef(null);
+    const layerControllerRef = useRef(null);
+    const threeLayerRef = useRef(null);
+    const sceneRef = useRef(null);
+    const opacityCacheRef = useRef(new Map());
+    const lightingPresetRef = useRef(lightingPreset);
+    const handlersBoundRef = useRef(false);
+    const confirmedSelectionRef = useRef(confirmedSelection ?? null);
+    const onCandidateSelectRef = useRef(onCandidateSelect);
+    const onCandidateClearRef = useRef(onCandidateClear);
+    const [mapReady, setMapReady] = useState(false);
+    const [mapError, setMapError] = useState('');
+    useEffect(() => {
+        lightingPresetRef.current = lightingPreset;
+    }, [lightingPreset]);
+    useEffect(() => {
+        confirmedSelectionRef.current = confirmedSelection ?? null;
+    }, [confirmedSelection]);
+    useEffect(() => {
+        onCandidateSelectRef.current = onCandidateSelect;
+    }, [onCandidateSelect]);
+    useEffect(() => {
+        onCandidateClearRef.current = onCandidateClear;
+    }, [onCandidateClear]);
+    const accessToken = useMemo(() => accessTokenProp ?? process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN ?? '', [accessTokenProp]);
+    const mapStyle = useMemo(() => mapStyleProp ??
+        process.env.NEXT_PUBLIC_MAPBOX_FOOTPRINT_STYLE ??
+        'mapbox://styles/treasuryadmin/cmc2gd70p00ui01spfnel4el2', [mapStyleProp]);
+    useImperativeHandle(ref, () => ({
+        setLightingPreset: (presetKey) => {
+            lightingPresetRef.current = presetKey;
+            if (sceneRef.current) {
+                (applyLightingPreset ?? defaultApplyLightingPreset)(sceneRef.current, presetKey);
+            }
+        },
+        animateToView: () => { },
+        capturePngDataUrl: () => {
+            const map = mapRef.current;
+            if (!map)
+                return '';
+            try {
+                return map.getCanvas().toDataURL('image/png');
+            }
+            catch {
+                return '';
+            }
+        },
+    }), [applyLightingPreset]);
+    useEffect(() => {
+        if (!active)
+            return;
+        if (!containerRef.current)
+            return;
+        if (!accessToken) {
+            setMapError('Mapbox access token missing.');
+            return;
+        }
+        let cancelled = false;
+        const boot = async () => {
+            try {
+                const module = await import('mapbox-gl');
+                if (cancelled)
+                    return;
+                const mapboxgl = module.default;
+                mapboxgl.accessToken = accessToken;
+                mapboxRef.current = mapboxgl;
+                const startCenter = confirmedSelectionRef.current?.mapView?.center ?? { lng: DEFAULT_CENTER[0], lat: DEFAULT_CENTER[1] };
+                const startZoom = confirmedSelectionRef.current?.mapView?.zoom ?? DEFAULT_ZOOM;
+                const startBearing = confirmedSelectionRef.current?.mapView?.bearing ?? 0;
+                const startPitch = confirmedSelectionRef.current?.mapView?.pitch ?? DEFAULT_PITCH;
+                const map = new mapboxgl.Map({
+                    container: containerRef.current,
+                    style: mapStyle,
+                    center: [startCenter.lng, startCenter.lat],
+                    zoom: startZoom,
+                    bearing: startBearing,
+                    pitch: startPitch,
+                    projection: 'globe',
+                    antialias: true,
+                    preserveDrawingBuffer: true,
+                    attributionControl: false,
+                });
+                map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }), 'bottom-right');
+                const geocoder = new MapboxGeocoder({
+                    accessToken,
+                    mapboxgl: mapboxgl,
+                    marker: false,
+                    placeholder: 'search address',
+                    proximity: { longitude: DEFAULT_CENTER[0], latitude: DEFAULT_CENTER[1] },
+                });
+                map.addControl(geocoder, 'top-left');
+                mapRef.current = map;
+                map.on('style.load', () => {
+                    if (!map.isStyleLoaded())
+                        return;
+                    opacityCacheRef.current.clear();
+                    layerControllerRef.current = ensureFootprintLayers(map);
+                    ensureCustomLayer(map);
+                    applyMapVisibility(map, mapVisibility, opacityCacheRef);
+                    bindFootprintHandlers(map);
+                });
+                map.on('load', () => {
+                    if (!map.isStyleLoaded())
+                        return;
+                    layerControllerRef.current = ensureFootprintLayers(map);
+                    ensureCustomLayer(map);
+                    applyMapVisibility(map, mapVisibility, opacityCacheRef);
+                    setMapReady(true);
+                    bindFootprintHandlers(map);
+                });
+                geocoder.on('result', (event) => {
+                    const center = event?.result?.center;
+                    if (!Array.isArray(center) || center.length < 2)
+                        return;
+                    map.easeTo({ center: [Number(center[0]), Number(center[1])], zoom: Math.max(map.getZoom(), 17) });
+                });
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : 'Failed to initialize Mapbox';
+                setMapError(message);
+            }
+        };
+        void boot();
+        return () => {
+            cancelled = true;
+            const map = mapRef.current;
+            if (map) {
+                layerControllerRef.current?.destroy();
+                map.remove();
+            }
+            mapRef.current = null;
+            layerControllerRef.current = null;
+            threeLayerRef.current?.dispose();
+            threeLayerRef.current = null;
+            setMapReady(false);
+            handlersBoundRef.current = false;
+        };
+    }, [active, accessToken, mapStyle, mapVisibility]);
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map || !mapReady)
+            return;
+        applyMapVisibility(map, mapVisibility, opacityCacheRef);
+    }, [mapVisibility, mapReady]);
+    useEffect(() => {
+        const controller = layerControllerRef.current;
+        if (!controller)
+            return;
+        if (candidate?.feature) {
+            controller.setSelected(candidate.feature);
+        }
+        else if (confirmedFeature) {
+            controller.setSelected(confirmedFeature);
+        }
+        else {
+            controller.setSelected(null);
+        }
+    }, [candidate, confirmedFeature]);
+    useEffect(() => {
+        if (!mapReady)
+            return;
+        const map = mapRef.current;
+        if (!map || !threeLayerRef.current)
+            return;
+        if (!confirmedSelection) {
+            threeLayerRef.current.setOrigin(null);
+            return;
+        }
+        threeLayerRef.current.setOrigin(confirmedSelection.origin);
+    }, [mapReady, confirmedSelection]);
+    useEffect(() => {
+        if (!mapReady)
+            return;
+        const map = mapRef.current;
+        if (!map)
+            return;
+        if (!threeLayerRef.current)
+            return;
+        if (!geometry3dm && !meshGroup) {
+            threeLayerRef.current.setGroup(null);
+            return;
+        }
+        let cancelled = false;
+        const applyGroup = async () => {
+            let group = null;
+            if (meshGroup) {
+                group = meshGroup;
+            }
+            else if (geometry3dm && resolveMeshGroup) {
+                group = await resolveMeshGroup(geometry3dm);
+            }
+            if (!group || cancelled)
+                return;
+            applyMaterialOverrides(group, materialSettings);
+            threeLayerRef.current?.setGroup(group);
+        };
+        void applyGroup();
+        return () => {
+            cancelled = true;
+        };
+    }, [mapReady, geometry3dm, meshGroup, materialSettings, resolveMeshGroup]);
+    const ensureCustomLayer = (map) => {
+        if (!threeLayerRef.current) {
+            threeLayerRef.current = createMapThreeLayer({
+                id: 'courtyard-mesh',
+                zOffsetMeters: 0.05,
+                onInit: (scene) => {
+                    sceneRef.current = scene;
+                    (applyLightingPreset ?? defaultApplyLightingPreset)(scene, lightingPresetRef.current);
+                },
+            });
+        }
+        const layer = threeLayerRef.current.layer;
+        if (!map.getLayer(layer.id)) {
+            map.addLayer(layer);
+        }
+    };
+    const bindFootprintHandlers = (map) => {
+        if (handlersBoundRef.current)
+            return;
+        handlersBoundRef.current = true;
+        map.on('mousemove', 'building-footprints-fill', (e) => {
+            const feature = e.features?.[0];
+            const poly = feature ? toPolygonFeature(feature) : null;
+            layerControllerRef.current?.setHover(poly);
+        });
+        map.on('mouseleave', 'building-footprints-fill', () => {
+            layerControllerRef.current?.setHover(null);
+        });
+        map.on('click', 'building-footprints-fill', (e) => {
+            const feature = e.features?.[0];
+            const poly = feature ? toPolygonFeature(feature) : null;
+            if (!poly || !poly.geometry)
+                return;
+            const ring = getOuterRing(poly.geometry);
+            const centroid = computeCentroid(ring) ?? { lng: map.getCenter().lng, lat: map.getCenter().lat };
+            const mapboxgl = mapboxRef.current;
+            if (!mapboxgl)
+                return;
+            const pointsLocal = toLocalMeters(ring, centroid, mapboxgl);
+            if (pointsLocal.length < 3)
+                return;
+            const selection = {
+                geojson: buildGeoJsonPolygon(pointsLocal),
+                origin: centroid,
+                mapView: {
+                    center: { lng: map.getCenter().lng, lat: map.getCenter().lat },
+                    zoom: map.getZoom(),
+                    bearing: map.getBearing(),
+                    pitch: map.getPitch(),
+                },
+            };
+            const stats = computeFootprintStats(pointsLocal);
+            onCandidateSelectRef.current({ selection, feature: poly, pointsLocal, stats });
+        });
+        map.on('click', (e) => {
+            const features = map.queryRenderedFeatures(e.point, { layers: ['building-footprints-fill'] });
+            if (!features.length) {
+                onCandidateClearRef.current();
+            }
+        });
+    };
+    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: containerRef, className: "w-full h-full" }), !accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: "Mapbox access token missing." })), mapError && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: mapError })), !mapReady && !mapError && accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/60 text-xs text-white font-nunito", children: "loading map\u2026" }))] }));
+});
+function applyMaterialOverrides(group, settings) {
+    const color = new THREE.Color(settings?.color ?? '#ffffff');
+    const textureUrl = settings?.textureUrl;
+    const repeat = settings?.textureRepeat ?? 2;
+    let texture = null;
+    if (textureUrl) {
+        const loader = new THREE.TextureLoader();
+        texture = loader.load(textureUrl);
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        texture.repeat.set(repeat, repeat);
+        texture.colorSpace = THREE.SRGBColorSpace;
+    }
+    group.traverse((child) => {
+        if (!(child instanceof THREE.Mesh))
+            return;
+        const mesh = child;
+        if (mesh.material) {
+            const material = mesh.material;
+            if (Array.isArray(material))
+                material.forEach((m) => m?.dispose?.());
+            else
+                material?.dispose?.();
+        }
+        mesh.material = new THREE.MeshStandardMaterial({
+            color,
+            roughness: 0.75,
+            metalness: 0,
+            side: THREE.DoubleSide,
+            map: texture ?? null,
+        });
+    });
+}
+function defaultApplyLightingPreset(scene, _presetKey) {
+    scene.background = null;
+    const lightsToRemove = scene.children.filter((child) => child instanceof THREE.Light);
+    lightsToRemove.forEach((light) => scene.remove(light));
+    scene.add(new THREE.AmbientLight('#ffffff', 0.6));
+    const key = new THREE.DirectionalLight('#ffffff', 0.8);
+    key.position.set(8, 12, 6);
+    key.castShadow = false;
+    scene.add(key);
+    const fill = new THREE.DirectionalLight('#ffffff', 0.4);
+    fill.position.set(-6, 8, -6);
+    scene.add(fill);
+}
+function applyMapVisibility(map, mode, cacheRef) {
+    if (!map?.getStyle?.())
+        return;
+    const style = map.getStyle();
+    if (!style?.layers)
+        return;
+    const factor = mode === 'on' ? 1 : mode === 'dim' ? 0.25 : 0;
+    const opacityProps = {
+        fill: ['fill-opacity'],
+        line: ['line-opacity'],
+        symbol: ['icon-opacity', 'text-opacity'],
+        circle: ['circle-opacity'],
+        raster: ['raster-opacity'],
+        background: ['background-opacity'],
+        'fill-extrusion': ['fill-extrusion-opacity'],
+        heatmap: ['heatmap-opacity'],
+    };
+    style.layers.forEach((layer) => {
+        if (layer.id.startsWith('footprint-'))
+            return;
+        if (layer.id === 'courtyard-mesh')
+            return;
+        const props = opacityProps[layer.type] ?? [];
+        props.forEach((prop) => {
+            const cacheKey = `${layer.id}:${prop}`;
+            if (!cacheRef.current.has(cacheKey)) {
+                try {
+                    cacheRef.current.set(cacheKey, map.getPaintProperty(layer.id, prop));
+                }
+                catch {
+                    return;
+                }
+            }
+            if (mode === 'on') {
+                const original = cacheRef.current.get(cacheKey);
+                if (original !== undefined) {
+                    try {
+                        map.setPaintProperty(layer.id, prop, original);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                return;
+            }
+            try {
+                map.setPaintProperty(layer.id, prop, factor);
+            }
+            catch {
+                // ignore
+            }
+        });
+    });
+    if (mode === 'off') {
+        try {
+            map.setPaintProperty('background', 'background-color', '#1E1E1E');
+            map.setPaintProperty('background', 'background-opacity', 1);
+        }
+        catch {
+            // ignore
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MapModeViewport';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './MapModeViewport';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@treasuryspatial/map-react",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@treasuryspatial/map-kit": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "three": ">=0.178.0",
+    "mapbox-gl": "^3.13.0",
+    "@mapbox/mapbox-gl-geocoder": "^5.1.0"
+  },
+  "devDependencies": {
+    "react": "19.1.0",
+    "three": "^0.180.0",
+    "mapbox-gl": "^3.13.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/mapbox__mapbox-gl-geocoder": "^4.7.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b --pretty false --noEmit"
+  }
+}