[Shoper Gamer] React Leaflet คืออะไร โดย

สำรวจ
ลงทุน
คำถาม

มีบัญชีอยู่แล้ว?หรือ

•

21 มิ.ย. เวลา 13:27 • การศึกษา

React Leaflet คืออะไร

โดย

ในการพัฒนาเว็บแอปพลิเคชันยุคใหม่ การแสดงผลแผนที่ และ ข้อมูลเชิงพื้นที่ (Geospatial Data) ได้กลายมาเป็นฟีเจอร์มาตรฐานที่เราพบเห็นกันจนชินตา ตั้งแต่การปักหมุดแสดงตำแหน่งหน้าร้านค้า ระบบติดตามพิกัดไรเดอร์ส่งอาหาร ไปจนถึงหน้าจอแดชบอร์ดอัจฉริยะสำหรับวิเคราะห์ข้อมูลเชิงภูมิศาสตร์ขององค์กรขนาดใหญ่ แต่สำหรับนักพัฒนาแล้ว การเลือกใช้เครื่องมือทำแผนที่ที่เหมาะสมนั้นไม่ใช่เรื่องง่ายเลย โดยเฉพาะอย่างยิ่งเมื่อต้องนำมิติเรื่อง ต้นทุนงบประมาณ และ ความยืดหยุ่นในการเขียนโค้ด มาเป็นตัวตั้ง

React Leaflet คือคำตอบ และ ทางออกหลักที่ช่วยให้นักพัฒนาสาย React สามารถเนรมิตแผนที่ที่สามารถโต้ตอบกับผู้ใช้งาน (Interactive Map) ได้อย่างง่ายดาย โดยไลบรารีตัวนี้ดึงเอาขุมพลังของ Leaflet ซึ่งเป็นหนึ่งในแพลตฟอร์มแผนที่แบบโอเพนซอร์สที่ขึ้นชื่อเรื่องความเบาหวิว และ ป็อปปูลาร์ที่สุดในโลกมาใช้งาน

ด้วยขนาดไฟล์เริ่มต้นที่กะทัดรัดเพียงประมาณ ~40KB ประกอบกับความอิสระที่ไม่มีการเก็บค่าบริการรายเดือนหรือจำกัดจำนวนการโหลดหน้าเว็บ ทำให้ React Leaflet กลายเป็นตัวเลือกยอดนิยมอันดับต้นๆ สำหรับนักพัฒนาที่ต้องการความเป็นอิสระ และ อยากควบคุมสถาปัตยกรรมแผนที่ของตัวเองอย่างเต็มร้อย

★
React Leaflet คืออะไร?

React Leaflet คือ ชุดส่วนประกอบสำเร็จรูป หรือ React Components ที่ทำหน้าที่เป็นสะพานเชื่อมโยง (Wrapper) ระหว่างสถาปัตยกรรมของเฟรมเวิร์ก React เข้ากับคลังคำสั่งของ Leaflet Map Library โดยตรง สิ่งสำคัญที่ต้องทำความเข้าใจคือ มันไม่ได้ถูกสร้างขึ้นมาเพื่อทดแทนตัว Leaflet ดั้งเดิม แต่เป็นการนำฟังก์ชันคำสั่งจาวาสคริปต์ของ Leaflet มาห่อหุ้มให้อยู่ในรูปแบบ Component แท็กเปิด-ปิดที่ชาว React คุ้นเคย เพื่อให้สามารถเขียนควบคุมและส่งผ่านข้อมูลร่วมกับแอปพลิเคชันได้อย่างเป็นธรรมชาติ

⭐ หากต้องการเปรียบเทียบให้เห็นภาพชัดเจน

⚪ Leaflet ดั้งเดิม

เปรียบเสมือนเครื่องยนต์ดิบของรถยนต์ ที่คอยขับเคลื่อนระเบียบวิธีคำนวณ การวาดเส้นกราฟิก และ การตอบสนองต่อการคลิกซูมทั้งหมดบนหน้าจอ

⚪ React Leaflet

เปรียบเสมือนพวงมาลัย หน้าปัดดิจิทัล และคอนโซลควบคุมแผงวงจรที่ถูกดีไซน์มาให้เข้าคู่กับคนขับสาย React ช่วยให้เราสามารถเหยียบคันเร่งควบคุมเครื่องยนต์ตัวนั้นได้ทันที ผ่านกลไกประกาศค่า Props โดยไม่ต้องไปนั่งเขียนโค้ดจาวาสคริปต์แบบ Imperative เพื่อสั่งควบคุม DOM ของ Leaflet ด้วยตัวเองให้ปวดหัว

