マップの路線別駅選択機能を実装

components/trainMenu.js

@@ -1,43 +1,40 @@
-import React, { useRef, useMemo } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import lineColorList from "../assets/originData/lineColorList";
+import { stationIDPair } from "../lib/getStationList2";
 export default function TrainMenu({ stationData, style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
   const { navigate } = useNavigation();
-  const stationPin = useMemo(
-    () =>
-      Object.keys(stationData).map((d, indexBase) =>
-        stationData[d].map((D, index) => {
-          if (!D.StationMap) return null;
-          const latlng = D.StationMap.replace(
-            "https://www.google.co.jp/maps/place/",
-            ""
-          ).split(",");
-          if (latlng.length == 0) return null;
-          return (
-            <Marker
-              key={index + indexBase}
-              coordinate={{
-                latitude: parseFloat(latlng[0]),
-                longitude: parseFloat(latlng[1]),
-              }}
-              onPress={() => {
-                webview.current?.injectJavaScript(
-                  `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
-                  setStrings();`
-                );
-                if (navigate) navigate("Apps");
-              }}
-            ></Marker>
-          );
-        })
-      ),
-    [stationData]
-  );
+  const [stationPin, setStationPin] = useState([]);
+  useEffect(() => {
+    const stationPinData = [];
+    Object.keys(stationData).map((d, indexBase) =>
+      stationData[d].map((D, index) => {
+        if (!D.StationMap) return null;
+        const latlng = D.StationMap.replace(
+          "https://www.google.co.jp/maps/place/",
+          ""
+        ).split(",");
+        if (latlng.length == 0) return null;
+        stationPinData.push({ D, d, latlng, indexBase: 0, index });
+      })
+    );
+    setStationPin(stationPinData);
+  }, [stationData]);
+  useEffect(() => {
+    mapRef.current.fitToCoordinates(
+      stationPin.map(({ latlng }) => ({
+        latitude: parseFloat(latlng[0]),
+        longitude: parseFloat(latlng[1]),
+      })),
+      { edgePadding: { top: 50, bottom: 50, left: 50, right: 50 } } // Add margin values here
+    );
+  }, [stationPin]);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
@@ -56,8 +53,50 @@ export default function TrainMenu({ stationData, style }) {
           longitudeDelta: 1.8,
         }}
       >
-        {stationPin}
+        {stationPin.map(({ D, d, latlng, indexBase, index }) => (
+          <MapPin
+            index={index}
+            indexBase={indexBase}
+            latlng={latlng}
+            D={D}
+            d={d}
+            navigate={navigate}
+            webview={webview}
+            key={index + indexBase}
+          />
+        ))}
       </MapView>
+      <View style={{ flexDirection: "row" }}>
+        {Object.keys(stationData).map((d) => (
+          <TouchableOpacity
+            style={{
+              flex: 1,
+              backgroundColor: lineColorList[stationIDPair[d]],
+              padding: 5,
+              margin: 2,
+              borderRadius: 5,
+              alignItems: "center",
+            }}
+            onPress={() => {
+              setStationPin(
+                stationData[d].map((D, index) => {
+                  if (!D.StationMap) return null;
+                  const latlng = D.StationMap.replace(
+                    "https://www.google.co.jp/maps/place/",
+                    ""
+                  ).split(",");
+                  if (latlng.length == 0) return null;
+                  return { D, d, latlng, indexBase: 0, index };
+                })
+              );
+            }}
+          >
+            <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+              {stationIDPair[d]}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
       {navigate && (
         <View style={{ flexDirection: "row" }}>
           <UsefulBox
@@ -137,3 +176,22 @@ const UsefulBox = (props) => {
     </TouchableOpacity>
   );
 };
+
+const MapPin = ({ index, indexBase, latlng, D, d, navigate, webview }) => {
+  return (
+    <Marker
+      key={index + indexBase}
+      coordinate={{
+        latitude: parseFloat(latlng[0]),
+        longitude: parseFloat(latlng[1]),
+      }}
+      onPress={() => {
+        webview.current?.injectJavaScript(
+          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+        setStrings();`
+        );
+        if (navigate) navigate("Apps");
+      }}
+    ></Marker>
+  );
+};

lib/getStationList2.js

@@ -1,4 +1,3 @@
-let status = undefined;
 import yosan from "../assets/originData/yosan";
 import uwajima from "../assets/originData/uwajima";
 import uwajima2 from "../assets/originData/uwajima2";
@@ -21,3 +20,15 @@ export const getStationList2 = async (props) => {
     seto,
   };
 };
+
+export const stationIDPair = {
+  yosan: "Y",
+  uwajima: "U",
+  uwajima2: "S",
+  dosan: "D",
+  dosan2: "K",
+  koutoku: "T",
+  tokushima: "B",
+  naruto: "N",
+  seto: "M",
+};