@ssplib/react-components/Map-644d2f90.js

SSP React Components

var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react-leaflet"),o=require("leaflet"),n=require("react");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("leaflet-defaulticon-compatibility"),require("leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"),require("leaflet/dist/leaflet.css");var s=/*#__PURE__*/a(o);function l({...t}){const[o,a]=n.useState(t.startCoord),s=n.useRef(null),l=n.useMemo(()=>({dragend(){const e=s.current;null!=e&&a(e.getLatLng())}}),[]);return r.useMapEvents({click(e){t.fixedPosition||a({lat:e.latlng.lat,lng:e.latlng.lng})}}),n.useEffect(()=>{o&&(s.current&&(s.current.closePopup(),t.showPopup&&s.current.openPopup()),t.onChange&&t.onChange(o))},[o,t.onChange]),e.jsx(r.Marker,{icon:i,draggable:t.draggable,eventHandlers:l,position:o,ref:s,children:e.jsx(r.Popup,{className:"custom-popup",children:t.children})})}const i=o.icon({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"}),c=({coords:e})=>{const t=r.useMap();return n.useEffect(()=>{const r=document.createElement("div");r.style.position="relative",r.style.width="20px",r.style.height="20px",r.style.backgroundColor="rgba(0, 100, 255, 0.6)",r.style.borderRadius="50%",r.style.animation="sonarPulse 2s infinite";const o=document.createElement("div");o.style.position="absolute",o.style.top="50%",o.style.left="50%",o.style.width="100%",o.style.height="100%",o.style.backgroundColor="rgba(0, 100, 255, 0.4)",o.style.borderRadius="50%",o.style.transform="translate(-50%, -50%) scale(1)",o.style.animation="sonarPulse 2s infinite",r.appendChild(o);const n=document.createElement("style");n.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(n);const a=s.default.marker(e,{icon:s.default.divIcon({className:"",html:r.outerHTML,iconSize:[40,40],iconAnchor:[0,5]})});return a.addTo(t),()=>{t.removeLayer(a),document.head.removeChild(n)}},[t,e]),null};exports.Map=function(o){return e.jsx(t.Box,{borderRadius:2,border:"2px solid #c7c7c7",overflow:"hidden",...o.style,children:e.jsxs(r.MapContainer,{center:o.firstCoords,zoom:19,scrollWheelZoom:!0,style:o.mapStyle,children:[e.jsx(r.TileLayer,{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),o.pulseMarkerList&&o.pulseMarkerList.map((t,r)=>e.jsx(c,{coords:t},JSON.stringify(t)+r)),e.jsx(l,{startCoord:o.firstCoords,onChange:o.onCoordsChange,showPopup:void 0!==o.popupContent,fixedPosition:o.fixedPosition,children:o.popupContent})]})})};
//# sourceMappingURL=Map-644d2f90.js.map