From f0d32db9016d7e839bdc63dd66ce4e4404708133 Mon Sep 17 00:00:00 2001 From: Ben Bell Date: Mon, 15 Apr 2024 18:19:26 +0800 Subject: [PATCH] feat: fill country (#654) * feat: add line color in China Geojson * feat: fill countries that been there; only support Chinese user; * feat: fill countries that been there; only support Chinese user; --- package.json | 1 + pnpm-lock.yaml | 7 +++++++ src/components/RunMap/index.tsx | 18 ++++++++++++++--- src/static/run_countries.ts | 35 +++++++++++++++++++++++++++++++++ src/utils/const.ts | 2 ++ src/utils/utils.ts | 14 +++++++++---- 6 files changed, 70 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index bbd889cec4b..573d214713b 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "dependencies": { "@mapbox/mapbox-gl-language": "^1.0.0", "@mapbox/polyline": "^1.1.1", + "@surbowl/world-geo-json-zh": "^2.1.3", "@svgr/plugin-svgo": "^8.1.0", "@vercel/analytics": "^0.1.6", "@vitejs/plugin-react": "^4.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 429a0bff1ca..861732e0057 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@mapbox/polyline': specifier: ^1.1.1 version: 1.2.0 + '@surbowl/world-geo-json-zh': + specifier: ^2.1.3 + version: 2.1.3 '@svgr/plugin-svgo': specifier: ^8.1.0 version: 8.1.0(@svgr/core@8.1.0) @@ -958,6 +961,10 @@ packages: picomatch: 2.3.1 dev: false + /@surbowl/world-geo-json-zh@2.1.3: + resolution: {integrity: sha512-6m/eVcSsWvFXYkaEQLHCxJqFSkTMVaDgfTg9weQr2lozyrxxH+SsRTq24DFfCqFX7L9zKtDQcP6+5VKemY1Rcg==} + dev: false + /@svgr/babel-plugin-add-jsx-attribute@7.0.0(@babel/core@7.22.11): resolution: {integrity: sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==} engines: {node: '>=14'} diff --git a/src/components/RunMap/index.tsx b/src/components/RunMap/index.tsx index b36c3fe4193..2b5cf98a749 100644 --- a/src/components/RunMap/index.tsx +++ b/src/components/RunMap/index.tsx @@ -7,9 +7,9 @@ import { MAP_LAYER_LIST, IS_CHINESE, ROAD_LABEL_DISPLAY, - MAIN_COLOR, MAPBOX_TOKEN, PROVINCE_FILL_COLOR, + COUNTRY_FILL_COLOR, USE_DASH_LINE, LINE_OPACITY, MAP_HEIGHT, @@ -42,7 +42,7 @@ const RunMap = ({ geoData, thisYear, }: IRunMapProps) => { - const { provinces } = useActivities(); + const { countries, provinces } = useActivities(); const mapRef = useRef(); const [lights, setLights] = useState(PRIVACY_MODE ? false : LIGHTS_ON); const keepWhenLightsOff = ['runs2'] @@ -84,8 +84,10 @@ const RunMap = ({ [mapRef, lights] ); const filterProvinces = provinces.slice(); + const filterCountries = countries.slice(); // for geojson format filterProvinces.unshift('in', 'name'); + filterCountries.unshift('in', 'name'); const initGeoDataLength = geoData.features.length; const isBigMap = (viewState.zoom ?? 0) <= 3; @@ -145,11 +147,21 @@ const RunMap = ({ }} filter={filterProvinces} /> + = { name: '新疆维吾尔自治区', cp: [84.9023, 42.148], childNum: 18, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -181,6 +183,7 @@ export const chinaGeojson: FeatureCollection = { name: '西藏自治区', cp: [87.8695, 31.6846], childNum: 7, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -345,6 +348,7 @@ export const chinaGeojson: FeatureCollection = { name: '内蒙古自治区', cp: [112.5977, 46.3408], childNum: 12, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -587,6 +591,7 @@ export const chinaGeojson: FeatureCollection = { name: '青海省', cp: [95.2402, 35.4199], childNum: 8, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -739,6 +744,7 @@ export const chinaGeojson: FeatureCollection = { name: '四川省', cp: [101.9199, 30.1904], childNum: 21, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -884,6 +890,7 @@ export const chinaGeojson: FeatureCollection = { name: '黑龙江省', cp: [126.1445, 48.7156], childNum: 13, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1022,6 +1029,7 @@ export const chinaGeojson: FeatureCollection = { name: '甘肃省', cp: [99.7129, 38.166], childNum: 14, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1214,6 +1222,7 @@ export const chinaGeojson: FeatureCollection = { name: '云南省', cp: [101.0652, 25.1807], childNum: 16, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1357,6 +1366,7 @@ export const chinaGeojson: FeatureCollection = { name: '广西壮族自治区', cp: [107.7813, 23.6426], childNum: 14, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1459,6 +1469,7 @@ export const chinaGeojson: FeatureCollection = { name: '湖南省', cp: [111.5332, 27.3779], childNum: 14, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1551,6 +1562,7 @@ export const chinaGeojson: FeatureCollection = { name: '陕西省', cp: [109.5996, 35.7396], childNum: 10, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1652,6 +1664,7 @@ export const chinaGeojson: FeatureCollection = { name: '广东省', cp: [113.4668, 22.8076], childNum: 21, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1761,6 +1774,7 @@ export const chinaGeojson: FeatureCollection = { name: '吉林省', cp: [125.7746, 43.5938], childNum: 9, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -1857,6 +1871,7 @@ export const chinaGeojson: FeatureCollection = { name: '河北省', cp: [115.4004, 39.4688], childNum: 11, + color: MAIN_COLOR, }, geometry: { type: 'MultiPolygon', @@ -1989,6 +2004,7 @@ export const chinaGeojson: FeatureCollection = { name: '湖北省', cp: [112.2363, 31.1572], childNum: 17, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2083,6 +2099,7 @@ export const chinaGeojson: FeatureCollection = { name: '贵州省', cp: [106.6113, 26.9385], childNum: 9, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2179,6 +2196,7 @@ export const chinaGeojson: FeatureCollection = { name: '山东省', cp: [118.7402, 36.4307], childNum: 17, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2261,6 +2279,7 @@ export const chinaGeojson: FeatureCollection = { name: '江西省', cp: [116.0156, 27.29], childNum: 11, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2340,6 +2359,7 @@ export const chinaGeojson: FeatureCollection = { name: '河南省', cp: [113.0668, 33.8818], childNum: 17, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2420,6 +2440,7 @@ export const chinaGeojson: FeatureCollection = { name: '辽宁省', cp: [122.0438, 41.0889], childNum: 14, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2490,6 +2511,7 @@ export const chinaGeojson: FeatureCollection = { name: '山西省', cp: [112.4121, 37.6611], childNum: 11, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2559,6 +2581,7 @@ export const chinaGeojson: FeatureCollection = { name: '安徽省', cp: [117.2461, 32.0361], childNum: 17, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2644,6 +2667,7 @@ export const chinaGeojson: FeatureCollection = { name: '福建省', cp: [118.3008, 25.9277], childNum: 9, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2717,6 +2741,7 @@ export const chinaGeojson: FeatureCollection = { name: '浙江省', cp: [120.498, 29.0918], childNum: 11, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2781,6 +2806,7 @@ export const chinaGeojson: FeatureCollection = { name: '江苏省', cp: [118.8586, 32.915], childNum: 13, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2854,6 +2880,7 @@ export const chinaGeojson: FeatureCollection = { name: '重庆市', cp: [107.7539, 30.1904], childNum: 40, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2937,6 +2964,7 @@ export const chinaGeojson: FeatureCollection = { name: '宁夏回族自治区', cp: [105.9961, 37.3096], childNum: 5, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -2993,6 +3021,7 @@ export const chinaGeojson: FeatureCollection = { name: '海南省', cp: [109.9512, 19.2041], childNum: 18, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3029,6 +3058,7 @@ export const chinaGeojson: FeatureCollection = { name: '台湾省', cp: [120.0254, 23.5986], childNum: 1, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3062,6 +3092,7 @@ export const chinaGeojson: FeatureCollection = { name: '北京市', cp: [116.4551, 40.2539], childNum: 19, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3103,6 +3134,7 @@ export const chinaGeojson: FeatureCollection = { name: '天津市', cp: [117.4219, 39.4189], childNum: 18, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3143,6 +3175,7 @@ export const chinaGeojson: FeatureCollection = { name: '上海市', cp: [121.4648, 31.2891], childNum: 19, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3170,6 +3203,7 @@ export const chinaGeojson: FeatureCollection = { name: '香港特别行政区', cp: [114.1178, 22.3242], childNum: 1, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', @@ -3198,6 +3232,7 @@ export const chinaGeojson: FeatureCollection = { name: '澳门特别行政区', cp: [111.5547, 22.1484], childNum: 1, + color: MAIN_COLOR, }, geometry: { type: 'Polygon', diff --git a/src/utils/const.ts b/src/utils/const.ts index e4a47573efe..2d7e7136107 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -98,9 +98,11 @@ export { }; const nike = 'rgb(224,237,94)'; // if you want change the main color change here src/styles/variables.scss +const dark_vanilla = 'rgb(228,212,220)'; // If your map has an offset please change this line // issues #92 and #198 export const NEED_FIX_MAP = false; export const MAIN_COLOR = nike; export const PROVINCE_FILL_COLOR = '#47b8e0'; +export const COUNTRY_FILL_COLOR = dark_vanilla; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 1c980b35668..ee68d63fe3e 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,9 +1,10 @@ import * as mapboxPolyline from '@mapbox/polyline'; import gcoord from 'gcoord'; import { WebMercatorViewport } from 'viewport-mercator-project'; -import { chinaGeojson } from '@/static/run_countries'; +import { chinaGeojson, RPGeometry } from '@/static/run_countries'; +import worldGeoJson from '@surbowl/world-geo-json-zh/world.zh.json'; import { chinaCities } from '@/static/city'; -import { MUNICIPALITY_CITIES_ARR, NEED_FIX_MAP, RUN_TITLES } from './const'; +import { MAIN_COLOR, MUNICIPALITY_CITIES_ARR, NEED_FIX_MAP, RUN_TITLES } from './const'; import { FeatureCollection, LineString } from 'geojson'; export type Coordinate = [number, number]; @@ -170,7 +171,9 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection => ({ return { type: 'Feature', - properties: {}, + properties: { + color: MAIN_COLOR, + }, geometry: { type: 'LineString', coordinates: points, @@ -179,7 +182,10 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection => ({ }), }); -const geoJsonForMap = () => chinaGeojson; +const geoJsonForMap = (): FeatureCollection => ({ + type: 'FeatureCollection', + features: worldGeoJson.features.concat(chinaGeojson.features), + }) const titleForRun = (run: Activity): string => { const runDistance = run.distance / 1000;