From 429a81311a8300f9a65424a8c6e431bd17aafc9a Mon Sep 17 00:00:00 2001 From: David Mears <clarinet.david@gmail.com> Date: Mon, 11 Nov 2024 13:51:22 +0000 Subject: [PATCH 1/2] Globe: Color disputed lands according to neighboring countries' color The intention is to prevent the Abyei region (between Sudan and South Sudan) from looking like a selectable country, which it did because it was colored with the default color but was surrounded by unselectable countries. --- components/Globe.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/components/Globe.vue b/components/Globe.vue index f4c00b70..524a77d8 100644 --- a/components/Globe.vue +++ b/components/Globe.vue @@ -63,11 +63,12 @@ const disputedLands: Record<string, { disputers: string[] mapSeries: am5map.MapPolygonSeries | null displayed: boolean + colorAsSelectable: boolean }> = { - "Western Sahara": { disputers: ["ESH", "MAR"], mapSeries: null, displayed: false }, - "Abyei": { disputers: ["SSD", "SDN"], mapSeries: null, displayed: false }, - "Aksai Chin": { disputers: ["CHN", "IND"], mapSeries: null, displayed: false }, - "Jammu and Kashmir": { disputers: ["IND", "PAK", "CHN"], mapSeries: null, displayed: false }, + "Western Sahara": { disputers: ["ESH", "MAR"], mapSeries: null, displayed: false, colorAsSelectable: false }, + "Abyei": { disputers: ["SSD", "SDN"], mapSeries: null, displayed: false, colorAsSelectable: false }, + "Aksai Chin": { disputers: ["CHN", "IND"], mapSeries: null, displayed: false, colorAsSelectable: true }, + "Jammu and Kashmir": { disputers: ["IND", "PAK", "CHN"], mapSeries: null, displayed: false, colorAsSelectable: true }, }; const chartDefaultSettings: am5map.IMapChartSettings = { panX: "rotateX", @@ -112,7 +113,6 @@ const disputedAreaSeriesSettings: am5map.IMapPolygonSeriesSettings = { // Settings for disputed *land* areas - see 'Customization' in shapefiles.md const disputedLandSeriesSettings: am5map.IMapPolygonSeriesSettings = { ...disputedAreaSeriesSettings, - fill: defaultLandColour, layer: maxZindex - 1, // Make sure disputed areas are always painted on top of country areas }; // Settings for disputed *water* areas - see 'Customization' in shapefiles.md @@ -339,6 +339,7 @@ const setUpDisputedAreasSeries = () => { ...disputedLandSeriesSettings, reverseGeodata: true, include: [disputedArea], + fill: disputedLands[disputedArea].colorAsSelectable ? defaultLandColour : unselectableLandColor, }); }); From d3773f22da650037c522c90fb3d120316d0fa4cf Mon Sep 17 00:00:00 2001 From: David Mears <clarinet.david@gmail.com> Date: Tue, 12 Nov 2024 11:25:41 +0000 Subject: [PATCH 2/2] Add Antarctica to the globe --- components/Globe.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/Globe.vue b/components/Globe.vue index f4c00b70..96905486 100644 --- a/components/Globe.vue +++ b/components/Globe.vue @@ -21,6 +21,7 @@ import { rgba2hex } from "@amcharts/amcharts5/.internal/core/util/Color"; import * as am5 from "@amcharts/amcharts5/index"; import * as am5map from "@amcharts/amcharts5/map"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; +import worldLow from "@amcharts/amcharts5-geodata/worldLow"; import throttle from "lodash.throttle"; const appStore = useAppStore(); @@ -299,6 +300,10 @@ const setUpBackgroundSeries = () => { backgroundSeries.mapPolygons.template.on("active", (_active, target) => handlePolygonActive(target, prevBackgroundPolygon)); }; +const setUpAntarcticaSeries = () => { + initializeSeries({ ...backgroundSeriesSettings, geoJSON: worldLow, include: ["AQ"] }); +}; + const setUpSelectableCountriesSeries = () => { selectableCountriesSeries = initializeSeries({ ...selectableCountriesSeriesSettings, reverseGeodata: false }); selectableCountriesSeries.mapPolygons.template.setAll({ @@ -350,6 +355,7 @@ const setUpChart = () => { root.setThemes([am5themes_Animated.new(root)]); chart = root.container.children.push(am5map.MapChart.new(root, chartDefaultSettings)); setUpBackgroundSeries(); + setUpAntarcticaSeries(); setUpSelectableCountriesSeries(); setUpDisputedAreasSeries(); gentleRotateAnimation = createRotateAnimation();