{"version":3,"file":"MultiLocationMap.DZf373CK.mjs","names":["useRef","__esmMin","window","init_npm_react_18_3_1","init_ssg_sandbox_shims","de","init_jsx_runtime","c","ce","addPropertyControls","init_framer_BWFVvmND","RenderTarget","ControlType","MultiLocationMap","props","mapRef","leafletRef","firstMarkerRef","escapeHtml","value","ensureLeafletLoaded","link","script","resolve","ensureMarkerClusterLoaded","linkDefault","enableClustering","L","map","bounds","markers","validCoords","parts","m","s","lat","lng","coord","tileUrl","mapTheme","markerGroup","count","cluster","markerColor","markerData","coordinates","latitude","longitude","marker","useCustomPin","customPinImage","customIcon","customPinSize","safeName","name","safeAddress","address","safeLinkLabel","linkLabel","safeLinkUrl","linkUrl","popupContent","popoverBackground","popoverTextColor","zoom","showPopup","styleId","style","init_MultiLocationMap"],"sources":["https:/framerusercontent.com/modules/3b2o6cOT0hjo3plqMLVI/40tmw2eVbEXaiQBJiiMf/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,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);useEffect(()=>{if(!mapRef.current||typeof window===\"undefined\")return;const escapeHtml=value=>{const str=value==null?\"\":String(value);return str.replace(/&/g,\"&\").replace(//g,\">\").replace(/\"/g,\""\").replace(/'/g,\"'\");};// 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(()=>{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:19}).addTo(map);if(markers.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 markers){const{coordinates,name,address,linkUrl,linkLabel}=markerData;// Parse coordinates from \"lat, lng\" format\nconst parts=coordinates.split(\",\").map(s=>s.trim());if(parts.length!==2)continue;// Skip invalid format\nconst latitude=parseFloat(parts[0]);const longitude=parseFloat(parts[1]);// Skip if parsing failed\nif(isNaN(latitude)||isNaN(longitude))continue;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 safeName=escapeHtml(name);const safeAddress=escapeHtml(address);const safeLinkLabel=escapeHtml(linkLabel||\"View\");const safeLinkUrl=escapeHtml(linkUrl||\"\");const popupContent=`\n \n
${safeName}
\n
${safeAddress}
\n ${safeLinkUrl?`\n
${safeLinkLabel}\n `:\"\"}\n