@ssplib/react-components/Map-31d95a26.js

SSP React Components

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as o}from"@mui/material";import{useMapEvents as n,Marker as r,Popup as l,useMap as a,MapContainer as i,TileLayer as s}from"react-leaflet";import c,{icon as d}from"leaflet";import{useState as p,useRef as m,useMemo as u,useEffect as h}from"react";import"leaflet-defaulticon-compatibility";import"leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";import"leaflet/dist/leaflet.css";function f({...t}){const[o,a]=p(t.startCoord),i=m(null),s=u(()=>({dragend(){const e=i.current;null!=e&&a(e.getLatLng())}}),[]);return n({click(e){t.fixedPosition||a({lat:e.latlng.lat,lng:e.latlng.lng})}}),h(()=>{o&&(i.current&&(i.current.closePopup(),t.showPopup&&i.current.openPopup()),t.onChange&&t.onChange(o))},[o,t.onChange]),e(r,{icon:g,draggable:t.draggable,eventHandlers:s,position:o,ref:i,children:e(l,{className:"custom-popup",children:t.children})})}const g=d({iconUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",shadowUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowSize:[41,41],className:"leaflet-red-marker"}),y=({coords:e})=>{const t=a();return h(()=>{const o=document.createElement("div");o.style.position="relative",o.style.width="20px",o.style.height="20px",o.style.backgroundColor="rgba(0, 100, 255, 0.6)",o.style.borderRadius="50%",o.style.animation="sonarPulse 2s infinite";const n=document.createElement("div");n.style.position="absolute",n.style.top="50%",n.style.left="50%",n.style.width="100%",n.style.height="100%",n.style.backgroundColor="rgba(0, 100, 255, 0.4)",n.style.borderRadius="50%",n.style.transform="translate(-50%, -50%) scale(1)",n.style.animation="sonarPulse 2s infinite",o.appendChild(n);const r=document.createElement("style");r.innerHTML="\n            @keyframes sonarPulse {\n                0% {\n                transform: translate(-50%, -50%) scale(1);\n                opacity: 0.8;\n                }\n                100% {\n                transform: translate(-50%, -50%) scale(2);\n                opacity: 0;\n                }\n            }",document.head.appendChild(r);const l=c.marker(e,{icon:c.divIcon({className:"",html:o.outerHTML,iconSize:[40,40],iconAnchor:[0,5]})});return l.addTo(t),()=>{t.removeLayer(l),document.head.removeChild(r)}},[t,e]),null};function b(n){return e(o,{borderRadius:2,border:"2px solid #c7c7c7",overflow:"hidden",...n.style,children:t(i,{center:n.firstCoords,zoom:19,scrollWheelZoom:!0,style:n.mapStyle,children:[e(s,{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),n.pulseMarkerList&&n.pulseMarkerList.map((t,o)=>e(y,{coords:t},JSON.stringify(t)+o)),e(f,{startCoord:n.firstCoords,onChange:n.onCoordsChange,showPopup:void 0!==n.popupContent,fixedPosition:n.fixedPosition,children:n.popupContent})]})})}export{b as Map};
//# sourceMappingURL=Map-31d95a26.js.map