{"version":3,"file":"MultiLocationMap.DPSB3LpL.mjs","names":["useRef","style"],"sources":["https:/framerusercontent.com/modules/HMXM6b1GgASjioBALkQJ/TRotw1toAwdy52q1fjrT/MultiLocationMap.js"],"sourcesContent":["// Multi-location map component without API key, using OpenStreetMap + Leaflet CDN\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}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,customPinSize,clusterPinImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Cluster pin\"},markerColor,popoverBackground,popoverTextColor,mapTheme,borderRadius,enableClustering,showPopup,style}=props;const mapRef=useRef(null);const leafletRef=useRef(null);const firstMarkerRef=useRef(null);useEffect(()=>{if(!mapRef.current||typeof window===\"undefined\")return;// If leaflet already loaded, skip\nif(window.L&&leafletRef.current){leafletRef.current.remove();leafletRef.current=null;}// Dynamically load Leaflet CSS & JS if not present\nfunction ensureLeafletLoaded(){if(window.L)return Promise.resolve(window.L);return new Promise(resolve=>{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\";document.head.appendChild(link);}const script=document.createElement(\"script\");script.src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\";script.onload=()=>resolve(window.L);document.body.appendChild(script);});}// Dynamically load Leaflet.markercluster plugin\nfunction ensureMarkerClusterLoaded(){if(window.L&&window.L.markerClusterGroup){return Promise.resolve(window.L);}return new Promise(resolve=>{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\";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\";document.head.appendChild(linkDefault);}const scriptExists=document.getElementById(\"leaflet-markercluster-script\");if(!scriptExists){const script=document.createElement(\"script\");script.id=\"leaflet-markercluster-script\";script.src=\"https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js\";script.onload=()=>resolve(window.L);document.body.appendChild(script);}else{resolve(window.L);}});}ensureLeafletLoaded().then(L=>{// Load marker cluster plugin if clustering is enabled\nconst loadPromise=enableClustering?ensureMarkerClusterLoaded():Promise.resolve(L);return loadPromise.then(async()=>{if(!mapRef.current)return;// Prevent double init\nmapRef.current.innerHTML=\"\";// 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(markers.length>0){const validCoords=markers.map(m=>{const parts=m.coordinates.split(\",\").map(s=>s.trim());if(parts.length!==2)return null;const lat=parseFloat(parts[0]);const lng=parseFloat(parts[1]);if(isNaN(lat)||isNaN(lng))return null;return[lat,lng];}).filter(coord=>coord!==null);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}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png\";break;case\"standard\":default:tileUrl=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\";break;}L.tileLayer(tileUrl,{maxZoom:22,maxNativeZoom:19}).addTo(map);if(markers.length>0){const pinMetaBySrc=new Map;// Preload pin images to respect their aspect ratio\nconst uniquePinSrcs=Array.from(new Set(markers.map(m=>m.pinImage?.src).filter(Boolean)));if(uniquePinSrcs.length>0){await Promise.all(uniquePinSrcs.map(src=>new Promise(resolve=>{const img=new window.Image;img.onload=()=>{const w=img.naturalWidth||img.width;const h=img.naturalHeight||img.height;if(w>0&&h>0)pinMetaBySrc.set(src,{w,h});resolve();};img.onerror=()=>resolve();img.src=src;})));}// 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();const clusterSrc=clusterPinImage?.src;if(clusterSrc){return L.divIcon({html:`\n \n
![\"\"](\"${clusterSrc}\")
\n
\n
${name}
\n
${address}
\n