@daoyi/coordinates-editor-modal

A React modal component for editing coordinates (latitude & longitude) easily, with integrated map and table interface.

🗺️ 經緯度編輯元件，整合地圖與表格輸入，支援自訂樣式、外部查詢、自動同步。

📦 Installation

npm install @daoyi/coordinates-editor-modal

此元件依賴以下套件，請一併安裝（若尚未安裝）：

npm install react react-dom @mui/material @mui/icons-material react-leaflet leaflet axios uuid

🚀 Usage

import React, { useState } from "react";
import { CoordinatesModal } from "@daoyi/coordinates-editor-modal";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <CoordinatesModal
      open={open}
      setOpen={setOpen}
      title="測試地區"
      coordinateOptions={[
        { label: "地點 A", longitude: "121.5", latitude: "25.0" },
        { label: "地點 B", longitude: "121.6", latitude: "25.1" }
      ]}
      onClick={(coords) => console.log("儲存結果", coords)}
    />
  );
}

⚙️ Props 說明

| Prop | Type | Description | |------|------|-------------| | open | boolean | 控制 modal 是否開啟 | | setOpen | (val: boolean) => void | 切換開關狀態 | | readOnly | boolean | 是否為唯讀模式 | | isLoading | boolean | 是否顯示 loading 效果 | | locations | string[] | 初始地點（字串）陣列 | | title | string | modal 顯示標題 | | tableInfo | string | 表格上方提示文字 | | tableHeader | string[] | 表格欄位標題（預設為名稱/經度/緯度） | | mapInfo | string | 地圖上方提示文字 | | coordinateOptions | { label, longitude, latitude }[] | 可選的地點與經緯度資料 | | googleMapsGeoApiKey | string | Google Maps Geocoding API Key（可選） | | getCoordinates | (label: string) => Promise<{ label, longitude, latitude }> | 自定查詢座標函式 | | mapCenter | [number, number] | 地圖中央預設經緯度 | | mapZoom | number | 地圖遠近 | | onClick | (coordinates) => void | 按下「確定」時觸發，回傳目前所有經緯度資料 | | infoIcon, addCoordinatesIcon, deleteIcon, mapPinIcon | React.ReactNode | 自訂圖示元件 | | xxxSx | object | 提供 MUI sx 自訂樣式，包含 modal、button、表格、地圖等元件 |

🛠 Peer Dependencies

| 套件 | 說明 | |------|------| | react, react-dom | React 16.8+ | | @mui/material, @mui/icons-material | UI 元件（button, modal, icon） | | react-leaflet, leaflet | 地圖功能 | | axios | 查詢外部 API | | uuid | 產生唯一 ID |

請確保這些依賴已安裝：

npm install react react-dom @mui/material @mui/icons-material react-leaflet leaflet axios uuid

📦 原始碼與套件資訊

此專案托管於 GitLab，並發佈於 npm：

• GitLab Repo：https://gitlab.daoyidh.com/npm/coordinates-editor-modal.git
• npm 頁面：@daoyi/coordinates-editor-modal

📄 License

ISC License
© DaoYi Technology © Johnny 蔡政軒