Merge branch 'feat_fill_country'

# Conflicts:
#	src/components/RunMap/index.tsx
#	src/utils/const.ts
#	src/utils/utils.ts

.vercelignore

@@ -1 +1,2 @@
 requirements.txt  
+requirements-dev.txt  

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",
@@ -65,5 +66,5 @@
     "prettier": "2.8.8",
     "typescript": "^5.1.6"
   },
-  "packageManager": "pnpm@8.7.0"
+  "packageManager": "yarn@1.22.22"
 }

src/components/RunMap/index.tsx

@@ -7,7 +7,6 @@ import {
   MAP_LAYER_LIST,
   IS_CHINESE,
   ROAD_LABEL_DISPLAY,
-  MAIN_COLOR,
   MAPBOX_TOKEN,
   PROVINCE_FILL_COLOR,
   COUNTRY_FILL_COLOR,
@@ -154,7 +153,8 @@ const RunMap = ({
           type="fill"
           paint={{
             'fill-color': COUNTRY_FILL_COLOR,
-            'fill-opacity': 0.5,
+            // in China, fill a bit lighter while already filled provinces
+            'fill-opacity': ["case", ["==", ["get", "name"], '中国'], 0.1, 0.5],
           }}
           filter={filterCountries}
         />

src/utils/const.ts

@@ -117,7 +117,7 @@ const green = 'rgb(0,237,94)';
 const pink = 'rgb(237,85,219)';
 const cyan = 'rgb(112,243,255)';
 const IKB = 'rgb(0,47,167)';
-const wpink = 'rgb(228,212,220)';
+const dark_vanilla = 'rgb(228,212,220)';
 const gold = 'rgb(242,190,69)';
 const purple = 'rgb(154,118,252)';
 const veryPeri = 'rgb(105,106,173)';//长春花蓝
@@ -134,9 +134,9 @@ export const HIKE_COLOR = pink;
 export const SWIM_COLOR = gold;
 export const ROWING_COLOR = cyan;
 export const ROAD_TRIP_COLOR = purple;
-export const FLIGHT_COLOR = wpink;
+export const FLIGHT_COLOR = dark_vanilla;
 export const PROVINCE_FILL_COLOR = '#47b8e0';
-export const COUNTRY_FILL_COLOR = wpink;
+export const COUNTRY_FILL_COLOR = dark_vanilla;
 export const KAYAKING_COLOR = red;
-export const SNOWBOARD_COLOR = wpink;
+export const SNOWBOARD_COLOR = dark_vanilla;
 export const TRAIL_RUN_COLOR = IKB;

src/utils/utils.ts

@@ -1,13 +1,14 @@
 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 {
+  MAIN_COLOR,
   MUNICIPALITY_CITIES_ARR,
   NEED_FIX_MAP,
   RUN_TITLES,
-  MAIN_COLOR,
   RIDE_COLOR,
   VIRTUAL_RIDE_COLOR,
   HIKE_COLOR,
@@ -182,20 +183,23 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection<LineString> => ({
 
     return {
       type: 'Feature',
+      properties: {
+        'color': colorFromType(run.type),
+      },
       geometry: {
         type: 'LineString',
         coordinates: points,
         workoutType: run.type,
       },
-      properties: {
-        'color': colorFromType(run.type),
-      },
       name: run.name,
     };
   }),
 });
 
-const geoJsonForMap = () => chinaGeojson;
+const geoJsonForMap = (): FeatureCollection<RPGeometry> => ({
+    type: 'FeatureCollection',
+    features: worldGeoJson.features.concat(chinaGeojson.features),
+  })
 
 const titleForType = (type: string): string => {
   switch (type) {