ofs-object 0.1.1 → 0.1.4

package/README.md

@@ -47,6 +47,38 @@ npm install mapbox-gl
 
 > MapLibre v6 เป็น ES module ล้วน (ไม่มี CommonJS) ถ้าจะใช้ `require()` ใน Node ต้องใช้ MapLibre v5 หรือใช้ Mapbox แทน — ผ่าน bundler (Angular, Vite, webpack) ใช้ได้ตามปกติ
 
+#### ⚠️ ต้องส่ง Map Engine เข้ามาเอง
+
+**ไลบรารีนี้ไม่ `import` map engine ตัวไหนเลย** — เพราะถ้า import ตัวใดตัวหนึ่งไว้ มันจะกลายเป็น
+dependency บังคับของทุกคน คนที่ใช้ Mapbox และไม่ได้ลง `maplibre-gl` จะ build ไม่ผ่านด้วย
+`Can't resolve 'maplibre-gl'` ตั้งแต่ยังไม่ได้รันโค้ด
+
+ดังนั้นตอนให้ `init()` สร้างแผนที่ ต้องส่ง library เข้ามาด้วย:
+
+```typescript
+// MapLibre v6 ไม่มี default export → ใช้ namespace import
+import * as maplibregl from 'maplibre-gl';
+
+const ofs = new OFSObject({ mapOptions: { maplibregl } });
+await ofs.init('map', { center: [100.5, 13.7], zoom: 12 });
+```
+
+```typescript
+// Mapbox
+import mapboxgl from 'mapbox-gl';
+
+const ofs = new OFSObject({
+  mapAdapter: new MapboxAdapter(),
+  mapOptions: { mapboxgl, accessToken: 'pk....' },
+});
+await ofs.init('map');
+```
+
+หรือโหลดจาก `<script>` tag ก็ได้ ไลบรารีจะอ่านจาก `window.maplibregl` / `window.mapboxgl` ให้เอง
+
+> **ถ้าแอปสร้าง Map เอง** (แนะนำสำหรับ Angular/React/Vue — ดูหัวข้อด้านล่าง) แล้วส่งเข้ามาทาง
+> `new OFSObject({ map })` **ไม่ต้องส่ง engine เลย** เพราะไลบรารีไม่ต้องสร้างแผนที่
+
 ### Stylesheet
 
 Widget ที่ไลบรารี mount ให้ (Command Console, Legend, แผง Symbology, ตาราง Attribute, แผง Topology) ต้องการไฟล์ CSS หนึ่งไฟล์:
@@ -95,12 +127,15 @@ npm install git+ssh://git@github.com/<user>/OnFarmObject.git#main
 
 ```typescript
 import { OFSObject, MapLibreAdapter, LegendWidget } from 'ofs-object';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 async function initMap() {
   // 1. สร้าง Instance หลักของ OFSObject (ใช้ MapLibre เป็นค่าเริ่มต้น)
+  //    ต้องส่ง maplibregl เข้ามา เพราะไลบรารีไม่ import map engine เอง
   const ofs = new OFSObject({
     mapAdapter: new MapLibreAdapter(),
+    mapOptions: { maplibregl },
   });
 
   // 2. กำหนดแผนที่ลงบน HTML Container Element id="map"
@@ -259,8 +294,9 @@ initMap();
 
 <script type="module">
   import { OFSObject } from 'ofs-object';
+  import * as maplibregl from 'maplibre-gl';
 
-  const ofs = new OFSObject();
+  const ofs = new OFSObject({ mapOptions: { maplibregl } });
   await ofs.init('map');
   ofs.consoleWidget.mount('console-mount');
 </script>
@@ -273,6 +309,7 @@ initMap();
 ```tsx
 import React, { useEffect, useRef } from 'react';
 import { OFSObject, LegendWidget } from 'ofs-object';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 export const MapView: React.FC = () => {
@@ -283,7 +320,7 @@ export const MapView: React.FC = () => {
   useEffect(() => {
     if (!mapContainerRef.current) return;
 
-    const ofs = new OFSObject();
+    const ofs = new OFSObject({ mapOptions: { maplibregl } });
     ofsRef.current = ofs;
 
     ofs.init(mapContainerRef.current, {
@@ -339,7 +376,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
   private ofs!: OFSObject;
 
   async ngOnInit() {
-    this.ofs = new OFSObject();
+    this.ofs = new OFSObject({ mapOptions: { maplibregl } });
     await this.ofs.init(this.mapContainer.nativeElement, {
       center: [100.5, 13.7],
       zoom: 13,
@@ -455,6 +492,7 @@ const ofs = new OFSObject({ map, console: myAngularConsole });
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 import { OFSObject, LegendWidget } from 'ofs-object';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const mapContainer = ref<HTMLDivElement | null>(null);
@@ -464,7 +502,7 @@ let ofs: OFSObject | null = null;
 onMounted(async () => {
   if (!mapContainer.value) return;
 
-  ofs = new OFSObject();
+  ofs = new OFSObject({ mapOptions: { maplibregl } });
   await ofs.init(mapContainer.value, {
     center: [100.5, 13.7],
     zoom: 12,