โครงสร้างเบื้องหลังของ React Leaflet มีการหยิบยืมระบบ React's Context API มาใช้ เพื่อทำหน้าที่ส่งผ่านตัวแปรอินสแตนซ์หลัก (Map Instance) จากเลเยอร์บนสุดกระจายลงไปให้แก่คอมโพเนนต์ลูกๆ (Children Components) ส่งผลให้ส่วนประกอบย่อยต่างๆ ที่ลอยอยู่เหนือแผนที่ ไม่ว่าจะเป็นหมุดปัก (Marker), หน้าต่างข้อความเด่น (Popup) หรือ ชั้นเลเยอร์ภาพดาวเทียม (TileLayer) สามารถรับรู้พิกัดตำแหน่งและทำงานซิงค์เชื่อมโยงกันได้อย่างเป็นระบบระเบียบ

★
React Leaflet ทำงานอย่างไร?

กลไกที่อยู่เบื้องหลังการผสานพลังระหว่างโครงสร้าง Virtual DOM ของ React และ การจัดระเบียบหน้าจอของ Leaflet สามารถแบ่งรายละเอียดการทำงานออกเป็น 4 ส่วนหลักดังนี้ครับ

1) รูปแบบการเรนเดอร์หน้าจอ (Rendering)

กระบวนการนี้จะแตกต่างไปจากคอมโพเนนต์ React ทั่วไปที่มักจะแปลงสเปกโค้ดให้กลายเป็น DOM Elements บนหน้าเว็บโดยตรง เนื่องจากข้อจำกัดของตัว Leaflet นั้นมีระบบจัดการภาพเลเยอร์แผนที่ของตัวเอง และ ต้องการเข้าถึงสิทธิ์การควบคุม DOM โดยตรง ดังนั้น React Leaflet จึงทำหน้าที่เพียงแค่สร้างบล็อกสี่เหลี่ยม <div> เปล่าๆ ขึ้นมารองรับผ่านคอมโพเนนต์ MapContainer จากนั้นจะส่งต่อสิทธิ์ขาดในการวาดภาพ และ การโหลดพิกัดบนพื้นที่สี่เหลี่ยมนั้นให้เป็นหน้าที่ของหุ่นยนต์หลังบ้านของ Leaflet เป็นผู้ดูแลแทน

2) วงจรชีวิตของระบบ (Lifecycle Process)

วงจรการทำคลอด และ ทำลายแผนที่บนหน้าเว็บ มีลำดับขั้นตอนที่เป็นขั้นเป็นตอนดังนี้:

- MapContainer ทำการสร้างบล็อก <div> เพื่อเป็นจุดตั้งต้นของแผนที่บนหน้าเว็บไซต์

- MapContainer เริ่มสร้าง Instance วัตถุแผนที่ของ Leaflet ขึ้นมา พร้อมกับเปิดระบบ React Context เพื่อเตรียมแชร์ข้อมูลวัตถุตัวนี้ลงสู่เลเยอร์ล่าง

- MapContainer สั่งเรนเดอร์คอมโพเนนต์ลูกๆ ที่เขียนต่อท้ายอยู่ภายในแท็ก

- คอมโพเนนต์ลูกแต่ละตัว (เช่น หมุด Marker หรือ เส้น Polygon) จะเข้าไปดึงแชร์วัตถุแผนที่จาก Context มา จากนั้นจะสั่งสร้างวัตถุแผนที่ของ Leaflet ชิ้นที่ตรงกัน แล้วกดสั่งคำสั่ง .addTo(map) เพื่อนำตัวเองไปแปะลอยอยู่บนแผนที่หลัก

- ยามใดที่ตัวแปรนำเข้า (Props) มีการเปลี่ยนแปลงเกิดขึ้น ตัวระบบจะทำการสั่งอัปเดตคุณสมบัติไปยังเครื่องยนต์ Leaflet โดยตรง

- ยามใดที่คอมโพเนนต์นั้นถูกถอดถอนออกจาก render tree (เช่น ผู้ใช้กดปิดหน้าต่าง) ระบบจะสั่งรันคำสั่งลบ Layer นั้นออกจากแผนที่ให้โดยอัตโนมัติเพื่อคืนหน่วยความจำให้แก่คอมพิวเตอร์

3) การจัดการคุณสมบัตินำเข้า (Properties Handling)

