Map styles updates + series source fix.

src/screens/InAppScreens/MapScreen/index.tsx

@@ -29,7 +29,7 @@ import RegionPopup from 'src/components/RegionPopup';
 import { useRegion } from 'src/contexts/RegionContext';
 import { qualityOptions } from '../TravelsScreen/utils/constants';
 import { AvatarWithInitials, EditNmModal, WarningModal } from 'src/components';
-import { API_HOST, MAP_HOST, VECTOR_MAP_HOST } from 'src/constants';
+import { API_HOST, VECTOR_MAP_HOST } from 'src/constants';
 import { NAVIGATION_PAGES } from 'src/types';
 import Animated, {
   Easing,
@@ -85,7 +85,7 @@ let regions_visited = {
     fillOutlineColor: 'rgba(14, 80, 109, 1)'
   },
   filter: generateFilter([]),
-  maxzoom: 12
+  maxzoom: 10
 };
 
 let countries_visited = {
@@ -108,9 +108,8 @@ let dare_visited = {
   source: 'dare',
   'source-layer': 'dare',
   style: {
-    fillColor: 'rgba(255, 126, 0, 1)',
-    fillOpacity: 0.6,
-    fillOutlineColor: 'rgba(255, 126, 0, 1)'
+    fillColor: 'rgba(255, 126, 0, 0.6)',
+    fillOutlineColor: 'rgba(255, 126, 0, 0)'
   },
   filter: generateFilter([]),
   maxzoom: 12
@@ -125,6 +124,17 @@ let regions = {
     fillColor: 'rgba(15, 63, 79, 0)',
     fillOutlineColor: 'rgba(14, 80, 109, 1)'
   },
+  paint: {
+    'line-width': {
+      base: 0.2,
+      stops: [
+        [0, 0.2],
+        [4, 1],
+        [5, 1.5],
+        [12, 3]
+      ]
+    },
+  },
   filter: ['all'],
   maxzoom: 16
 };
@@ -138,6 +148,17 @@ let countries = {
     fillColor: 'rgba(15, 63, 79, 0)',
     fillOutlineColor: 'rgba(14, 80, 109, 1)'
   },
+  paint: {
+    'line-width': {
+      base: 0.2,
+      stops: [
+        [0, 0.2],
+        [4, 1],
+        [5, 1.5],
+        [12, 3]
+      ]
+    }
+  },
   filter: ['all'],
   maxzoom: 16
 };
