เขียนเว็บสร้างแผนที่ | React Leaflet | Firbound ซูมไปที่ข้อมูล #6

1. ตัวอย่างไฟล์ CSV ในคลิปนะครับ
https://drive.google.com/file/d/1_CGWrEZjKQgggmbMqkUBYvKAOPyBdsO4/view?usp=sharing

Function Group นะครับ เนื่องจาก ใช้ลูกศร Arrow function ไม่ได้นะครับใน Description แต่ผมได้แปลงเป็น function ธรรมดาให้แล้วครับ

function tam(objects) {
const bounds = objects.reduce(
function(acc, cur) {
return acc.extend([cur.latitude, cur.longitude]);
},
L.latLngBounds()
);
mapRef.current.fitBounds(bounds);
}




ลิงค์ตัวอย่างไฟล์ต้นฉบับนะครับ
https://datamillnorth.org/dataset/flight-tracking

2. Marker นะครับ

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
iconSize: [25, 41],
iconAnchor: [12.5, 20.5]
});
L.Marker.prototype.options.icon = DefaultIcon;


/*-------------------------------------------------------------*/

3. Link papaparse นะครับ
https://www.papaparse.com/docs


Link สำหรับเลือกแผนที่ฐาน Basemap นะครับ
https://leaflet-extras.github.io/leaflet-providers/preview/


เว็บ React-leaflet Official ครับ
https://react-leaflet.js.org/

สวัสดีครับ พบกับผมกับช่อง รอยไถ พัฒนา นะครับ สำหรับ Workshop นี้จะเป็นการเขียนเว็บแอพพลิเคชั่นเกี่ยวกับแผนที่ นะครับ

เราจะนำข้อมูลต่างๆ ที่สามารถแสดงบนแผนที่ได้มาแสดงนะครับเช่น
1. Point ( จุด )
2. Line ( เส้น )
3. Polygon ( รูปทรงปิด )
4. GeoJSON
5. URL Service, WMS
6. Shapefile
7. CSV file

ข้อมูล Spatial Data ข้อมูลเชิงพื้นที่ทั้งหลายนะครับ เดี๋ยวเรามาลุยไปพร้อมๆ กันเลยนะครับ
#leaflet
#react
#เขียนเว็บ

สุดท้ายนี้กระผมก็ขอขอบพระคุณทุกๆ ท่านนะครับ ที่สนับสนุนช่อง รอยไถ พัฒนา ตลอดมาครับ

ขอบคุณที่ร่วมเดินทางไปด้วยกันครับ ขอบคุณครับ
"รอยไถ พัฒนา"