chore: further simplify examples

maplibre · Dec 1, 2024 · ece14e3 · ece14e3
1 parent fd686ec
commit ece14e3
Show file tree

Hide file tree

Showing 53 changed files with 425 additions and 548 deletions.
diff --git a/packages/examples/src/components/MapSafeAreaView.tsx b/packages/examples/src/components/MapSafeAreaView.tsx
@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { sheet } from "../styles/sheet";
+
+interface PageProps {
+  children: ReactNode;
+}
+
+export default function MapSafeAreaView({ children }: PageProps) {
+  return (
+    <SafeAreaView edges={["bottom"]} style={sheet.matchParent}>
+      {children}
+    </SafeAreaView>
+  );
+}
diff --git a/packages/examples/src/components/Page.tsx b/packages/examples/src/components/Page.tsx
diff --git a/...es/examples/src/components/TabBarPage.tsx → ...es/examples/src/components/TabBarView.tsx b/...es/examples/src/components/TabBarPage.tsx → ...es/examples/src/components/TabBarView.tsx
@@ -1,27 +1,27 @@
 import { type ReactNode, useState } from "react";
 
 import { ButtonGroup } from "./ButtonGroup";
-import Page from "./Page";
+import MapSafeAreaView from "./MapSafeAreaView";
 