@@ -149,7 +170,7 @@ let dare = {
   'source-layer': 'dare',
   style: {
     fillColor: 'rgba(14, 80, 109, 0.6)',
-    fillOutlineColor: 'rgba(14, 80, 109, 1)'
+    fillOutlineColor: 'rgba(14, 80, 109, 0)'
   },
   filter: ['all'],
   maxzoom: 16
@@ -172,20 +193,25 @@ let series_layer = {
   type: 'symbol',
   source: 'nomadmania_series',
   'source-layer': 'series',
+  minzoom: 6,
+  maxzoom: 60,
   layout: {
+    'symbol-spacing': 1,
     'icon-image': '{series_id}',
-    'icon-size': 0.1,
+    'icon-size': 0.15,
+    'icon-allow-overlap': true,
+    'icon-ignore-placement': true,
     'text-anchor': 'top',
-    'text-field': '{series_name} - {name}',
+    'text-field': '{name}',
     'text-font': ['Noto Sans Regular'],
     'text-max-width': 9,
     'text-offset': [0, 0.6],
     'text-padding': 2,
     'text-size': 12,
-    visibility: 'visible',
+    'visibility': 'visible',
     'text-optional': true,
-    'text-ignore-placement': true,
-    'text-allow-overlap': true
+    'text-ignore-placement': false,
+    'text-allow-overlap': false
   },
   paint: {
     'text-color': '#666',
@@ -201,20 +227,25 @@ let series_visited = {
   type: 'symbol',
   source: 'nomadmania_series',
   'source-layer': 'series',
+  minzoom: 6,
+  maxzoom: 60,
   layout: {
+    'symbol-spacing': 1,
     'icon-image': '{series_id}v',
     'icon-size': 0.15,
+    'icon-allow-overlap': true,
+    'icon-ignore-placement': true,
     'text-anchor': 'top',
-    'text-field': '{series_name} - {name}',
+    'text-field': '{name}',
     'text-font': ['Noto Sans Regular'],
     'text-max-width': 9,
     'text-offset': [0, 0.6],
     'text-padding': 2,
     'text-size': 12,
-    visibility: 'visible',
+    'visibility': 'visible',
     'text-optional': true,
-    'text-ignore-placement': true,
-    'text-allow-overlap': true
+    'text-ignore-placement': false,
+    'text-allow-overlap': false
   },
   paint: {
     'text-color': '#666',
@@ -661,13 +692,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         if (tableName === 'regions') {
           token
             ? await mutateUserData(
-                { region_id: +foundRegion, token: String(token) },
-                {
-                  onSuccess: (data) => {
-                    setUserData({ type: 'nm', id: +foundRegion, ...data });
-                  }
+              { region_id: +foundRegion, token: String(token) },
+              {
+                onSuccess: (data) => {
+                  setUserData({ type: 'nm', id: +foundRegion, ...data });
                 }
-              )
+              }
+            )
             : setUserData({ type: 'nm', id: +foundRegion });
           if (regionsList) {
             const region = regionsList.data.find((region) => region.id === +foundRegion);
@@ -684,13 +715,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         } else if (tableName === 'countries') {
           token
             ? await mutateCountriesData(
-                { id: +foundRegion, token },
-                {
-                  onSuccess: (data) => {
-                    setUserData({ type: 'countries', id: +foundRegion, ...data.data });
-                  }
+              { id: +foundRegion, token },
+              {
+                onSuccess: (data) => {
+                  setUserData({ type: 'countries', id: +foundRegion, ...data.data });
                 }
-              )
+              }
+            )
             : setUserData({ type: 'countries', id: +foundRegion });
           if (countriesList) {
             const region = countriesList.data.find((region) => region.id === +foundRegion);
@@ -707,13 +738,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         } else {
           token
             ? await mutateUserDataDare(
-                { dare_id: +foundRegion, token: String(token) },
-                {
-                  onSuccess: (data) => {
-                    setUserData({ type: 'dare', id: +foundRegion, ...data });
-                  }
+              { dare_id: +foundRegion, token: String(token) },
+              {
+                onSuccess: (data) => {
+                  setUserData({ type: 'dare', id: +foundRegion, ...data });
                 }
-              )
+              }
+            )
             : setUserData({ type: 'dare', id: +foundRegion });
           if (dareList) {
             const region = dareList.data.find((region) => region.id === +foundRegion);
@@ -859,13 +890,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       if (type === 'regions') {
         token
           ? await mutateUserData(
-              { region_id: id, token: String(token) },
-              {
-                onSuccess: (data) => {
-                  setUserData({ type: 'nm', id, ...data });
-                }
+            { region_id: id, token: String(token) },
+            {
+              onSuccess: (data) => {
+                setUserData({ type: 'nm', id, ...data });
               }
-            )
+            }
+          )
           : setUserData({ type: 'nm', id });
 
         if (regionsList) {
@@ -883,13 +914,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       } else if (type === 'countries') {
         token
           ? await mutateCountriesData(
-              { id, token },
-              {
-                onSuccess: (data) => {
-                  setUserData({ type: 'countries', id, ...data.data });
-                }
+            { id, token },
+            {
+              onSuccess: (data) => {
+                setUserData({ type: 'countries', id, ...data.data });
               }
-            )
+            }
+          )
           : setUserData({ type: 'countries', id });
 
         if (countriesList) {
@@ -907,13 +938,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       } else {
         token
           ? await mutateUserDataDare(
-              { dare_id: +id, token: String(token) },
-              {
-                onSuccess: (data) => {
-                  setUserData({ type: 'dare', id: +id, ...data });
-                }
+            { dare_id: +id, token: String(token) },
+            {
+              onSuccess: (data) => {
+                setUserData({ type: 'dare', id: +id, ...data });
               }
-            )
+            }
+          )
           : setUserData({ type: 'dare', id: +id });
 
         if (dareList) {
@@ -1093,7 +1124,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
         <MapLibreGL.VectorSource
           id="nomadmania_series"
-          tileUrlTemplates={[MAP_HOST + '/tileserver/series/{z}/{x}/{y}.pbf']}
+          tileUrlTemplates={[VECTOR_MAP_HOST + '/tiles/series/{z}/{x}/{y}.pbf']}
           onPress={handleMarkerPress}
         >
           {seriesFilter.status !== 1 ? (
@@ -1103,9 +1134,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               sourceLayerID={series_layer['source-layer']}
               belowLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
               filter={seriesNotVisitedFilter as any}
+              minZoomLevel={series_layer.minzoom}
+              maxZoomLevel={series_layer.maxzoom}
               style={{
+                symbolSpacing: 1,
                 iconImage: ['get', 'series_id'],
                 iconSize: 0.18,
+                iconAllowOverlap: true,
+                iconIgnorePlacement: true,
                 visibility: 'visible',
                 iconColor: '#666',
                 iconOpacity: 1,
@@ -1125,9 +1161,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               sourceLayerID={series_visited['source-layer']}
               belowLayerID={Platform.OS === 'android' ? 'waterway-name' : undefined}
               filter={seriesVisitedFilter as any}
+              minZoomLevel={series_visited.minzoom}
+              maxZoomLevel={series_visited.maxzoom}
               style={{
+                symbolSpacing: 1,
                 iconImage: '{series_id}v',
                 iconSize: 0.18,
+                iconAllowOverlap: true,
+                iconIgnorePlacement: true,
                 visibility: 'visible',
                 iconColor: '#666',
                 iconOpacity: 1,