{"version":3,"file":"MultiLocationMap.6ZdufEDb.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/A5ckDw2mKXLYwSzNLJrZ/BVPCIeAr1FFCDtTQBuwm/MultiLocationMap.js"],"sourcesContent":["// Requested update: support both `latLng` and `coordinates`, parse defensively, harden script loading with timeout/readiness checks, and show fallback UI on failures.\n// Multi-location map component without API key, using OpenStreetMap + Leaflet CDN\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{startTransition,useEffect,useMemo,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * MultiLocationMap (OpenStreetMap powered map)\n * Shows multiple markers on a map without requiring an API key\n *\n * @framerIntrinsicWidth 480\n * @framerIntrinsicHeight 320\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function MultiLocationMap(props){const{markers,zoom,useCustomPin,customPinImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Custom Pin\"},customPinSize,markerColor,popoverBackground,popoverTextColor,mapTheme,borderRadius,enableClustering,showPopup,style}=props;const mapRef=useRef(null);const leafletRef=useRef(null);const firstMarkerRef=useRef(null);const[loadError,setLoadError]=useState(null);const parsedMarkers=useMemo(()=>{const parseCoordinateString=value=>{if(typeof value!==\"string\")return null;const parts=value.split(\",\").map(segment=>segment.trim());if(parts.length!==2)return null;const lat=Number(parts[0]);const lng=Number(parts[1]);if(!Number.isFinite(lat)||!Number.isFinite(lng))return null;if(lat<-90||lat>90||lng<-180||lng>180)return null;return{lat,lng};};return markers.map(marker=>{const parsed=parseCoordinateString(marker.coordinates)??parseCoordinateString(marker.latLng);if(!parsed)return null;return{...marker,parsed};}).filter(entry=>entry!==null);},[markers]);useEffect(()=>{if(!mapRef.current||typeof window===\"undefined\")return;startTransition(()=>setLoadError(null));// If leaflet already loaded, skip\nif(window.L&&leafletRef.current){leafletRef.current.remove();leafletRef.current=null;}function createTimeoutError(message){return new Error(message);}function loadScriptWithTimeout(id,src,isReady,timeoutMs,timeoutMessage){if(isReady())return Promise.resolve();return new Promise((resolve,reject)=>{let settled=false;const complete=()=>{if(!settled){settled=true;clearTimeout(timeoutId);}};const onReady=()=>{if(isReady()){complete();resolve();}};const onError=()=>{complete();reject(new Error(`Failed to load script: ${src}`));};const timeoutId=window.setTimeout(()=>{complete();reject(createTimeoutError(timeoutMessage));},timeoutMs);let script=document.getElementById(id);if(!script){script=document.createElement(\"script\");script.id=id;script.src=src;script.async=true;script.onload=onReady;script.onerror=onError;document.body.appendChild(script);}else{script.addEventListener(\"load\",onReady,{once:true});script.addEventListener(\"error\",onError,{once:true});onReady();}});}function waitForCondition(condition,timeoutMs,timeoutMessage){if(condition())return Promise.resolve();return new Promise((resolve,reject)=>{const start=Date.now();const intervalId=window.setInterval(()=>{if(condition()){window.clearInterval(intervalId);resolve();return;}if(Date.now()-start>timeoutMs){window.clearInterval(intervalId);reject(createTimeoutError(timeoutMessage));}},50);});}// Dynamically load Leaflet CSS & JS if not present\nfunction ensureLeafletLoaded(){if(window.L)return Promise.resolve(window.L);return new Promise((resolve,reject)=>{const exists=document.getElementById(\"leaflet-style\");if(!exists){const link=document.createElement(\"link\");link.id=\"leaflet-style\";link.rel=\"stylesheet\";link.href=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\";link.onerror=()=>reject(new Error(\"Failed to load Leaflet CSS.\"));document.head.appendChild(link);}loadScriptWithTimeout(\"leaflet-script\",\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\",()=>Boolean(window.L),8e3,\"Timed out while loading Leaflet.\").then(()=>resolve(window.L)).catch(reject);});}// Dynamically load Leaflet.markercluster plugin\nfunction ensureMarkerClusterLoaded(){if(window.L&&window.L.markerClusterGroup){return Promise.resolve(window.L);}return new Promise((resolve,reject)=>{const cssExists=document.getElementById(\"leaflet-markercluster-style\");if(!cssExists){const link=document.createElement(\"link\");link.id=\"leaflet-markercluster-style\";link.rel=\"stylesheet\";link.href=\"https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css\";link.onerror=()=>reject(new Error(\"Failed to load MarkerCluster CSS.\"));document.head.appendChild(link);const linkDefault=document.createElement(\"link\");linkDefault.id=\"leaflet-markercluster-default-style\";linkDefault.rel=\"stylesheet\";linkDefault.href=\"https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css\";linkDefault.onerror=()=>reject(new Error(\"Failed to load MarkerCluster default CSS.\"));document.head.appendChild(linkDefault);}loadScriptWithTimeout(\"leaflet-markercluster-script\",\"https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js\",()=>Boolean(window.L&&window.L.markerClusterGroup),8e3,\"Timed out while loading Leaflet marker clustering.\").then(()=>waitForCondition(()=>Boolean(window.L&&window.L.markerClusterGroup),2e3,\"Leaflet marker clustering plugin did not become ready.\")).then(()=>resolve(window.L)).catch(reject);});}ensureLeafletLoaded().then(L=>{// Load marker cluster plugin if clustering is enabled\nconst loadPromise=enableClustering?ensureMarkerClusterLoaded():Promise.resolve(L);return loadPromise.then(()=>{if(!mapRef.current)return;// Load Google Font Inter\nconst fontExists=document.getElementById(\"google-font-inter\");if(!fontExists){const link=document.createElement(\"link\");link.id=\"google-font-inter\";link.rel=\"stylesheet\";link.href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\";document.head.appendChild(link);}const map=L.map(mapRef.current,{zoomControl:true,attributionControl:false});leafletRef.current=map;// Compute bounds if markers exist\nlet bounds=null;if(parsedMarkers.length>0){const validCoords=parsedMarkers.map(m=>[m.parsed.lat,m.parsed.lng]);if(validCoords.length>0){bounds=L.latLngBounds(validCoords);}}// Select tile layer based on theme\nlet tileUrl=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\";switch(mapTheme){case\"dark\":tileUrl=\"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\";break;case\"satellite\":tileUrl=\"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\";break;case\"topo\":tileUrl=\"https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png\";break;case\"light\":tileUrl=\"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png\";break;case\"standard\":default:tileUrl=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\";break;}L.tileLayer(tileUrl,{maxZoom:19}).addTo(map);if(parsedMarkers.length>0){// Create marker cluster group if clustering is enabled\nconst markerGroup=enableClustering&&L.markerClusterGroup?L.markerClusterGroup({showCoverageOnHover:false,zoomToBoundsOnClick:true,spiderfyOnMaxZoom:true,removeOutsideVisibleBounds:true,iconCreateFunction:function(cluster){const count=cluster.getChildCount();let size=\"small\";if(count>10)size=\"medium\";if(count>50)size=\"large\";return L.divIcon({html:`${count}
`,className:\"custom-cluster-icon\",iconSize:L.point(40,40)});}}):null;for(const markerData of parsedMarkers){const{name,address,parsed}=markerData;const latitude=parsed.lat;const longitude=parsed.lng;let marker;if(useCustomPin&&customPinImage.src){// Create custom icon\nconst customIcon=L.icon({iconUrl:customPinImage.src,iconSize:[customPinSize,customPinSize],iconAnchor:[customPinSize/2,customPinSize],popupAnchor:[0,-customPinSize]});marker=L.marker([latitude,longitude],{icon:customIcon});}else{// Use default circle marker\nmarker=L.circleMarker([latitude,longitude],{radius:10,color:markerColor,fillColor:markerColor,fillOpacity:.85,weight:2});// Add hover effect only for circle markers\nmarker.on(\"mouseover\",function(){this.setStyle({radius:12,fillOpacity:1});});marker.on(\"mouseout\",function(){this.setStyle({radius:10,fillOpacity:.85});});}// Create custom popup with styled content\nconst popupContent=`\n \n
${name}
\n
${address}
\n