ค่า Properties ต่างๆ ที่เราส่งผ่านให้แก่คอมโพเนนต์ในครั้งแรก จะถูกนำไปใช้จัดตั้งค่าเริ่มต้นให้แก่วัตถุ Leaflet Instance และทางผู้พัฒนาแนะนำว่าให้มองค่าเหล่านี้เป็นคุณสมบัติที่ไม่สามารถเปลี่ยนแปลงค่าได้ (Immutable) โดยเริ่มต้น หากนักพัฒนาต้องการส่งสัญญาณให้ Props มีการอัปเดตขยับตามการเปลี่ยน State ในภายหลัง จะต้องเลือกใช้เฉพาะคุณสมบัติที่มีการระบุไว้ในเอกสารคู่มือชัดเจนว่าเป็นค่าที่เปลี่ยนแปลงได้ (Mutable) เท่านั้น

4) ข้อจำกัดสำคัญเรื่องสถาปัตยกรรม SSR

เนื่องจากหัวใจของ Leaflet จำเป็นต้องมีการวิ่งไปเรียกใช้งานอ็อบเจกต์หน้าต่างเบราว์เซอร์ (window) และควบคุม DOM โดยตรงทันทีเมื่อระบบเริ่มทำงาน ส่งผลให้ React Leaflet ไม่รองรับเทคโนโลยีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หรือ Server-Side Rendering (SSR) โดยเด็ดขาด

ดังนั้น หากคุณนำไปใช้งานร่วมกับเฟรมเวิร์กสมัยใหม่อย่าง Next.js คุณจำเป็นต้องบังคับให้ Component แผนที่นี้ทำงานเฉพาะที่ฝั่งลูกข่ายเท่านั้นผ่านการประกาศระบุคำสั่ง 'use client'; หรือ เลือกโหลดซอร์สโค้ดผ่านฟีเจอร์ Dynamic Import แบบปิดสิทธิ์ SSR ({ ssr: false }) ครับ

★
ประเภทและคุณสมบัติเด่น

React Leaflet มีการจัดเตรียมส่วนประกอบสำเร็จรูปมาให้เลือกหยิบไปวางเกือบครอบคลุมทุกฟังก์ชันดั้งเดิมของ Leaflet โดยแบ่งกลุ่มคุณสมบัติออกมาเป็นข้อความรายละเอียดได้ดังนี้:

⚪ กลุ่มสัญญานควบคุมแผนที่หลัก (Map Container) : ขับเคลื่อนโดยคอมโพเนนต์ MapContainer ทำหน้าที่เป็นกระดูกสันหลังคอยกำหนดพิกัดจุดศูนย์กลางเริ่มต้น (Center), ระดับความตื้นลึกในการซูมภาพ (Zoom) และ ความกว้างยาวรวมของกรอบแสดงผล

⚪ กลุ่มชั้นภาพพื้นหลังแผนที่ (Tile Layers) : ขับเคลื่อนโดยคอมโพเนนต์ TileLayer ทำหน้าที่ดาวน์โหลดภาพกราฟิกพื้นหลังแผนที่จากผู้ให้บริการต่างๆ วิ่งมาต่อกันเป็นจิ๊กซอว์ โดยนักพัฒนาสามารถสลับไปใช้ได้ทั้งค่าย OpenStreetMap, Mapbox หรือ ระบบแผนที่คัสตอมอื่นๆ

⚪ กลุ่มหมุดปักและป้ายข้อมูล (Markers & Popups) : ขับเคลื่อนโดยคอมโพเนนต์ Marker, Popup และ Tooltip ทำหน้าที่ปักหมุดจุดพิกัดละติจูด/ลองจิจูดลงบนแผนที่ พร้อมทั้งสามารถเขียนโค้ดให้เปิดกล่องข้อความอธิบายเพิ่มเติมเมื่อผู้ใช้งานนำเมาส์มาคลิกหรือชี้ได้

⚪ กลุ่มลายเส้นและรูปทรงเรขาคณิต (Shapes) : ขับเคลื่อนโดยคอมโพเนนต์ Polygon, Polyline, Circle และ Rectangle ช่วยให้นักพัฒนาสามารถวาดลายเส้นถนน ล้อมรัศมีวงกลม หรือ ตีตารางสี่เหลี่ยมเพื่อแสดงขอบเขตพื้นที่เชิงภูมิศาสตร์ได้อย่างอิสระ

⚪ กลุ่มปุ่มสั่งการควบคุม (Controls) : ขับเคลื่อนโดยคอมโพเนนต์ ZoomControl และ ScaleControl ทำหน้าที่แปะปุ่มกดเครื่องหมายบวก-ลบสำหรับซูมเข้าออก หรือ แสดงแถบไมล์วัดระยะทางให้แก่ผู้ใช้งานเว็บ