-interface TabBarPageProps<DataT> {
+interface TabBarViewProps<DataT> {
   children: ReactNode;
   scrollable?: boolean;
   options: { label: string; data: DataT }[];
   onOptionPress: (index: number, data: DataT) => void;
   defaultValue?: number;
 }
 
-function TabBarPage<DataT>({
+function TabBarView<DataT>({
   children,
   scrollable = false,
   options,
   onOptionPress,
   defaultValue,
-}: TabBarPageProps<DataT>) {
+}: TabBarViewProps<DataT>) {
   const [value, setValue] = useState(defaultValue);
 
   return (
-    <Page safeAreaView>
+    <MapSafeAreaView>
       {children}
       <ButtonGroup
         value={value}
@@ -32,7 +32,7 @@ function TabBarPage<DataT>({
         }}
         scrollable={scrollable}
       />
-    </Page>
+    </MapSafeAreaView>
   );
 }
-export default TabBarPage;
+export default TabBarView;
diff --git a/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx b/packages/examples/src/examples/Animations/AnimateCircleAlongLine.tsx
@@ -3,7 +3,6 @@ import MapLibreGL, {
 } from "@maplibre/maplibre-react-native";
 import { useEffect, useState } from "react";
 
-import Page from "../../components/Page";
 import PulseCircleLayer from "../../components/PulseCircleLayer";
 import { sheet } from "../../styles/sheet";
 import RouteSimulator from "../../utils/RouteSimulator";
@@ -99,25 +98,23 @@ export default function AnimateCircleAlongLine() {
   };
 
   return (
-    <Page>
-      <MapLibreGL.MapView style={sheet.matchParent}>
-        <MapLibreGL.Camera
-          defaultSettings={{
-            bounds: {
-              ne: [-3.419709, 44.452929],
-              sw: [25.309539, 55.766941],
-            },
-          }}
-        />
-
-        <MapLibreGL.ShapeSource id="route-source" shape={ROUTE_FEATURE}>
-          <MapLibreGL.LineLayer id="route-line" style={layerStyles.route} />
-        </MapLibreGL.ShapeSource>
-
-        {currentPoint && <PulseCircleLayer shape={currentPoint} />}
-
-        {renderProgressLine()}
-      </MapLibreGL.MapView>
-    </Page>
+    <MapLibreGL.MapView style={sheet.matchParent}>
+      <MapLibreGL.Camera
+        defaultSettings={{
+          bounds: {
+            ne: [-3.419709, 44.452929],
+            sw: [25.309539, 55.766941],
+          },
+        }}
+      />
+
+      <MapLibreGL.ShapeSource id="route-source" shape={ROUTE_FEATURE}>
+        <MapLibreGL.LineLayer id="route-line" style={layerStyles.route} />
+      </MapLibreGL.ShapeSource>
+
+      {currentPoint && <PulseCircleLayer shape={currentPoint} />}
+
+      {renderProgressLine()}
+    </MapLibreGL.MapView>
   );
 }
diff --git a/packages/examples/src/examples/Animations/AnimatedLine.js b/packages/examples/src/examples/Animations/AnimatedLine.js
@@ -1,12 +1,11 @@
-import { Animated, MapView, Camera } from "@maplibre/maplibre-react-native";
+import { Animated, Camera, MapView } from "@maplibre/maplibre-react-native";
 import along from "@turf/along";
-import { point, lineString } from "@turf/helpers";
+import { lineString, point } from "@turf/helpers";
 import length from "@turf/length";
 import React from "react";
-import { Easing, Button } from "react-native";
+import { Button, Easing } from "react-native";
 
 import Bubble from "../../components/Bubble";
-import Page from "../../components/Page";
 import { sheet } from "../../styles/sheet";
 
 const blon = -73.99155;
@@ -202,7 +201,7 @@ class AnimatedLine extends React.Component {
 
   render() {
     return (
-      <Page>
+      <>
         <MapView
           ref={(c) => (this._map = c)}
           onPress={this.onPress}
@@ -269,7 +268,7 @@ class AnimatedLine extends React.Component {
             onPress={() => this.startAnimateRoute()}
           />
         </Bubble>
-      </Page>
+      </>
     );
   }
 }

diff --git a/packages/examples/src/examples/Annotations/CustomCallout.tsx b/packages/examples/src/examples/Annotations/CustomCallout.tsx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import { Text, View } from "react-native";
 
 import maplibreIcon from "../../assets/images/maplibre.png";
-import Page from "../../components/Page";
 import { FEATURE_COLLECTION } from "../../constants/GEOMETRIES";
 import { sheet } from "../../styles/sheet";
 
@@ -12,46 +11,44 @@ export default function CustomCallout() {
     useState<GeoJSON.Feature<GeoJSON.Point, { name: string }>>();
 
   return (
-    <Page>
-      <MapLibreGL.MapView style={sheet.matchParent}>
-        <MapLibreGL.ShapeSource
-          id="shape-source"
-          shape={FEATURE_COLLECTION}
-          onPress={(event) => {
-            const feature = event?.features[0] as
-              | GeoJSON.Feature<GeoJSON.Point, { name: string }>
-              | undefined;
+    <MapLibreGL.MapView style={sheet.matchParent}>
+      <MapLibreGL.ShapeSource
+        id="shape-source"
+        shape={FEATURE_COLLECTION}
+        onPress={(event) => {
+          const feature = event?.features[0] as
+            | GeoJSON.Feature<GeoJSON.Point, { name: string }>
+            | undefined;
 
-            setSelectedFeature(feature);
+          setSelectedFeature(feature);
+        }}
+      >
+        <MapLibreGL.SymbolLayer
+          id="symbol-layer"
+          style={{
+            iconAllowOverlap: true,
+            iconAnchor: "center",
+            iconImage: maplibreIcon,
+            iconSize: 1,
           }}
+        />
+      </MapLibreGL.ShapeSource>
+      {selectedFeature && (
+        <MapLibreGL.MarkerView
+          id="select-feature-marker"
+          coordinate={selectedFeature.geometry.coordinates}
+          anchor={{ x: 0.5, y: -1.1 }}
         >
-          <MapLibreGL.SymbolLayer
-            id="symbol-layer"
+          <View
             style={{
-              iconAllowOverlap: true,
-              iconAnchor: "center",
-              iconImage: maplibreIcon,
-              iconSize: 1,
+              backgroundColor: "white",
+              padding: 8,
             }}
-          />
-        </MapLibreGL.ShapeSource>
-        {selectedFeature && (
-          <MapLibreGL.MarkerView
-            id="select-feature-marker"
-            coordinate={selectedFeature.geometry.coordinates}
-            anchor={{ x: 0.5, y: -1.1 }}
           >
-            <View
-              style={{
-                backgroundColor: "white",
-                padding: 8,
-              }}
-            >
-              <Text>{selectedFeature?.properties?.name}</Text>
-            </View>
-          </MapLibreGL.MarkerView>
-        )}
-      </MapLibreGL.MapView>
-    </Page>
+            <Text>{selectedFeature?.properties?.name}</Text>
+          </View>
+        </MapLibreGL.MarkerView>
+      )}
+    </MapLibreGL.MapView>
   );
 }
diff --git a/packages/examples/src/examples/Annotations/Heatmap.tsx b/packages/examples/src/examples/Annotations/Heatmap.tsx
@@ -1,41 +1,38 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
 
-import Page from "../../components/Page";
 import { sheet } from "../../styles/sheet";
 
 export default function Heatmap() {
   return (
-    <Page>
-      <MapLibreGL.MapView style={sheet.matchParent}>
-        <MapLibreGL.ShapeSource
+    <MapLibreGL.MapView style={sheet.matchParent}>
+      <MapLibreGL.ShapeSource
+        id="earthquakes"
+        url="https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
+      >
+        <MapLibreGL.HeatmapLayer
           id="earthquakes"
-          url="https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
-        >
-          <MapLibreGL.HeatmapLayer
-            id="earthquakes"
-            sourceID="earthquakes"
-            style={{
-              heatmapColor: [
-                "interpolate",
-                ["linear"],
-                ["heatmap-density"],
-                0,
-                "rgba(33,102,172,0)",
-                0.2,
-                "rgb(103,169,207)",
-                0.4,
-                "rgb(209,229,240)",
-                0.6,
-                "rgb(253,219,199)",
-                0.8,
-                "rgb(239,138,98)",
-                1,
-                "rgb(178,24,43)",
-              ],
-            }}
-          />
-        </MapLibreGL.ShapeSource>
-      </MapLibreGL.MapView>
-    </Page>
+          sourceID="earthquakes"
+          style={{
+            heatmapColor: [
+              "interpolate",
+              ["linear"],
+              ["heatmap-density"],
+              0,
+              "rgba(33,102,172,0)",
+              0.2,
+              "rgb(103,169,207)",
+              0.4,
+              "rgb(209,229,240)",
+              0.6,
+              "rgb(253,219,199)",
+              0.8,
+              "rgb(239,138,98)",
+              1,
+              "rgb(178,24,43)",
+            ],
+          }}
+        />
+      </MapLibreGL.ShapeSource>
+    </MapLibreGL.MapView>
   );
 }
diff --git a/packages/examples/src/examples/Annotations/MarkerView.tsx b/packages/examples/src/examples/Annotations/MarkerView.tsx
@@ -1,7 +1,6 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 
-import Page from "../../components/Page";
 import { sheet } from "../../styles/sheet";
 
 const styles = StyleSheet.create({
@@ -46,18 +45,16 @@ const COORDINATES = [
 
 export default function MarkerView() {
   return (
-    <Page>
-      <MapLibreGL.MapView style={sheet.matchParent}>
-        <MapLibreGL.Camera zoomLevel={16} centerCoordinate={COORDINATES[0]} />
-
-        <MapLibreGL.PointAnnotation coordinate={COORDINATES[1]} id="pt-ann">
-          <AnnotationContent title="this is a point annotation" />
-        </MapLibreGL.PointAnnotation>
-
-        <MapLibreGL.MarkerView coordinate={COORDINATES[0]}>
-          <AnnotationContent title="this is a marker view" />
-        </MapLibreGL.MarkerView>
-      </MapLibreGL.MapView>
-    </Page>
+    <MapLibreGL.MapView style={sheet.matchParent}>
+      <MapLibreGL.Camera zoomLevel={16} centerCoordinate={COORDINATES[0]} />
+
+      <MapLibreGL.PointAnnotation coordinate={COORDINATES[1]} id="pt-ann">
+        <AnnotationContent title="this is a point annotation" />
+      </MapLibreGL.PointAnnotation>
+
+      <MapLibreGL.MarkerView coordinate={COORDINATES[0]}>
+        <AnnotationContent title="this is a marker view" />
+      </MapLibreGL.MarkerView>
+    </MapLibreGL.MapView>
   );
 }