@expofp/floorplan/dist/esm/components/Maplibre/MaplibreWrapper.js

Interactive floor plan library for expos and events

import{jsx as T}from"react/jsx-runtime";import"maplibre-gl/dist/maplibre-gl.css";import{prepareDebug as Y,Renderer as q}from"@expofp/renderer";import{addProtocol as H,Map as J}from"maplibre-gl";import{Protocol as V}from"pmtiles";import{useEffect as C,useRef as c,useState as K}from"react";import{uiState as z}from"../../store";import{registerPmtilesArchive as Q}from"./utils/pmtiles-range-fallback";import{createStyleTransform as $}from"./utils/resolve-map-style";const v=['<a href="https://expofp.com" target="_blank">ExpoFP</a>','<a href="https://maplibre.org/" target="_blank">MapLibre</a>'];export const MAP_DIM_LAYER_ID="expofp-map-dim";const p="expofp-map-dim-source",ee="3d-expofp";let y=null;const te=["coalesce",["get","name:en"],["get","name_en"],["get","name:latin"],["get","name"]],oe={type:"Feature",geometry:{type:"Polygon",coordinates:[[[-180,-85],[180,-85],[180,85],[-180,85],[-180,-85]]]},properties:{}};function B(e){if(!e||typeof e!="object")return!1;const o=e.length;if(typeof o!="number"||o<16)return!1;const r=e[0];return typeof r=="number"&&Number.isFinite(r)}function re(e){if(B(e))return Array.from(e);const r=e?.defaultProjectionData?.mainMatrix;return B(r)?Array.from(r):(console.warn("Maplibre custom layer received an unsupported projection matrix payload.",e),null)}function g(e){return typeof e=="string"?e.includes("name"):Array.isArray(e)?e.some(o=>g(o)):!e||typeof e!="object"?!1:Object.values(e).some(o=>g(o))}function ne(e){return e.type!=="symbol"||!e.id||!e.layout?!1:g(e.layout["text-field"])}function ie(e){const o=e.getStyle();for(const r of o.layers??[])ne(r)&&e.setLayoutProperty(r.id,"text-field",te)}function ae(){if(y)return y;const e=new V;y=e;try{H("pmtiles",e.tile)}catch(o){console.warn("Maplibre PMTiles protocol registration failed.",o)}return e}export default function se({sceneDef:e,geoConfig:o,tileSource:r,mapOptions:N,debug:b,onMapReady:h,onMapDimLayerReady:x,onMapLoadError:P,onPointerMissed:Z,children:U}){const M=c(null),[_,A]=K(),S=c(h),E=c(x),L=c(P),k=c({geoConfig:o,tileSource:r,mapOptions:N,debug:b});return C(()=>{S.current=h,E.current=x,L.current=P}),C(()=>{const j=M.current;if(!j)return;const{geoConfig:n,tileSource:u,mapOptions:l,debug:I}=k.current;let d=!1,R;const O=()=>{const G=ae(),W=n.bounds?{bounds:n.bounds,fitBoundsOptions:{padding:n.fitPadding,bearing:n.bearing}}:{center:n.center,zoom:n.zoom},F=$(u.style,u.offline?i=>Q(G,i):void 0),t=new J({container:j,...W,bearing:n.bearing,maxPitch:l?.maxPitch,minZoom:l?.minZoom,maxZoom:l?.maxZoom,maxBounds:l?.maxBounds,attributionControl:{compact:!0,customAttribution:v},bearingSnap:0,aroundCenter:!1,pitchWithRotate:z.pitchEnabled,touchPitch:z.pitchEnabled,canvasContextAttributes:{antialias:!0}});n.zoomAdjustment&&t.jumpTo({zoom:t.getZoom()+n.zoomAdjustment}),t.once("error",i=>{t.isStyleLoaded()||L.current?.(i?.error??i)});const D=i=>{const a=i?.id;!a||t.hasImage(a)||t.addImage(a,{width:1,height:1,data:new Uint8Array(4)})};t.on("styleimagemissing",D);let f;const m=()=>t.triggerRepaint(),X={id:ee,type:"custom",renderingMode:"3d",onAdd(i,a){d||(A({gl:a,requestFrame:m,onFrame:s=>(f=s,m(),()=>{f===s&&(f=void 0)})}),S.current?.(t,m))},render(i,a){const s=re(a??i);s&&f?.(s),I&&m()}},w=()=>{ie(t),t.getSource(p)||t.addSource(p,{type:"geojson",data:oe}),t.getLayer(MAP_DIM_LAYER_ID)||t.addLayer({id:MAP_DIM_LAYER_ID,type:"fill",source:p,paint:{"fill-color":"#000000","fill-opacity":0,"fill-opacity-transition":{duration:0,delay:0}}}),E.current?.(t),t.addLayer(X)};t.on("style.load",w),t.setStyle(u.style,F?{transformStyle:F}:void 0),R=()=>{t.off("style.load",w),t.off("styleimagemissing",D),t.remove()}};return I?Y().then(()=>{d||O()}):O(),()=>{d=!0,R?.(),A(void 0)}},[]),T("div",{ref:M,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"},children:_&&T(q,{..._,scene:e,debug:b,onPointerMissed:Z,children:U})})}