⚪ กลุ่มควบคุมสลับหน้าเลเยอร์ (Layers Control) : ขับเคลื่อนโดยคอมโพเนนต์ LayersControl ทำหน้าที่เปิดกล่องเมนูให้ผู้ใช้งานสามารถกดติ๊กเลือกเปิด-ปิดชั้นข้อมูล หรือ กดสลับโหมดภาพแผนที่ธรรมดาให้กลายเป็นภาพถ่ายดาวเทียมได้ตามใจชอบ

⚪ กลุ่มฟังก์ชันดักจับเหตุการณ์ (Hooks) : ขับเคลื่อนโดยฟังก์ชัน useMap และ useMapEvents ช่วยให้นักพัฒนาสามารถดึงวัตถุแผนที่ออกมาเขียนคำสั่งควบคุมขั้นสูง หรือ เขียนโค้ดดักจับพฤติกรรมผู้ใช้ เช่น ดักจับพิกัดเมื่อผู้ใช้กดคลิกเมาส์ลงบนพื้นผิวแผนที่

★
ประโยชน์ของ React Leaflet

✅ ไม่มีค่าใช้จ่ายและเป็นมิตรต่อสายโอเพนซอร์ส (100% Free & Open Source) : ปลดล็อกความเครียดเรื่องงบประมาณ ทั้งตัว React Leaflet และ Leaflet เปิดให้ทุกคนนำไปใช้งานในเชิงพาณิชย์ได้ฟรีโดยไม่มีเงื่อนไข ไม่จำเป็นต้องเปิดบัตรเครดิตเพื่อผูกขอ API Key และ ไม่มีการส่งบิลเรียกเก็บเงินย้อนหลัง เหมาะอย่างยิ่งสำหรับโปรเจกต์กลุ่มสตาร์ทอัพ หรือ แอปพลิเคชันที่มีปริมาณยอดผู้ใช้งานเติบโตอย่างรวดเร็ว

✅ มีน้ำหนักที่เบาหวิวและกินทรัพยากรต่ำ (Ultra Lightweight) : ด้วยขนาดตัวของ Leaflet ที่เบาเพียงประมาณ ~40KB ส่งผลให้แอปพลิเคชันของคุณโหลดหน้าแรกขึ้นมาแสดงผลได้เร็วมาก ช่วยดันคะแนนความเร็วของเว็บไซต์ (Core Web Vitals) ให้สูงขึ้น ต่างจากค่ายยักษ์ใหญ่บางรายที่กินขนาดแบนด์วิดท์ค่อนข้างหนา

✅ ให้อิสระในการเลือกผู้ให้บริการภาพแผนที่ (Provider Flexibility) : คุณไม่ได้ถูกบีบบังคับให้ต้องใช้ข้อมูลแผนที่จากบริษัทใดบริษัทหนึ่งเป็นหลัก คุณสามารถเลือกดึงภาพ Tile แผนที่ฟรีจากเครือข่าย OpenStreetMap, นำคีย์จากค่ายดีไซน์สวยอย่าง Mapbox มาป้อน หรือแม้กระทั่งตั้งค่าเซิร์ฟเวอร์กระจายภาพแผนที่คัสตอม (Private Tile Server) ขององค์กรขึ้นมาใช้งานเองก็ทำได้อย่างไร้รอยต่อ

✅ มีความสามารถในการปรับแต่งหน้าตาสูง (High Customizability) : เปิดกว้างในการตกแต่งสไตล์ด้วยสถาปัตยกรรมเว็บมาตรฐานอย่าง HTML และ CSS คุณสามารถแปลงโฉมไอคอนหมุดปัก ปรับรูปทรงกล่องป๊อปอัป หรือ เปลี่ยนธีมสีของแผนที่ให้ตรงตามแบรนดิ้งของบริษัทได้อย่างไม่มีข้อจำกัด

✅ รองรับการเปิดใช้งานในโหมดไร้อินเทอร์เน็ต (Offline Support) : มีโครงสร้างสถาปัตยกรรมที่เอื้อประโยชน์ให้สามารถทำระบบบันทึกภาพแผนที่ล่วงหน้า (Pre-cache Map Tiles) มาเก็บไว้ในฝั่ง Local Storage หรือผ่าน Service Worker ได้ ช่วยให้แอปพลิเคชันของคุณยังคงเปิดแสดงผลแผนที่ได้ตามปกติแม้ในยามที่ผู้ใช้งานสมาร์ตโฟนหลุดเข้าไปอยู่ในพื้นที่อับสัญญานอินเทอร์เน็ต

