From f5e6a0d3e83ec5a7bd49d889ca6f789fa1263250 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 9 Aug 2025 14:03:46 +0000
Subject: [PATCH 1/2] Initial plan


From 83b9bdef45c8c7faa78977bcd3749dc940543ac9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 9 Aug 2025 14:15:21 +0000
Subject: [PATCH 2/2] Implement OpenStreetMap integration using UrlTile
 component

Co-authored-by: naoki-00-ito <117070296+naoki-00-ito@users.noreply.github.com>
---
 mobile-app/app/(tabs)/maps.native.tsx | 9 ++++++++-
 mobile-app/app/(tabs)/maps.tsx        | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/mobile-app/app/(tabs)/maps.native.tsx b/mobile-app/app/(tabs)/maps.native.tsx
index 895bf74..6dc232d 100644
--- a/mobile-app/app/(tabs)/maps.native.tsx
+++ b/mobile-app/app/(tabs)/maps.native.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, StyleSheet, Dimensions } from "react-native";
 // @ts-ignore - react-native-maps has TypeScript compatibility issues with strict mode
-import MapView, { Marker, Polyline } from "react-native-maps";
+import MapView, { UrlTile, Marker, Polyline } from "react-native-maps";
 
 // Sample coordinates for the route
 const tokyoTower = {
@@ -38,6 +38,13 @@ export default function MapsScreen() {
   return (
     <View style={styles.container}>
       <MapView style={styles.map} initialRegion={tokyoTower}>
+        {/* OpenStreetMap tile layer */}
+        <UrlTile
+          urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+          maximumZ={19}
+          minimumZ={1}
+        />
+
         {/* Markers for each location */}
         <Marker
           coordinate={tokyoTower}
diff --git a/mobile-app/app/(tabs)/maps.tsx b/mobile-app/app/(tabs)/maps.tsx
index fac3d07..2495d09 100644
--- a/mobile-app/app/(tabs)/maps.tsx
+++ b/mobile-app/app/(tabs)/maps.tsx
@@ -8,7 +8,8 @@ export default function MapsScreen() {
         Map functionality is available on mobile platforms.
       </Text>
       <Text style={styles.subtitle}>
-        This feature uses react-native-maps which requires iOS or Android.
+        This feature uses OpenStreetMap with react-native-maps which requires
+        iOS or Android.
       </Text>
       <Text style={styles.routeInfo}>
         Sample route: Tokyo Tower → Convenience Store 1 → Convenience Store 2 →