dont filter kosovo. create an non-independent label style

src/root/components/map/common/map-component.js

@@ -9,7 +9,7 @@ import exportMap from '#utils/export-map';
 import DownloadButton from './download-button';
 import MapHeader from './map-header';
 import Translate from '#components/Translate';
-import { countryLabels } from '#utils/country-labels';
+import { countryLabels, countryNonIndependentLabels } from '#utils/country-labels';
 
 export default class MapComponent extends React.Component {
   constructor (props) {
@@ -39,6 +39,7 @@ export default class MapComponent extends React.Component {
 
       // add custom language labels
       this.theMap.addLayer(countryLabels);
+      this.theMap.addLayer(countryNonIndependentLabels);
     }
 
     get(this.props, 'layers', []).forEach(layer => this.theMap.addLayer(layer));

src/root/selectors/index.js

@@ -182,9 +182,10 @@ export const countriesGeojsonSelector = (state) => {
     state.allCountries.data.results.forEach(country => {
       // select only independent = true or null and record_type = 1
       // also remove ICRC and IFRC
+      // don't filter independent=false Kosovo using id 335
       if (
         country.centroid &&
-        (country.independent || country.independent === null) &&
+        (country.independent || country.independent === null || country.id === 335) &&
         country.record_type === 1 &&
 
         // This filters out the ICRC and IFRC "countries". FIXME: this should be handled better
@@ -198,7 +199,9 @@ export const countriesGeojsonSelector = (state) => {
             'name': country.iso === 'ps' ? palestineLabel(currentLang) : country.name,
             'iso': country.iso,
             'iso3': country.iso3,
-            'society_name': country.society_name
+            'society_name': country.society_name,
+            'independent': country.independent,
+            'id': country.id
           }
         };
         featureCollection.features.push(f);

src/root/utils/country-labels.js

@@ -17,9 +17,37 @@ export const countryLabels = {
       6, 16
     ]
   },
+  filter: ['==', ['get', 'independent'], true],
   paint: {
    'text-color': '#000000',
    'text-halo-color': '#000000',
    'text-halo-width': 0.2
   }
+};
+
+export const countryNonIndependentLabels = {
+  'id': 'countryNonIndependentLabels',
+  'source': 'countryCentroids',
+  'type': 'symbol',
+  layout: {
+    'text-field': ['get', 'name'],
+    'text-font': ['Poppins Regular', 'Arial Unicode MS Regular'],
+    'text-letter-spacing': 0.15,
+    'text-line-height': 1.2,
+    'text-max-width': 8,
+    'text-justify': 'center',
+    'text-anchor': 'top',
+    'text-padding': 2,
+    'text-size': [
+      'interpolate', ['linear', 1], ['zoom'],
+      0, 5,
+      6, 15
+    ]
+  },
+  filter: ['==', ['get', 'independent'], false],
+  paint: {
+   'text-color': '#716f6f',
+   'text-halo-color': '#ffffff',
+   'text-halo-width': 0.2
+  }
 };