@chayns-components/maps
Version:
A set of beautiful React components for developing your own applications with chayns.
179 lines (178 loc) • 7.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactWrapper = require("@googlemaps/react-wrapper");
var _MapWrapper = require("./MapWrapper.styles");
var _api = require("@react-google-maps/api");
var _Marker = _interopRequireDefault(require("./map/marker/Marker"));
var _Map = _interopRequireDefault(require("./map/Map"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MapWrapper = ({
apiToken,
polygonOptions,
initialZoom,
initialPosition,
markers,
onMarkerAdd,
onMarkerRemove,
onMarkerChange
}) => {
const [polygonPath, setPolygonPath] = (0, _react.useState)();
const [canPolyDraw, setCanPolyDraw] = (0, _react.useState)(false);
const [zoom, setZoom] = (0, _react.useState)(initialZoom);
const [center, setCenter] = (0, _react.useState)(initialPosition);
const [internalMarkers, setInternalMarkers] = (0, _react.useState)();
const [map, setMap] = (0, _react.useState)();
(0, _react.useEffect)(() => {
if (markers) {
setInternalMarkers(markers);
}
}, [markers]);
const handleClick = (0, _react.useCallback)(e => {
var _e$latLng;
const latLng = (_e$latLng = e.latLng) === null || _e$latLng === void 0 ? void 0 : _e$latLng.toJSON();
if (!latLng) {
return;
}
setInternalMarkers(prevState => {
if (prevState && prevState.length >= 2) {
return prevState;
}
const newMarker = {
position: {
lat: latLng.lat,
lng: latLng.lng
},
id: prevState ? prevState.length : 0
};
if (typeof onMarkerAdd === 'function') {
onMarkerAdd(newMarker);
}
return prevState ? [...prevState, newMarker] : [newMarker];
});
}, [onMarkerAdd]);
(0, _react.useEffect)(() => {
var _internalMarkers$, _internalMarkers$2, _internalMarkers$3, _internalMarkers$4, _internalMarkers$5, _internalMarkers$6, _internalMarkers$7, _internalMarkers$8;
if (!internalMarkers) {
return;
}
if (internalMarkers.length !== 2) {
setCanPolyDraw(false);
return;
}
const path = [{
lat: ((_internalMarkers$ = internalMarkers[0]) === null || _internalMarkers$ === void 0 ? void 0 : _internalMarkers$.position.lat) ?? 0,
lng: ((_internalMarkers$2 = internalMarkers[0]) === null || _internalMarkers$2 === void 0 ? void 0 : _internalMarkers$2.position.lng) ?? 0
}, {
lat: ((_internalMarkers$3 = internalMarkers[0]) === null || _internalMarkers$3 === void 0 ? void 0 : _internalMarkers$3.position.lat) ?? 0,
lng: ((_internalMarkers$4 = internalMarkers[1]) === null || _internalMarkers$4 === void 0 ? void 0 : _internalMarkers$4.position.lng) ?? 0
}, {
lat: ((_internalMarkers$5 = internalMarkers[1]) === null || _internalMarkers$5 === void 0 ? void 0 : _internalMarkers$5.position.lat) ?? 0,
lng: ((_internalMarkers$6 = internalMarkers[1]) === null || _internalMarkers$6 === void 0 ? void 0 : _internalMarkers$6.position.lng) ?? 0
}, {
lat: ((_internalMarkers$7 = internalMarkers[1]) === null || _internalMarkers$7 === void 0 ? void 0 : _internalMarkers$7.position.lat) ?? 0,
lng: ((_internalMarkers$8 = internalMarkers[0]) === null || _internalMarkers$8 === void 0 ? void 0 : _internalMarkers$8.position.lng) ?? 0
}];
const maxLat = path.reduce((prev, current) => prev.lat > current.lat ? prev : current);
const minLat = path.reduce((prev, current) => prev.lat < current.lat ? prev : current);
const maxLng = path.reduce((prev, current) => prev.lng > current.lng ? prev : current);
const minLng = path.reduce((prev, current) => prev.lng < current.lng ? prev : current);
const topLeft = path.find(item => item.lat === maxLat.lat && item.lng === minLng.lng);
const bottomRight = path.find(item => item.lat === minLat.lat && item.lng === maxLng.lng);
if (!topLeft || !bottomRight) {
return;
}
const centerLat = (topLeft.lat + bottomRight.lat) / 2;
const centerLng = (topLeft.lng + bottomRight.lng) / 2;
const polygonCenter = {
lat: centerLat,
lng: centerLng
};
if (!polygonCenter) {
return;
}
setCanPolyDraw(true);
setPolygonPath(path);
}, [internalMarkers]);
const handleIdle = m => {
var _m$getCenter;
setMap(m);
setZoom(m.getZoom() ?? 0);
setCenter(((_m$getCenter = m.getCenter()) === null || _m$getCenter === void 0 ? void 0 : _m$getCenter.toJSON()) ?? {
lat: 0,
lng: 0
});
};
const handlePositionChange = position => {
setCenter(position);
};
const handleMarkerChange = (0, _react.useCallback)(marker => {
setInternalMarkers(prevState => {
const updatedMarkers = (prevState ?? []).map(prevMarker => {
if (prevMarker.id === marker.id) {
return {
...prevMarker,
position: marker.position
};
}
return prevMarker;
});
if (typeof onMarkerChange === 'function') {
onMarkerChange(updatedMarkers);
}
return updatedMarkers;
});
}, [onMarkerChange]);
const handleMarkerRemove = (0, _react.useCallback)(id => {
setInternalMarkers(prevState => {
if (typeof onMarkerRemove === 'function') {
onMarkerRemove(id);
}
return prevState ? prevState.filter(marker => marker.id !== id) : [];
});
}, [onMarkerRemove]);
const markerList = (0, _react.useMemo)(() => {
const items = [];
if (!internalMarkers) {
return items;
}
internalMarkers.forEach(({
id,
position
}) => {
items.push(/*#__PURE__*/_react.default.createElement(_Marker.default, {
key: `marker_${id}`,
id: id,
position: position,
isDraggable: true,
map: map,
onChange: handleMarkerChange,
onRemove: handleMarkerRemove
}));
});
return items;
}, [handleMarkerChange, handleMarkerRemove, internalMarkers, map]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_MapWrapper.StyledMapWrapper, null, /*#__PURE__*/_react.default.createElement(_reactWrapper.Wrapper, {
apiKey: apiToken,
libraries: ['places']
}, /*#__PURE__*/_react.default.createElement(_Map.default, {
onClick: handleClick,
onIdle: handleIdle,
onPositionChange: handlePositionChange,
center: center,
zoom: zoom,
fullscreenControl: false,
mapTypeControl: false,
streetViewControl: false
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, markerList, canPolyDraw && /*#__PURE__*/_react.default.createElement(_api.Polygon, {
path: polygonPath,
options: polygonOptions
}))))), [apiToken, handleClick, center, zoom, markerList, canPolyDraw, polygonPath, polygonOptions]);
};
MapWrapper.displayName = 'MapWrapper';
var _default = exports.default = MapWrapper;
//# sourceMappingURL=MapWrapper.js.map