diff --git a/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx b/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx
index aa035d9a..2ba2ff54 100644
--- a/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx
+++ b/src/client/components/website/WebsiteVisitorMap/VisitorLarkMap.tsx
@@ -5,7 +5,7 @@ import {
PointLayer,
PointLayerProps,
} from '@antv/larkmap';
-import React from 'react';
+import React, { useMemo } from 'react';
import { AppRouterOutput } from '../../../api/trpc';
import { useGlobalConfig } from '../../../hooks/useConfig';
import { useSettingsStore } from '../../../store/settings';
@@ -76,10 +76,18 @@ export const VisitorLarkMap: React.FC<{
parser: { type: 'json', x: 'longitude', y: 'latitude' },
};
+ const size = useMemo(() => {
+ if (props.data.length > 5000) {
+ return 3;
+ }
+
+ return 5;
+ }, [props.data.length]);
+
return (
-
+
);
});
diff --git a/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx b/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx
index daf03de5..d2ad1c45 100644
--- a/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx
+++ b/src/client/components/website/WebsiteVisitorMap/VisitorLeafletMap.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { AppRouterOutput } from '../../../api/trpc';
import { MapContainer, CircleMarker, Popup, TileLayer } from 'react-leaflet';
import { mapCenter } from './utils';
@@ -7,11 +7,13 @@ import './VisitorLeafletMap.css';
import { useTranslation } from '@i18next-toolkit/react';
export const UserDataPoint: React.FC<{
+ pointRadius?: number;
longitude: number;
latitude: number;
count: number;
}> = React.memo((props) => {
const { t } = useTranslation();
+ const pointRadius = props.pointRadius ?? 5;
return (
= React.memo((props) => {
+ const pointRadius = useMemo(() => {
+ if (props.data.length > 20000) {
+ return 1;
+ }
+
+ if (props.data.length > 5000) {
+ return 2;
+ }
+
+ if (props.data.length > 1000) {
+ return 3;
+ }
+
+ return 5;
+ }, [props.data.length]);
+
return (
{props.data.map((item) => (
-
+
))}
);