+
+ {name}
+
+ {`${start}—${end}`}
+
+
+ {localization.view}
+
+
+
+ }
+ theme={theme}
+ onClick={async () => {
+ // to-do: event click action
+ // const cal = await import('../lib/cal');
+ // const { createICal } = cal;
+ // const { download } = cal;
+ // const invite = await createICal({
+ // start: starttime,
+ // end: endtime,
+ // title: name,
+ // url: link,
+ // location,
+ // locale,
+ // });
+ // await download(`purizu-external-${name}.ics`, invite, mobile);
+ }}
+ >
+ {localization.calendar}
+
+
+
+ );
+};
+
+export const HMapView = function ({
+ id = 'atom__MapView',
+ className = '',
+ events,
+ locale,
+ mobile,
+ city,
+ settings,
+ timeframe,
+ mapBoxToken,
+ fetchNewData,
+ theme = 'light',
+}: IMapView) {
+ const mapRef = useRef(null);
+ const popup = useRef({ open: false, feature: undefined });
+ const hoverPopup = useRef();
+ const [popupOpen, setPopupOpen] = useState(false);
+ const [hoverPopupOpen, setHoverPopupOpen] = useState(false);
+
+ const gridSx = [
+ {
+ [`class04
+ flex
+ col-span-full col-start-0
+ content-center
+ items-center
+ align-center
+ justify-center
+ `]: true,
+ },
+ ];
+
+ const gridStyles = `${clsx(gridSx)} ${className}`;
+
+ const onPopUpClose = () => {
+ setPopupOpen(false);
+ setHoverPopupOpen(false);
+ };
+
+ const onClickCluster = ({ target }) => {
+ if (popupOpen || hoverPopupOpen) {
+ setPopupOpen(false);
+ setHoverPopupOpen(false);
+ return;
+ }
+ const clusterId = target.properties.cluster_id;
+ const mapboxSource = mapRef.current.getSource('earthquakes');
+ mapboxSource.getClusterExpansionZoom(clusterId, (err, zoom) => {
+ if (err) {
+ return;
+ }
+
+ mapRef.current.easeTo({
+ center: target.geometry.coordinates,
+ zoom,
+ duration: 500,
+ });
+ });
+ };
+
+ const onClickPoint = ({ target, event }) => {
+ if (popupOpen || hoverPopupOpen) {
+ setPopupOpen(false);
+ setHoverPopupOpen(false);
+ return;
+ }
+ const { lngLat } = event;
+ const geometry = target.geometry.coordinates;
+ popup.current = {
+ feature: { properties: target.properties, geometry, lngLat },
+ };
+ setPopupOpen(true);
+ };
+
+ useEffect(() => {
+ if (events?.timeframe !== timeframe) {
+ fetchNewData({ force: true });
+ }
+ }, [timeframe]);
+
+ useEffect(() => {
+ if (!events?.mapData) return;
+ if (mapRef?.current && events?.mapData?.features?.length) {
+ const bounds = bbox(events?.mapData);
+
+ if (bounds?.length) {
+ try {
+ mapRef.current.fitBounds(bounds, { padding: 200, maxZoom: 14 });
+ } catch (e) {
+ mapRef.current.fitBounds(bounds, { padding: 20, maxZoom: 14 });
+ }
+ }
+ }
+ }, [JSON.stringify(events?.mapData)]);
+
+ const onClick = (event) => {
+ const [target] = event.features;
+
+ if (!target) return;
+
+ if (target.layer.id === 'clusters') {
+ onClickCluster({ target, event });
+ }
+ if (target.layer.id === 'point') {
+ onClickPoint({ target, event });
+ }
+ };
+
+ const onMouseEnter = (event) => {
+ const [target] = event.features;
+ const clusterId = target.properties.cluster_id;
+ const mapboxSource = mapRef.current.getSource(id);
+ mapboxSource.getClusterLeaves(clusterId, 5, 0, (err, features) => {
+ if (err) return;
+ hoverPopup.current = features;
+ hoverPopup.current.coordinates = target.geometry.coordinates;
+ setHoverPopupOpen(true);
+ });
+ };
+
+ const onMouseLeave = () => {
+ setHoverPopupOpen(false);
+ };
+
+ const centre = [settings.where.lon, settings.where.lat] || [0, 0];
+ const zoom = settings.zoom || 10;
+
+ return (
+