TOT series icon

src/screens/InAppScreens/MapScreen/index.tsx

@@ -1930,13 +1930,68 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           {seriesFilter.status !== 1
             ? (() => {
                 try {
-                  return (
+                  return [
                     <MapLibreRN.SymbolLayer
-                      id={series_layer.id}
+                      key="symbol_unvisited_normal"
+                      id={`${series_layer.id}_normal`}
                       sourceID={series_layer.source}
                       sourceLayerID={series_layer['source-layer']}
                       aboveLayerID={'waterway-name'}
-                      filter={seriesNotVisitedFilter as any}
+                      filter={['all', seriesNotVisitedFilter, ['!=', 'must', 1]] as any}
+                      minZoomLevel={series_layer.minzoom}
+                      maxZoomLevel={series_layer.maxzoom}
+                      style={{
+                        symbolSpacing: 1,
+                        iconImage: '{series_id}',
+                        iconAllowOverlap: true,
+                        iconIgnorePlacement: true,
+                        visibility: 'visible',
+                        iconColor: '#666',
+                        iconOpacity: 1,
+                        iconHaloColor: '#ffffff',
+                        iconHaloWidth: 1,
+                        iconHaloBlur: 0.5,
+                        textAnchor: 'top',
+                        textField: '{name}',
+                        textFont: ['Noto Sans Regular'],
+                        textMaxWidth: 9,
+                        textOffset: [0, 1.3],
+                        textPadding: 2,
+                        textSize: 12,
+                        textOptional: true,
+                        textIgnorePlacement: false,
+                        textAllowOverlap: false,
+                        textColor: '#666',
+                        textHaloColor: '#ffffff',
+                        textHaloWidth: 1,
+                        textHaloBlur: 0.5
+                      }}
+                    />,
+                    <MapLibreRN.CircleLayer
+                      key="circle_unvisited_must"
+                      id={`${series_layer.id}_must_wrapper`}
+                      sourceID={series_layer.source}
+                      sourceLayerID={series_layer['source-layer']}
+                      aboveLayerID={`${series_layer.id}_normal`}
+                      filter={['all', seriesNotVisitedFilter, ['==', 'must', 1]] as any}
+                      minZoomLevel={series_layer.minzoom}
+                      maxZoomLevel={series_layer.maxzoom}
+                      style={{
+                        circleRadius: 16,
+                        circleColor: Colors.ORANGE,
+                        circleOpacity: 1,
+                        circleStrokeWidth: 2.5,
+                        circleStrokeColor: Colors.ORANGE,
+                        visibility: 'visible'
+                      }}
+                    />,
+                    <MapLibreRN.SymbolLayer
+                      key="symbol_unvisited_must"
+                      id={series_layer.id}
+                      sourceID={series_layer.source}
+                      sourceLayerID={series_layer['source-layer']}
+                      aboveLayerID={`${series_layer.id}_must_wrapper`}
+                      filter={['all', seriesNotVisitedFilter, ['==', 'must', 1]] as any}
                       minZoomLevel={series_layer.minzoom}
                       maxZoomLevel={series_layer.maxzoom}
                       style={{
@@ -1966,7 +2021,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         textHaloBlur: 0.5
                       }}
                     />
-                  );
+                  ];
                 } catch (error) {
                   console.warn('SymbolLayer render error:', error);
                   return null;
@@ -1977,13 +2032,68 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           {seriesFilter.status !== 0
             ? (() => {
                 try {
-                  return (
+                  return [
                     <MapLibreRN.SymbolLayer
-                      id={series_visited.id}
+                      key="symbol_visited_normal"
+                      id={`${series_visited.id}_normal`}
                       sourceID={series_visited.source}
                       sourceLayerID={series_visited['source-layer']}
                       aboveLayerID={'waterway-name'}
-                      filter={seriesVisitedFilter as any}
+                      filter={['all', seriesVisitedFilter, ['!=', 'must', 1]] as any}
+                      minZoomLevel={series_visited.minzoom}
+                      maxZoomLevel={series_visited.maxzoom}
+                      style={{
+                        symbolSpacing: 1,
+                        iconImage: '{series_id}v',
+                        iconAllowOverlap: true,
+                        iconIgnorePlacement: true,
+                        visibility: 'visible',
+                        iconColor: '#666',
+                        iconOpacity: 1,
+                        iconHaloColor: '#ffffff',
+                        iconHaloWidth: 1,
+                        iconHaloBlur: 0.5,
+                        textAnchor: 'top',
+                        textField: '{name}',
+                        textFont: ['Noto Sans Regular'],
+                        textMaxWidth: 9,
+                        textOffset: [0, 1.3],
+                        textPadding: 2,
+                        textSize: 12,
+                        textOptional: true,
+                        textIgnorePlacement: false,
+                        textAllowOverlap: false,
+                        textColor: '#666',
+                        textHaloColor: '#ffffff',
+                        textHaloWidth: 1,
+                        textHaloBlur: 0.5
+                      }}
+                    />,
+                    <MapLibreRN.CircleLayer
+                      key="circle_visited_must"
+                      id={`${series_visited.id}_must_wrapper`}
+                      sourceID={series_visited.source}
+                      sourceLayerID={series_visited['source-layer']}
+                      aboveLayerID={`${series_visited.id}_normal`}
+                      filter={['all', seriesVisitedFilter, ['==', 'must', 1]] as any}
+                      minZoomLevel={series_visited.minzoom}
+                      maxZoomLevel={series_visited.maxzoom}
+                      style={{
+                        circleRadius: 16,
+                        circleColor: Colors.ORANGE,
+                        circleOpacity: 1,
+                        circleStrokeWidth: 2.5,
+                        circleStrokeColor: Colors.ORANGE,
+                        visibility: 'visible'
+                      }}
+                    />,
+                    <MapLibreRN.SymbolLayer
+                      key="symbol_visited_must"
+                      id={series_visited.id}
+                      sourceID={series_visited.source}
+                      sourceLayerID={series_visited['source-layer']}
+                      aboveLayerID={`${series_visited.id}_must_wrapper`}
+                      filter={['all', seriesVisitedFilter, ['==', 'must', 1]] as any}
                       minZoomLevel={series_visited.minzoom}
                       maxZoomLevel={series_visited.maxzoom}
                       style={{
@@ -2013,7 +2123,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                         textHaloBlur: 0.5
                       }}
                     />
-                  );
+                  ];
                 } catch (error) {
                   console.warn('SymbolLayer render error:', error);
                   return null;