@smitch/fluid
Version:
A Next/React ui-component libray.
72 lines (71 loc) • 3.13 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { Marker, Popup, useMap } from 'react-leaflet';
import { Icon } from 'leaflet';
var baseUrl = 'https://img.icons8.com/';
var LazyMapMarker = function (_a) {
var position = _a.position, popupContent = _a.popupContent, iconName = _a.iconName, iconId = _a.iconId, iconSize = _a.iconSize, iconColor = _a.iconColor, draggable = _a.draggable, onDragEnd = _a.onDragEnd;
var _b = useState(position), markerPosition = _b[0], setMarkerPosition = _b[1];
var map = useMap();
useEffect(function () {
var handleDoubleClick = function (e) {
setMarkerPosition(e.latlng);
};
if (draggable)
map.on('dblclick', handleDoubleClick);
return function () {
if (draggable)
map.off('dblclick', handleDoubleClick);
};
}, [map, draggable]);
var icon = iconName
? UseCustomIcon({ iconName: iconName, size: iconSize, color: iconColor })
: iconId
? UseCustomIcon({ iconId: iconId, size: iconSize, color: iconColor })
: new Icon.Default();
var handleDragEnd = function (event) {
if (!draggable)
return;
var marker = event.target;
var newPosition = marker.getLatLng();
setMarkerPosition(newPosition);
setTimeout(function () {
map.setView(newPosition, map.getZoom() + 1);
}, 500);
if (onDragEnd)
onDragEnd(newPosition);
};
return (_jsx(Marker, { position: markerPosition, icon: icon, draggable: draggable, eventHandlers: {
dragend: handleDragEnd,
}, children: popupContent ? (_jsx(Popup, { children: popupContent })) : draggable ? (_jsx(Popup, { children: (function () {
if (Array.isArray(markerPosition)) {
return "Lat: ".concat(markerPosition[0].toFixed(5), ", Lon: ").concat(markerPosition[1].toFixed(5));
}
else if ('lat' in markerPosition && 'lng' in markerPosition) {
return "Lat: ".concat(markerPosition.lat.toFixed(5), ", Lon: ").concat(markerPosition.lng.toFixed(5));
}
return 'Invalid position';
})() })) : null }));
};
export default LazyMapMarker;
export var UseCustomIcon = function (_a) {
var iconName = _a.iconName, iconId = _a.iconId, _b = _a.size, size = _b === void 0 ? 40 : _b, color = _a.color;
var colorPath = color ? "".concat(color) : '';
var queryParams = new URLSearchParams({
size: size.toString(),
id: iconId || 'oStMNsdYhXTS',
format: 'png',
color: color || '000000',
});
var iconUrl = '';
iconName
? (iconUrl = "".concat(baseUrl).concat(colorPath, "/").concat(size, "/").concat(iconName, ".png"))
: (iconUrl = "".concat(baseUrl, "?").concat(queryParams.toString()));
return new Icon({
iconUrl: iconUrl,
iconSize: [size, size],
iconAnchor: [size / 2, size],
popupAnchor: [0, -size / 2],
});
};