✅ มีระบบนิเวศและชุมชนปลั๊กอินที่แข็งแกร่งมหาศาล : การสะสมชื่อเสียงมาอย่างยาวนานของ Leaflet ส่งผลให้มีชุมชนนักพัฒนาช่วยกันเขียนส่วนต่อขยายไว้รองรับงานแทบทุกรูปแบบ ไม่ว่าจะเป็นระบบคำนวณเส้นทางจราจร (Routing) ระบบแปลงชื่อที่อยู่ให้กลายเป็นพิกัดละติจูดลองจิจูด (Geocoding) หรือระบบเปิดแสดงผลเต็มหน้าจอ

★
ควรมีความรู้พื้นฐานอะไรมาก่อนบ้าง?

เพื่อช่วยให้การเขียนโค้ดสั่งการ React Leaflet ลื่นไหล และ ไม่ติดขัดนักพัฒนาควรมีพื้นฐานความรู้ในหัวข้อต่อไปนี้มาก่อนครับ:

🧑‍🦱 สำหรับผู้เริ่มต้น (Beginners)

⚪ แนวคิดแกนหลักของ React

เข้าใจวิธีการสร้าง และ ตัดแบ่ง Component, การส่งผ่านข้อมูลคุณสมบัติ (Props) และเข้าใจการจัดการสถานะภายในผ่าน useState และวงจรการทำงานของ useEffect

⚪ ภาษา JavaScript ระดับโมเดิร์น (ES6+) : มีความเชี่ยวชาญในเรื่อง Arrow Functions, โครงสร้างการแตกตัวแปร (Destructuring), รวมถึงระเบียบวิธีจัดการอาร์เรย์ (Array Methods) เช่น .map() หรือ .filter()

⚪ ความรู้ฝั่ง HTML และ CSS

เข้าใจวิธีการเขียนสไตล์ และ ระบุคุณสมบัติความกว้างความสูงของบล็อกเพื่อป้องกันปัญหาแผนที่ย่อตัวจนมองไม่เห็น

🧑‍💻 สำหรับนักพัฒนาที่ต้องการนำไปใช้ในงานจริง (Production Ready)

⚪ เข้าใจหลักการทำงานเบื้องต้นของ Leaflet : เข้าใจคำศัพท์เชิงสเปซ เช่น ความหมายของพิกัด Lat/Lng ระบบชั้นข้อมูล (Layers) แนวคิดของเส้นกราฟิกเวกเตอร์ และ ระบบพิกัดภูมิศาสตร์สากล

⚪ ระบบ React Hooks ระดับแอดวานซ์ : เข้าใจกลไกการดึงอินสแตนซ์ และ การฝังฟังก์ชันดักจับพฤติกรรมผ่านคำสั่ง useMap และ useMapEvents ของ React Leaflet รวมถึงการใช้ useRef เพื่อล็อกพิกัดวัตถุ

⚪ การควบคุมระบบจัดส่งโมดูล (Dependency Management)

รู้วิธีจัดระเบียบการติดตั้งแพ็กเกจผ่าน npm/yarn และ การแก้ไขปัญหาเรื่องเวอร์ชันของตัวหลักและตัว Wrapper ไม่ตรงกัน

⚪ ภาษา TypeScript (ตัวเลือกเสริม) เข้าใจแนวคิดการประกาศระบุชนิดข้อมูล (Type Definitions) ของพิกัดละติจูดลองจิจูด และ อ็อบเจกต์แผนที่เพื่อลดความผิดพลาดในการส่งค่าในองค์กร

★
React Leaflet vs Google Maps API

การเลือกเครื่องมือทำแผนที่ให้ถูกจริตกับเนื้องานถือเป็นหัวเลี้ยวหัวต่อสำคัญ โดยเราสามารถจำแนกมิติข้อต่างระหว่างทั้งสองค่ายยอดฮิตออกมาเป็นข้อความรายละเอียดได้ดังนี้ครับ:

💸 มิติด้านค่าใช้จ่ายและต้นทุนรวม (Cost)

⚪ React Leaflet : ใช้งานฟรี 100% ไม่มีข้อจำกัดด้านปริมาณการโหลดหน้าเว็บ เหมาะแก่การควบคุมต้นทุนอย่างเบ็ดเสร็จ

⚪ Google Maps API : ใช้โมเดลการคิดเงินตามปริมาณการใช้งานจริง (Pay-as-you-go) แม้จะมีเครดิตฟรีให้รายเดือนจำนวนหนึ่ง แต่หากเว็บเริ่มมีคนเข้าใช้งานหนาแน่น ก็อาจเสี่ยงต่อการเจอใบแจ้งหนี้ราคาแพงวิ่งมาเก็บเงินได้

