Merge pull request #85 from unicef/hotfix/country-disputes-lines

fix disputes boundaries issue
unicef · Nov 29, 2024 · 2727340 · 2727340
2 parents 11bfd2a + cd55cd7
commit 2727340
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/@/country/country.utils.ts b/src/@/country/country.utils.ts
@@ -4,7 +4,7 @@ import { Expression, LngLatBoundsLike, Map, MapLayerMouseEvent } from "mapbox-gl
 import { mapCountry } from "~/core/routes";
 
 import { Colors, getCountryLine, getCountryLineWidth, getDefaultCountryColor, getDefaultCountryOpacity } from "../map/map.constant";
-import { checkSourceAvailable, filterCountry, findLayer, getAllSourceLayers, hideLayer, isDefaultStyle, mapDotsClickIdsAndHandler, matchAdminFilter, showLayer, wvFilter } from "../map/utils";
+import { checkSourceAvailable, filterCountry, findLayer, getAllSourceLayers, hideLayer, isDefaultStyle, mapDotsClickIdsAndHandler, matchAdminFilter, notHasDispute, showLayer, wvFilter } from "../map/utils";
 import { AdminLayerFillPrefix, AdminLayerLinePrefix, AdminSourcePrefix, CountryAdminIdsName, CountryAdminLevel, mapAdminLayerList, mapLabelLayerList, zoomPaddingMobile } from "./country.constant";
 import { setZoomCountryCode } from "./country.model";
 import { AddCountries } from "./country.types";
@@ -92,24 +92,45 @@ export const createLineLayerForCountry = ({ map, paintData, level, selectedLevel
   const { isLessThan } = getCountryLevels(level, selectedLevel);
   const layerId = getAdminCountryLayerLine(level);
   const isLevel0 = level === CountryAdminLevel.level0;
+  const liveOFilter = isLevel0 ? notHasDispute(worldView) : wvFilter(worldView);
   if (!map.getLayer(layerId) && !isLessThan) {
     map.addLayer({
       id: getAdminCountryLayerLine(level),
       type: 'line',
       source: getAdminCountrySource(level),
       "source-layer": `boundaries_admin_${level}`,
-      filter: countryCode ? filterCountry(countryCode, isLevel0 ? "!=" : "==", worldView) : wvFilter(worldView),
+      filter: countryCode ? filterCountry(countryCode, isLevel0 ? "!=" : "==", worldView) : liveOFilter,
       paint: {
         'line-color': getCountryLine(paintData),
         'line-width': getCountryLineWidth(),
       },
-    });
-    map.setFilter('admin-0-boundary-disputed', countryCode ? filterCountry(countryCode, isLevel0 ? "!=" : "==", worldView) : wvFilter(worldView));
+    }, 'admin-0-boundary-disputed');
+    if (isLevel0) {
+      map.setPaintProperty('admin-0-boundary-disputed', 'line-opacity', [
+        'case',
+        [
+          'all',
+          ["==", ["get", "dispute"], "true"],
+          wvFilter(worldView),
+        ],
+        0, 1
+      ]);
+
+      map.setPaintProperty('admin-0-boundary-disputed', 'line-opacity', [
+        'case',
+        [
+          'all',
+          ["!", ["has", "dispute"]],
+          wvFilter(worldView),
+        ],
+        1, 0
+      ]);
+    }
   } else if (isLessThan) {
     hideLayer(map, layerId);
   } else {
     showLayer(map, layerId)
-    map.setFilter(layerId, countryCode ? filterCountry(countryCode, isLevel0 ? "!=" : "==", worldView) : wvFilter(worldView));
+    map.setFilter(layerId, countryCode ? filterCountry(countryCode, isLevel0 ? "!=" : "==", worldView) : liveOFilter);
   }
 }
 

diff --git a/src/@/map/utils.ts b/src/@/map/utils.ts
@@ -5,7 +5,7 @@ import { getBaseUrl } from "~/api/project-connect";
 import { GeoJSONFeatureCollection, GeoJSONPoint } from '~/core/global-types';
 
 import { ConnectivityDistribution, ConnectivityStatusDistribution, Layers, SCHOOL_STATUS_LAYER } from "../sidebar/sidebar.constant";
-import { animateCircleConfig, Colors, LayerDataProps, mapPaintData } from "./map.constant";
+import { animateCircleConfig, Colors, defaultWorldView, LayerDataProps, mapPaintData } from "./map.constant";
 import { setPopupOnClickDot } from "./map.model";
 import { ChangeLayerOptions, StylePaintData } from "./map.types";
 import { gigaThemeList, ThemeType } from "~/core/theme.model";
@@ -336,14 +336,21 @@ export const filterSchoolStatus = (lengendsSelected: string[]) => {
 }
 
 // Creates a worldview filtes for Mapbox Boundaries tilesets
-export const wvFilter = (worldview = "IN") => {
+export const wvFilter = (worldview = defaultWorldView) => {
   return [
     "any",
     ["==", "all", ["get", "worldview"]],
     ["in", worldview, ["get", "worldview"]],
   ];
 }
 
+export const notHasDispute = (worldview = defaultWorldView) => {
+  return [
+    "all",
+    ["!", ["has", "dispute"]],
+    wvFilter(worldview),
+  ]
+}
 export const filterCountry = (countryCode: string, operator = "==", worldView?: string) => {
   // Create a filter expression for the boundary layer using the country and worldview selection
   if (!countryCode) return []