@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 蔡政軒