🔑 มิติด้านข้อกำหนดเงื่อนไขกุญแจรหัส (API Key)

⚪ React Leaflet: ไม่ต้องทำเรื่องขอใช้งานหรือฝังคีย์ใดๆ ในสเปกโค้ดเริ่มต้น สามารถลงไลบรารีแล้วพิมพ์เรียกใช้งานได้เลย

⚪ Google Maps API : บังคับให้ต้องเข้าไปตั้งค่าโปรเจกต์บน Google Cloud Console เพื่อผูกบัตรเครดิต และ ขอรับรหัส API Key มาแปะกำกับในโค้ดทุกครั้ง

🗺️ มิติด้านข้อมูลแผนที่และความแม่นยำของพิกัดลึก (Data & POI)

⚪ React Leaflet : ขึ้นอยู่กับผู้ให้บริการชั้นภาพที่คุณเลือก (ถ้าใช้ OpenStreetMap ข้อมูลสถานที่ หรือ ซอกซอยขนาดเล็กในบางประเทศอาจจะไม่แน่นหนาเท่าค่ายยักษ์ใหญ่)

⚪ Google Maps API : ยืนหนึ่งเรื่องความแน่นหนาของข้อมูลมีฐานข้อมูลสถานที่สำคัญ (Point of Interest) ข้อมูลการจราจรแบบเรียลไทม์ และ ระบบพิกัดที่อัปเดตสม่ำเสมอ และ แม่นยำสูงมากในแทบทุกพื้นที่ทั่วโลก

🧸 มิติด้านอิสระและการปรับแต่งหน้าตา (Customization)

⚪ React Leaflet : มีความยืดหยุ่นสูงมากเปิดโอกาสให้นักพัฒนาเข้าถึงโครงสร้างแกนกลางเพื่อเขียน CSS หรือสคริปต์สลับสีภาพเลเยอร์ได้ตามใจชอบ

⚪ Google Maps API : ปรับแต่งสไตล์โทนสีแผนที่ได้ระดับหนึ่งผ่านระบบคลาวด์สไตลิ่ง แต่โครงสร้างหน้าต่างกล่องข้อมูล (Info Window) ส่วนใหญ่จะยังคงถูกบีบให้อยู่ในกรอบมาตรฐานของทาง Google

🚒 มิติด้านฟีเจอร์นวัตกรรมเสริมในตัว (Built-in Features)

⚪ React Leaflet : ตัวแกนหลักมีเพียงฟีเจอร์แผนที่พื้นฐาน หากต้องการฟังก์ชันขั้นสูง เช่น ระบบนำทาง หรือระบบคำนวณหาระยะทาง นักพัฒนาต้องไปควานหาปลั๊กอินภายนอกมาประกอบร่างเพิ่มเอง

⚪ Google Maps API : จัดเต็มฟีเจอร์ระดับโลกมาให้พร้อมใช้งานในคลังคำสั่งเดียว เช่น ภาพส่องถนนเสมือนจริง (Street View), ระบบค้นหาสถานที่อัจฉริยะ (Places API) และ ระบบนำทางคำนวณเส้นทางจราจร (Directions API)

🛜 มิติด้านการเปิดรันระบบแบบไร้อินเทอร์เน็ต (Offline Mode)

⚪ React Leaflet : รองรับการทำระบบแคชภาพแผนที่เก็บลงเครื่อง เพื่อให้สามารถเปิดใช้งานในโหมดออฟไลน์ได้ดีเยี่ยม

⚪ Google Maps API : ไม่รองรับการเปิดใช้งานแบบออฟไลน์อย่างเป็นทางการ ตัวแอปพลิเคชันจำเป็นต้องเชื่อมต่ออินเทอร์เน็ตเพื่อดึงข้อมูลสดจากคลาวด์ของ Google ตลอดเวลา

🧑‍💻 มิติด้านการสนับสนุนสถาปัตยกรรม SSR

⚪ React Leaflet : ไม่รองรับการทำงานฝั่ง Server-Side ต้องอาศัยการสั่งงานที่ฝั่ง Client เท่านั้น

⚪ Google Maps API : แผนที่แกนหลักทำงานฝั่ง Client เช่นกัน แต่ระบบนิเวศ และ ไลบรารีเสริมบางตัวมีช่องทางรองรับการทำสคริปต์โหลดภาพตัวอย่างล่วงหน้าจากฝั่งเซิร์ฟเวอร์ได้

★
ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: ขั้นตอนการติดตั้งแพ็กเกจเบื้องต้น

