全駅地図表示に対応

components/TrainMenu/MapPin.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Marker } from "react-native-maps";
 import { useNavigation } from "@react-navigation/native";
+import { useStationList } from "@/stateBox/useStationList";
 type Props = {
   index: number;
   indexBase: number;
@@ -13,7 +14,8 @@ type Props = {
 
 export const MapPin: FC<Props> = (props) => {
   const { index, indexBase, latlng, D, d, navigate, webview } = props;
-  const {goBack} = useNavigation();
+  const { goBack } = useNavigation();
+  const { getInjectJavascriptAddress } = useStationList();
   return (
     <Marker
       key={index + indexBase}
@@ -22,10 +24,9 @@ export const MapPin: FC<Props> = (props) => {
         longitude: parseFloat(latlng[1]),
       }}
       onPress={() => {
-        webview.current?.injectJavaScript(
+        const address = getInjectJavascriptAddress(D.StationNumber);
-          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
+        if (!address) return;
-          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
+        webview.current?.injectJavaScript(address);
-        );
         if (navigate) goBack();
       }}
       image={require("../../assets/reccha-small.png")}

components/trainMenu.js

@@ -4,12 +4,13 @@ import MapView from "react-native-maps";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import lineColorList from "../assets/originData/lineColorList";
-import { lineListPair, stationIDPair } from "../lib/getStationList";
+import { lineList_LineWebID, lineListPair, stationIDPair } from "../lib/getStationList";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { MapPin } from "./TrainMenu/MapPin";
 import { UsefulBox } from "./TrainMenu/UsefulBox";
 import { MapsButton } from "./TrainMenu/MapsButton";
+import { useStationList } from "@/stateBox/useStationList";
 export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
@@ -20,22 +21,19 @@ export default function TrainMenu({ style }) {
     setSelectedLine,
     mapsStationData: stationData,
   } = useTrainMenu();
+  const { originalStationList } = useStationList();
   useEffect(() => {
     const stationPinData = [];
-    Object.keys(stationData).forEach((d, indexBase) => {
+    Object.keys(originalStationList).forEach((d, indexBase) => {
-      stationData[d].forEach((D, index) => {
+      originalStationList[d].forEach((D, index) => {
-        if (!D.StationMap) return null;
+        if (selectedLine && selectedLine != lineList_LineWebID[d]) return;
-        if (selectedLine && selectedLine != d) return;
+        const latlng = [D.lat,D.lng];
-        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, selectedLine]);
+  }, [originalStationList, selectedLine]);
   useLayoutEffect(() => {
     mapRef.current.fitToCoordinates(
       stationPin.map(({ latlng }) => ({

lib/getStationList.ts

@@ -178,6 +178,11 @@ export const getStationList = async () => {
       予讃線,
       stationList["日英対応表"]
     );
+    stationList["予讃線(松山-宇和島間)[U]"] = addStationPosition(
+      concatBetweenStations(stationList["予讃線(松山-宇和島間)[U]"]),
+      内子線,
+      stationList["日英対応表"]
+    );
     stationList["予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]"] =
       addStationPosition(
         concatBetweenStations(

stateBox/useStationList.tsx

@@ -104,7 +104,7 @@ export const StationListProvider: FC<Props> = ({ children }) => {
         });
       }
     });
-    return `MoveDisplayStation('${bootStationList[0].line}_${bootStationList[0].station.MyStation}_${bootStationList[0].station.Station_JP}')`;
+    return `MoveDisplayStation('${bootStationList[0].line}_${bootStationList[0].station.MyStation}_${bootStationList[0].station.Station_JP}');document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`;
   };
 
   return (