chore: cleanup example assets (#524)

* chore: migrate BugReport example * refactor: align GeoJSON imports * chore: migrate RestrictMapBounds example * chore: migrate GetZoom example * fix: expo android status bar color * chore: simplify ShowMap example * chore: cleanup more examples * style: fix linting * fix: allow MapView and Images to have no children * docs: update changelog * chore: rename earthquakesData * chore: update earthquakes * chore: cleanup more assets * chore: cleanup styles * chore: use blue as expo splash backgroundColor * docs: new screenshots * docs: resize screenshots * chore: remove duplicate example * chore: align example headings * fix: use cover for splash * fix: bug report heading * fix: keep plugin without build * chore: further simplify examples * chore: cleanup more examples * refactor: use sheet instead of styles * docs: improve screenshot sizing
maplibre · Dec 8, 2024 · 43b331d · 43b331d
1 parent 227e397
commit 43b331d
Show file tree

Hide file tree

Showing 108 changed files with 83,864 additions and 5,807 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -15,7 +15,7 @@ Hello! Thanks for contributing.  For the fastest response and resolution, please
 
  - For build issues: Can you reproduce it on a clean install of the example app? Please include full steps to reproduce from `react-native init`
 
- - Include a link to a minimal demonstration of the bug, ideally a single component with one MapView. Use an example like [PointInMapView](/packages/examples/src/BugReportPage.js) as a starting point.
+ - Include a link to a minimal demonstration of the bug, ideally a single component with one MapView. Use an example like [PointInMapView](/packages/examples/src/BugReport.tsx) as a starting point.
 
  - Ensure you can reproduce the bug using the latest release.
 
@@ -48,5 +48,6 @@ Hello! Thanks for contributing.  For the fastest response and resolution, please
 - MapLibre Native Version: [e.g. 6.7.0]
 - `react-native` Version: [e.g. 0.75.0]
 - `expo` Version: [e.g. 51.0.0]
+- Architecture: [new/old]
 
 ### Additional context
diff --git a/README.md b/README.md
@@ -17,11 +17,11 @@ diverged, it has become necessary to separate the projects into specific wrapper
 <p align="center">
     <img src="/docs/assets/device-android.png"
          alt="Indoor Building Map Android"
-         height="480"
+         height="320"
           />
     <img src="/docs/assets/device-ios.png"
          alt="Indoor Building Map iOS"
-         height="480"
+         height="320"
           />
 </p>
 

diff --git a/packages/examples/src/App.tsx b/packages/examples/src/App.tsx
@@ -1,13 +1,11 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
 import { useEffect, useState } from "react";
-import { StyleSheet, Text, View, LogBox } from "react-native";
-import { SafeAreaView, SafeAreaProvider } from "react-native-safe-area-context";
+import { LogBox, Platform, StyleSheet, Text, View } from "react-native";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import "react-native-gesture-handler";
 
-import { default as Home } from "./scenes/Examples";
-import colors from "./styles/colors";
-import sheet from "./styles/sheet";
-import { IS_ANDROID } from "./utils";
+import { default as Home } from "./Examples";
+import { sheet } from "./styles/sheet";
 
 LogBox.ignoreLogs([
   "Warning: isMounted(...) is deprecated",
@@ -21,6 +19,8 @@ const styles = StyleSheet.create({
   },
 });
 
+const IS_ANDROID = Platform.OS === "android";
+
 MapLibreGL.setAccessToken(null);
 
 export function App() {
@@ -47,9 +47,7 @@ export function App() {
 
     return (
       <SafeAreaProvider>
-        <SafeAreaView
-          style={[sheet.matchParent, { backgroundColor: colors.primary.blue }]}
-        >
+        <SafeAreaView style={sheet.matchParent}>
           <View style={sheet.matchParent}>
             <Text style={styles.noPermissionsText}>
               You need to accept location permissions in order to use this

diff --git a/packages/examples/src/scenes/Examples.tsx → packages/examples/src/Examples.tsx b/packages/examples/src/scenes/Examples.tsx → packages/examples/src/Examples.tsx
@@ -8,13 +8,10 @@ import {
   View,
 } from "react-native";
 
-import * as MapLibreExamples from "../examples";
-import { default as sheet } from "../styles/sheet";
+import * as MapLibreExamples from "./examples/index";
+import { sheet } from "./styles/sheet";
 
 const styles = StyleSheet.create({
-  exampleList: {
-    flex: 1,
-  },
   exampleListItem: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -59,19 +56,19 @@ class ExampleGroup {
 const Examples = new ExampleGroup(
   "MapLibre React Native",
   [
-    new ExampleItem("Bug Report Template", MapLibreExamples.BugReportPage),
+    new ExampleItem("Bug Report", MapLibreExamples.BugReport),
     new ExampleGroup("Map", [
       new ExampleItem("Show Map", MapLibreExamples.ShowMap),
       new ExampleItem(
-        "Show Map With Local Style.JSON",
+        "Show Map with Local Style.JSON",
         MapLibreExamples.ShowMapLocalStyle,
       ),
       new ExampleItem("Show Click", MapLibreExamples.ShowClick),
       new ExampleItem(
-        "Show Region Did Change",
+        "Show Region did Change",
         MapLibreExamples.ShowRegionDidChange,
       ),
-      new ExampleItem("Two Map Views", MapLibreExamples.TwoByTwo),
+      new ExampleItem("Two Map Views", MapLibreExamples.TwoMapViews),
       new ExampleItem(
         "Create Offline Region",
         MapLibreExamples.CreateOfflineRegion,
@@ -101,11 +98,7 @@ const Examples = new ExampleGroup(
       new ExampleItem("Set Heading", MapLibreExamples.SetHeading),
       new ExampleItem("Fly To", MapLibreExamples.FlyTo),
       new ExampleItem("Restrict Bounds", MapLibreExamples.RestrictMapBounds),
-      new ExampleItem(
-        "Set User Tracking Modes",
-        MapLibreExamples.SetUserTrackingModes,
-      ),
-      new ExampleItem("Yo Yo Camera", MapLibreExamples.YoYo),
+      new ExampleItem("Yo-yo Camera", MapLibreExamples.YoYo),
       new ExampleItem(
         "Take Snapshot Without Map",
         MapLibreExamples.TakeSnapshot,
@@ -114,7 +107,7 @@ const Examples = new ExampleGroup(
         "Take Snapshot With Map",
         MapLibreExamples.TakeSnapshotWithMap,
       ),
-      new ExampleItem("Get Current Zoom", MapLibreExamples.GetZoom),
+      new ExampleItem("Get current Zoom", MapLibreExamples.GetZoom),
       new ExampleItem("Get Center", MapLibreExamples.GetCenter),
       new ExampleItem("Compass View", MapLibreExamples.CompassView),
     ]),
@@ -138,28 +131,28 @@ const Examples = new ExampleGroup(
       ),
 
       new ExampleItem(
-        "Set Preferred Frames Per Second\n(Android only)",
+        "Set preferred Frames per Second\n(Android only)",
         MapLibreExamples.SetAndroidPreferredFramesPerSecond,
       ),
     ]),
 
     new ExampleGroup("Symbol/CircleLayer", [
       new ExampleItem("Custom Icon", MapLibreExamples.CustomIcon),
-      new ExampleItem("Clustering EarthQuakes", MapLibreExamples.EarthQuakes),
+      new ExampleItem("Clustering Earthquakes", MapLibreExamples.Earthquakes),
       new ExampleItem(
-        "Shape Source From Icon",
+        "Icon from Shape Source",
         MapLibreExamples.ShapeSourceIcon,
       ),
       new ExampleItem(
-        "Data Driven Circle Colors",
+        "Data-driven Circle Colors",
         MapLibreExamples.DataDrivenCircleColors,
       ),
     ]),
     new ExampleGroup("Fill/RasterLayer", [
       new ExampleItem("GeoJSON Source", MapLibreExamples.GeoJSONSource),
       new ExampleItem(
-        "Watercolor Raster Tiles",
-        MapLibreExamples.WatercolorRasterTiles,
+        "OpenStreetMap Raster Tiles",
+        MapLibreExamples.OpenStreetMapRasterTiles,
       ),
       new ExampleItem("Indoor Building Map", MapLibreExamples.IndoorBuilding),
       new ExampleItem("Query Feature Point", MapLibreExamples.QueryAtPoint),
@@ -172,13 +165,9 @@ const Examples = new ExampleGroup(
         MapLibreExamples.CustomVectorSource,
       ),
       new ExampleItem("Image Overlay", MapLibreExamples.ImageOverlay),
-      new ExampleItem(
-        "Choropleth Layer By Zoom Level",
-        MapLibreExamples.ChoroplethLayerByZoomLevel,
-      ),
     ]),
     new ExampleGroup("LineLayer", [
-      new ExampleItem("GradientLine", MapLibreExamples.GradientLine),
+      new ExampleItem("Gradient Line", MapLibreExamples.GradientLine),
     ]),
     new ExampleGroup("Annotations", [
       new ExampleItem(
@@ -200,7 +189,7 @@ const Examples = new ExampleGroup(
         MapLibreExamples.AnimateCircleAlongLine,
       ),
     ]),
-    new ExampleItem("Cache management", MapLibreExamples.CacheManagement),
+    new ExampleItem("Cache Management", MapLibreExamples.CacheManagement),
   ],
   true,
 );
@@ -251,9 +240,9 @@ function ExampleList({ route, navigation }: ExampleListProps) {
 
   return (
     <View style={sheet.matchParent}>
-      <View style={[sheet.matchParent, {}]}>
+      <View style={sheet.matchParent}>
         <FlatList
-          style={styles.exampleList}
+          style={sheet.matchParent}
           data={example instanceof ExampleGroup ? example.items : []}
           keyExtractor={(item) => item.label}
           renderItem={renderItem}