เริ่มต้นสร้างโปรเจกต์ และ ทำการติดตั้งคลังไลบรารีหลักของ Leaflet และ ตัว Wrapper ลงในแอปพลิเคชันของคุณผ่านการพิมพ์คำสั่งบนหน้าต่าง Terminal ดังนี้ครับ:

```bash

# สำหรับโปรเจกต์รูปแบบมาตรฐาน

npm install react-leaflet leaflet

# สำหรับโปรเจกต์ที่ใช้งานภาษา TypeScript ให้ติดตั้ง Type เสริมควบคู่ไปด้วย

npm install -D @types/leaflet

```

ตัวอย่างที่ 2: โค้ดสร้างแผนที่พื้นฐานพร้อมปักหมุดและหน้าต่างกล่องข้อมูล

นี่คือตัวอย่างการเซตอัปหน้าแอปพลิเคชันแผนที่พื้นฐาน โดยกำหนดให้พิกัดศูนย์กลางวิ่งไปตั้งต้นที่กรุงเทพมหานคร พร้อมทั้งทำการแก้ไขบั๊กรูปภาพไอคอนหมุดหายซึ่งเป็นอาการยอดฮิตเมื่อนำ Leaflet มาวิ่งบนสถาปัตยกรรมของ React:

```jsx

import React from 'react';

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

import L from 'leaflet';

// ขั้นตอนการแก้ไขปัญหาไฟล์ภาพหมุดปัก (Icon) ค้นหาไม่เจอในระบบ React

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({

iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),

iconUrl: require('leaflet/dist/images/marker-icon.png'),

shadowUrl: require('leaflet/dist/images/marker-shadow.png'),

});

function BaseMap() {

// ทำการระบุพิกัดละติจูดและลองจิจูดสำหรับปักหมุดที่กรุงเทพฯ

const bangkokPosition = [13.736717, 100.523186];

return (

<MapContainer

center={bangkokPosition}

zoom={13}

style={{ height: '500px', width: '100%' }}

{/* ดึงภาพแผนที่โอเพนซอร์สจากค่าย OpenStreetMap มาเป็นภาพพื้นหลัง */}

<TileLayer

attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

{/* วางหมุดปักลงบนพิกัดที่กำหนด */}

{/* ผูกกล่องข้อความอธิบายให้โชว์ขึ้นมาเมื่อมีผู้ใช้งานมากดคลิกที่ตัวหมุด */}

<Popup>

สวัสดีครับ! นี่คือพิกัดศูนย์กลางกรุงเทพมหานคร 🇹🇭

</Popup>

</Marker>

</MapContainer>

);

}

export default BaseMap;

```

ตัวอย่างที่ 3: การวาดเส้นทาง (Polyline) และ ตีเส้นล้อมรัศมีวงกลม (Circle)

รหัสโค้ดตัวอย่างด้านล่างนี้ แสดงวิธีการใช้ส่วนประกอบสำเร็จรูปเพื่อวาดรูปทรงเรขาคณิตลงบนพื้นผิวแผ่นแผนที่ เพื่อจำลองการทำขอบเขตพื้นที่ปลอดภัยหรือลากเส้นบอกพิกัดการเดินทาง:

```jsx

import React from 'react';

import { MapContainer, TileLayer, Polyline, Circle, Popup } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

function ShapeMap() {

const centerPoint = [13.736717, 100.523186];

// จัดเตรียมกลุ่มพิกัดละติจูดลองจิจูดสุ่มสำหรับใช้ลากเส้นเชื่อมโยงทางเดิน

const travelRoute = [

[13.736717, 100.523186],

[13.756331, 100.501765],

[13.727261, 100.524782],

];

return (

{/* ตีเส้นวงกลมล้อมพิกัด กำหนดขนาดรัศมี 500 เมตร พร้อมใส่สีตกแต่งสไตล์ */}

<Popup>พื้นที่ตรวจจับความปลอดภัย รัศมี 500 เมตร</Popup>

</Circle>

{/* ทำการลากเส้นทึบสีแดงเชื่อมจุดพิกัดแต่ละจุดตามอาร์เรย์ที่ระบุไว้ */}

</MapContainer>

);

}

export default ShapeMap;

```

ตัวอย่างที่ 4: การใช้งานเครื่องมือควบคุมระดับลึกผ่าน Hook (useMap)

เมื่อคุณต้องการสั่งให้แผนที่เกิดแอนิเมชันการร่อนพุ่งตัวไปยังตำแหน่งพิกัดใหม่ (Fly to Position) ทันทีเมื่อผู้ใช้งานกดคลิกปุ่มเลือกรายชื่อจังหวัด คุณสามารถดึงอ็อบเจกต์แผนที่หลักออกมาควบคุมสั่งการได้ผ่านการเขียนคอมโพเนนต์ย่อยสำหรับควบคุมคู่กับ Hook ฟังก์ชัน useMap ดังนี้ครับ:

