refactor(places): switch to in-house font asset loading (#468)

Co-authored-by: Cristina Ferrian <[email protected]>
polito · Apr 15, 2024 · 88b70ba · 88b70ba
1 parent af99da8
commit 88b70ba
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/features/places/components/MarkersLayer.tsx b/src/features/places/components/MarkersLayer.tsx
@@ -167,7 +167,7 @@ export const MarkersLayer = ({
             symbolSortKey: ['get', 'priority'],
             textField: ['get', 'name'],
             textSize: fontSizes['2xs'],
-            textFont: ['Open Sans Semibold', 'Arial Unicode MS Regular'],
+            textFont: ['Open Sans Semibold'],
             textColor: ['get', 'color'],
             textOffset: [0, 1.2],
             textAnchor: 'top',

diff --git a/src/features/places/components/PlacesNavigator.tsx b/src/features/places/components/PlacesNavigator.tsx
@@ -95,8 +95,13 @@ export const PlacesNavigator = () => {
           attributionEnabled: false,
           compassEnabled: true,
           compassFadeWhenNorth: true,
-          styleJSON:
-            '{"version":8,"sources":{},"layers":[],"glyphs":"mapbox://fonts/mapbox/{fontstack}/{range}.pbf"}',
+          styleJSON: JSON.stringify({
+            version: 8,
+            glyphs:
+              'https://app.didattica.polito.it/maps_fonts/{fontstack}/{range}.pbf',
+            sources: {},
+            layers: [],
+          }),
         },
         mapDefaultContent: (
           <>

diff --git a/src/features/places/screens/PlacesScreen.tsx b/src/features/places/screens/PlacesScreen.tsx
@@ -397,7 +397,7 @@ export const PlacesScreen = ({ navigation, route }: Props) => {
       )}
 
       <Animated.View style={[styles.controls, controlsAnimatedStyle]}>
-        <Row gap={3} align="center" justify="space-between">
+        <Row gap={3} align="stretch" justify="space-between">
           <TranslucentCard>
             <IconButton
               icon={faCrosshairs}
@@ -527,7 +527,7 @@ const createStyles = ({ spacing }: Theme) =>
       marginBottom: spacing[2],
     },
     icon: {
+      alignItems: 'center',
       paddingHorizontal: spacing[3],
-      paddingVertical: spacing[2.5],
     },
   });