feat: fill countries that been there; only support Chinese user;

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",

src/components/RunMap/index.tsx

@@ -9,6 +9,7 @@ import {
   ROAD_LABEL_DISPLAY,
   MAPBOX_TOKEN,
   PROVINCE_FILL_COLOR,
+  COUNTRY_FILL_COLOR,
   USE_DASH_LINE,
   LINE_OPACITY,
   MAP_HEIGHT,
@@ -41,7 +42,7 @@ const RunMap = ({
   geoData,
   thisYear,
 }: IRunMapProps) => {
-  const { provinces } = useActivities();
+  const { countries, provinces } = useActivities();
   const mapRef = useRef<MapRef>();
   const [lights, setLights] = useState(PRIVACY_MODE ? false : LIGHTS_ON);
   const keepWhenLightsOff = ['runs2']
@@ -83,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;
@@ -144,6 +147,16 @@ const RunMap = ({
           }}
           filter={filterProvinces}
         />
+        <Layer
+          id="countries"
+          type="fill"
+          paint={{
+            'fill-color': COUNTRY_FILL_COLOR,
+            // in China, fill a bit lighter while already filled provinces
+            'fill-opacity': ["case", ["==", ["get", "name"], '中国'], 0.1, 0.5],
+          }}
+          filter={filterCountries}
+        />
         <Layer
           id="runs2"
           type="line"

src/utils/const.ts

@@ -95,9 +95,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;

src/utils/utils.ts

@@ -1,7 +1,8 @@
 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 } from './const';
 import { FeatureCollection, LineString } from 'geojson';
@@ -181,7 +182,10 @@ const geoJsonForRuns = (runs: Activity[]): FeatureCollection<LineString> => ({
   }),
 });
 
-const geoJsonForMap = () => chinaGeojson;
+const geoJsonForMap = (): FeatureCollection<RPGeometry> => ({
+    type: 'FeatureCollection',
+    features: worldGeoJson.features.concat(chinaGeojson.features),
+  })
 
 const titleForRun = (run: Activity): string => {
   const runDistance = run.distance / 1000;