```jsx

import React, { useState, useEffect } from 'react';

import { MapContainer, TileLayer, useMap } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

// คอมโพเนนต์ย่อยทำหน้าที่เป็นกล่องควบคุมการขยับกล้องแผนที่

function MapController({ targetCenter, targetZoom }) {

const mapInstance = useMap(); // เข้าถึงอ็อบเจกต์ Leaflet Map ดั้งเดิมจาก Context

useEffect(() => {

if (targetCenter) {

// สั่งให้ตัวแผนที่ร่อนกล้องพุ่งไปยังพิกัดและระดับซูมใหม่แบบนุ่มนวล

mapInstance.flyTo(targetCenter, targetZoom, { duration: 2 });

}

}, [targetCenter, targetZoom, mapInstance]);

return null; // คอมโพเนนต์นี้ทำหน้าที่ควบคุมตรรกะระบบ จึงไม่จำเป็นต้องเรนเดอร์ DOM หน้าบ้าน

}

function ManagedMap() {

const [currentPos, setCurrentPos] = useState([13.736717, 100.523186]);

const [currentZoom, setCurrentZoom] = useState(13);

return (

<div>

{/* ปุ่มกดจำลองสถานการณ์เปลี่ยนพิกัดกล้องเมื่อผู้ใช้ต้องการย้ายไปพิกัดเชียงใหม่ */}

<button onClick={() => { setCurrentPos([18.788333, 98.985278]); setCurrentZoom(15); }}>

พุ่งไปเที่ยวเชียงใหม่ ⛰️

</button>

{/* ฝังคอนโทรลเลอร์เข้าไปภายใน Container เพื่อคอยดักจับและขยับหน้ากล้องแผนที่ตามสัญญาณ State */}

</MapContainer>

</div>

);

}

export default ManagedMap;

```

ตัวอย่างที่ 5: การเขียนโค้ดดักจับพฤติกรรมเหตุการณ์ผู้ใช้งาน (Events)

หากคุณต้องการทำระบบที่เมื่อผู้ใช้งานนำเมาส์ไปคลิกลงบนพื้นที่ว่างใดๆ ของแผนที่ แล้วต้องการให้ระบบอ่านพิกัด Lat/Lng ตรงจุดนั้นมาโชว์บนหน้าจอคอนโซล คุณสามารถใช้ฟังก์ชัน useMapEvents เข้ามาช่วยจัดการสคริปต์ดักจับเหตุการณ์ได้ดังนี้:

import React from 'react';

import { MapContainer, TileLayer, useMapEvents } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

function InteractionListener() {

// สั่งเปิดตัวรับสัญญาณเหตุการณ์พฤติกรรม (Event Listener) เหนือตัวแผนที่

const mapEvents = useMapEvents({

click: (event) => {

console.log('ผู้ใช้งานกดคลิกเมาส์ที่พิกัด:', event.latlng);

zoomend: () => {

console.log('ผู้ใช้งานปรับเปลี่ยนระดับการซูมปัจจุบันมาอยู่ที่:', mapEvents.getZoom());

moveend: () => {

console.log('จุดศูนย์กลางกล้องปัจจุบันหลังขยับเสร็จคือ:', mapEvents.getCenter());

}

});

return null;

}

function EventMap() {

return (

{/* ใส่คอมโพเนนต์ดักจับอีเวนต์เข้าไปภายในกรอบแผนที่ */}

</MapContainer>

);

}

export default EventMap;

✏️ Shoper Gamer

>> https://shopergamer.vercel.app

✓
React คืออะไร 👇

>> https://www.blockdit.com/posts/68a2cf1db8c4265b7aa8de41

✓
React เป็น Library หรือ Framework 👇

>> https://www.blockdit.com/posts/68a3febda445207795c28f33

Credit :

👇

●
https://react-leaflet.js.org/docs/start-introduction/

●
https://dev.to/kyle12jung/react-map-libraries-overview-react-leaflet-complete-installation-debugging-guide-15am

●
https://dev.to/minoosh/my-journey-with-react-leaflet-learning-to-build-an-interactive-map-ef9

●
https://www.npmjs.com/package/react-leaflet

โฆษณา

ดาวน์โหลดแอปพลิเคชัน

React Leaflet คืออะไร

ดาวน์โหลดแอปพลิเคชัน