|
|
@@ -242,7 +242,7 @@ let series_layer = {
|
|
|
type: 'symbol',
|
|
|
source: 'nomadmania_series',
|
|
|
'source-layer': 'series',
|
|
|
- minzoom: 6,
|
|
|
+ minzoom: 5,
|
|
|
maxzoom: 60,
|
|
|
layout: {
|
|
|
'symbol-spacing': 1,
|
|
|
@@ -276,7 +276,7 @@ let series_visited = {
|
|
|
type: 'symbol',
|
|
|
source: 'nomadmania_series',
|
|
|
'source-layer': 'series',
|
|
|
- minzoom: 6,
|
|
|
+ minzoom: 5,
|
|
|
maxzoom: 60,
|
|
|
layout: {
|
|
|
'symbol-spacing': 1,
|
|
|
@@ -314,6 +314,92 @@ const INITIAL_REGION = {
|
|
|
|
|
|
const ICONS_DIR = FileSystem.documentDirectory + 'series_icons/';
|
|
|
|
|
|
+const SERIES_ICON_SIZE = [
|
|
|
+ 'interpolate',
|
|
|
+ ['linear'],
|
|
|
+ ['zoom'],
|
|
|
+ 3,
|
|
|
+ 0.3,
|
|
|
+ 4,
|
|
|
+ 0.36,
|
|
|
+ 5,
|
|
|
+ 0.43,
|
|
|
+ 6,
|
|
|
+ 0.5,
|
|
|
+ 7,
|
|
|
+ 0.57,
|
|
|
+ 8,
|
|
|
+ 0.63,
|
|
|
+ 9,
|
|
|
+ 0.7,
|
|
|
+ 10,
|
|
|
+ 0.77,
|
|
|
+ 11,
|
|
|
+ 0.84,
|
|
|
+ 12,
|
|
|
+ 0.91,
|
|
|
+ 13,
|
|
|
+ 0.98,
|
|
|
+ 14,
|
|
|
+ 1.05,
|
|
|
+ 15,
|
|
|
+ 1.12,
|
|
|
+ 16,
|
|
|
+ 1.18,
|
|
|
+ 17,
|
|
|
+ 1.25
|
|
|
+] as unknown as number;
|
|
|
+
|
|
|
+const SERIES_CIRCLE_RADIUS = [
|
|
|
+ 'interpolate',
|
|
|
+ ['linear'],
|
|
|
+ ['zoom'],
|
|
|
+ 3,
|
|
|
+ 5,
|
|
|
+ 4,
|
|
|
+ 6,
|
|
|
+ 5,
|
|
|
+ 7,
|
|
|
+ 6,
|
|
|
+ 8,
|
|
|
+ 7,
|
|
|
+ 9,
|
|
|
+ 8,
|
|
|
+ 10,
|
|
|
+ 9,
|
|
|
+ 11,
|
|
|
+ 10,
|
|
|
+ 12,
|
|
|
+ 11,
|
|
|
+ 13,
|
|
|
+ 12,
|
|
|
+ 14,
|
|
|
+ 13,
|
|
|
+ 16,
|
|
|
+ 14,
|
|
|
+ 17,
|
|
|
+ 15,
|
|
|
+ 18,
|
|
|
+ 16,
|
|
|
+ 19,
|
|
|
+ 17,
|
|
|
+ 20
|
|
|
+] as unknown as number;
|
|
|
+
|
|
|
+const SERIES_CIRCLE_STROKE = [
|
|
|
+ 'interpolate',
|
|
|
+ ['linear'],
|
|
|
+ ['zoom'],
|
|
|
+ 3,
|
|
|
+ 1,
|
|
|
+ 7,
|
|
|
+ 1.5,
|
|
|
+ 13,
|
|
|
+ 2,
|
|
|
+ 17,
|
|
|
+ 2.5
|
|
|
+] as unknown as number;
|
|
|
+
|
|
|
const MapScreen: any = ({ navigation, route }: { navigation: any; route: any }) => {
|
|
|
const tabBarHeight = useBottomTabBarHeight();
|
|
|
const userId = storage.get('uid', StoreType.STRING) as string;
|
|
|
@@ -1783,8 +1869,8 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
<MapLibreRN.MapView
|
|
|
ref={mapRef}
|
|
|
style={styles.map}
|
|
|
- // mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2025.json'}
|
|
|
- mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2026.json'}
|
|
|
+ mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2025.json'}
|
|
|
+ // mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps2026.json'}
|
|
|
rotateEnabled={false}
|
|
|
attributionEnabled={false}
|
|
|
onPress={onMapPress}
|
|
|
@@ -1964,7 +2050,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
</>
|
|
|
)}
|
|
|
|
|
|
- {didFinishLoadingStyle &&
|
|
|
+ {/* {didFinishLoadingStyle &&
|
|
|
seriesGroups?.length > 0 &&
|
|
|
seriesGroups.map((group) => {
|
|
|
const visible = isGroupEnabled(group.id);
|
|
|
@@ -1980,7 +2066,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`symbol_unvisited_normal_${group.id}`}
|
|
|
id={`series-${group.id}-unvisited`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_layer['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={'waterway-name'}
|
|
|
filter={['all', seriesNotVisitedFilter, ['!=', 'must', 1]] as any}
|
|
|
style={{
|
|
|
@@ -1988,6 +2074,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: visible ? 'visible' : 'none',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2014,14 +2101,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`circle_unvisited_must_${group.id}`}
|
|
|
id={`series-${group.id}-must-wrapper`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_layer['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={`series-${group.id}-unvisited`}
|
|
|
filter={['all', seriesNotVisitedFilter, ['==', 'must', 1]] as any}
|
|
|
style={{
|
|
|
- circleRadius: 16,
|
|
|
+ circleRadius: SERIES_CIRCLE_RADIUS,
|
|
|
circleColor: Colors.ORANGE,
|
|
|
circleOpacity: 1,
|
|
|
- circleStrokeWidth: 2.5,
|
|
|
+ circleStrokeWidth: SERIES_CIRCLE_STROKE,
|
|
|
circleStrokeColor: Colors.ORANGE,
|
|
|
visibility: mustVisible ? 'visible' : 'none'
|
|
|
}}
|
|
|
@@ -2030,7 +2117,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`symbol_unvisited_must_${group.id}`}
|
|
|
id={`series-${group.id}-must-icon`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_layer['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={`series-${group.id}-must-wrapper`}
|
|
|
filter={['all', seriesNotVisitedFilter, ['==', 'must', 1]] as any}
|
|
|
style={{
|
|
|
@@ -2038,6 +2125,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: mustVisible ? 'visible' : 'none',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2076,7 +2164,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`symbol_visited_normal_${group.id}`}
|
|
|
id={`series-${group.id}-visited-normal`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_visited['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={'waterway-name'}
|
|
|
filter={['all', seriesVisitedFilter, ['!=', 'must', 1]] as any}
|
|
|
style={{
|
|
|
@@ -2084,6 +2172,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}v',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: visible ? 'visible' : 'none',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2110,14 +2199,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`circle_visited_must_${group.id}`}
|
|
|
id={`series-${group.id}-visited-must-wrapper`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_visited['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={`series-${group.id}-visited-normal`}
|
|
|
filter={['all', seriesVisitedFilter, ['==', 'must', 1]] as any}
|
|
|
style={{
|
|
|
- circleRadius: 16,
|
|
|
+ circleRadius: SERIES_CIRCLE_RADIUS,
|
|
|
circleColor: Colors.ORANGE,
|
|
|
circleOpacity: 1,
|
|
|
- circleStrokeWidth: 2.5,
|
|
|
+ circleStrokeWidth: SERIES_CIRCLE_STROKE,
|
|
|
circleStrokeColor: Colors.ORANGE,
|
|
|
visibility: mustVisible ? 'visible' : 'none'
|
|
|
}}
|
|
|
@@ -2126,7 +2215,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
key={`symbol_visited_must_${group.id}`}
|
|
|
id={`series-${group.id}-visited-must`}
|
|
|
sourceID={`series-${group.id}`}
|
|
|
- sourceLayerID={series_visited['source-layer']}
|
|
|
+ sourceLayerID={`series-${group.id}`}
|
|
|
aboveLayerID={`series-${group.id}-visited-must-wrapper`}
|
|
|
filter={['all', seriesVisitedFilter, ['==', 'must', 1]] as any}
|
|
|
style={{
|
|
|
@@ -2134,6 +2223,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}v',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: mustVisible ? 'visible' : 'none',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2165,8 +2255,8 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
: null}
|
|
|
</React.Fragment>
|
|
|
);
|
|
|
- })}
|
|
|
- {/* <MapLibreRN.VectorSource
|
|
|
+ })} */}
|
|
|
+ <MapLibreRN.VectorSource
|
|
|
id="nomadmania_series"
|
|
|
tileUrlTemplates={[VECTOR_MAP_HOST + '/tiles/series/{z}/{x}/{y}.pbf']}
|
|
|
onPress={handleMarkerPress}
|
|
|
@@ -2189,6 +2279,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: 'visible',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2221,10 +2312,10 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
minZoomLevel={series_layer.minzoom}
|
|
|
maxZoomLevel={series_layer.maxzoom}
|
|
|
style={{
|
|
|
- circleRadius: 16,
|
|
|
+ circleRadius: SERIES_CIRCLE_RADIUS,
|
|
|
circleColor: Colors.ORANGE,
|
|
|
circleOpacity: 1,
|
|
|
- circleStrokeWidth: 2.5,
|
|
|
+ circleStrokeWidth: SERIES_CIRCLE_STROKE,
|
|
|
circleStrokeColor: Colors.ORANGE,
|
|
|
visibility: 'visible'
|
|
|
}}
|
|
|
@@ -2243,6 +2334,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: 'visible',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2291,6 +2383,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}v',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: 'visible',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2323,10 +2416,10 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
minZoomLevel={series_visited.minzoom}
|
|
|
maxZoomLevel={series_visited.maxzoom}
|
|
|
style={{
|
|
|
- circleRadius: 16,
|
|
|
+ circleRadius: SERIES_CIRCLE_RADIUS,
|
|
|
circleColor: Colors.ORANGE,
|
|
|
circleOpacity: 1,
|
|
|
- circleStrokeWidth: 2.5,
|
|
|
+ circleStrokeWidth: SERIES_CIRCLE_STROKE,
|
|
|
circleStrokeColor: Colors.ORANGE,
|
|
|
visibility: 'visible'
|
|
|
}}
|
|
|
@@ -2345,6 +2438,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
iconImage: '{series_id}v',
|
|
|
iconAllowOverlap: true,
|
|
|
iconIgnorePlacement: true,
|
|
|
+ iconSize: SERIES_ICON_SIZE,
|
|
|
visibility: 'visible',
|
|
|
iconColor: '#666',
|
|
|
iconOpacity: 1,
|
|
|
@@ -2374,7 +2468,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
|
|
|
}
|
|
|
})()
|
|
|
: null}
|
|
|
- </MapLibreRN.VectorSource> */}
|
|
|
+ </MapLibreRN.VectorSource>
|
|
|
|
|
|
<MapLibreRN.ShapeSource
|
|
|
ref={shapeSourceRef}
|
