Phần 2 của Series Một mình tôi chống lại cả Google Maps (đùa đấy... mà thật đấy)
Mở đầu: Khi không có bão, ta show ảnh bão Kristy trên bản đồ ViQy Maps
“Trái đất không có bão. Nhưng tôi thì có một cơn trong lòng.” Đó là tôi, 3 năm trước – một đứa dev ngơ ngác với Leaflet, nhưng lại đầy tham vọng render bản đồ cho cả quốc gia, mà không hiểu mình vừa ký đơn đăng ký tự sát.
Hồi tưởng lại: DevTools là bạn, hay là thứ khiến bạn bị block 30 phút?
Kể từ sau Tập 1, tôi nhận được vài tín hiệu từ vũ trụ. Cụ thể là... một loạt IP cố gắng mở DevTools để xem thử tôi có "nổ" không:
"115.79.138.149": { "violationCount": 2 },
"116.97.104.146": { "violationCount": 1 },
"123.25.21.145": { "violationCount": 1 },
...
Kết luận lâm sàng: Curiosity kills the cat. Và nếu con mèo dùng DevTools, nó sẽ bị block 30 phút khỏi bản đồ.
Lời khuyên nhẹ nhàng: để lại comment, tôi chia sẻ code dần – khỏi cần làm người đi chợ sớm len lén lượn qua sạp hàng Tết.
Gạch đầu tiên: Tôi tạo bản đồ như thế nào với Leaflet?
Bạn nghĩ bản đồ quốc gia phải bắt đầu từ một hệ thống lớn lao? Không.
Tôi bắt đầu bằng... một file HTML trống, một cú script src="leaflet.js", và câu hỏi:
“Tại sao mình lại làm cái này?”
Nhưng rồi tôi viết:
var map = L.map('map').setView([21.0285, 105.8544], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap'
}).addTo(map);
Đây là lần đầu tôi thấy Hà Nội xuất hiện trên bản đồ do tay mình render.
Tôi rơm rớm nước mắt.
Không phải vì xúc động.
Mà vì...
- Mạng không lỗi
- API không sai
- Tôi quên đặt height cho cái
<div id="map">...
30 phút ngồi nhìn cái khung trắng toát, lòng đầy hoài nghi:
“Mình sai ở đâu? Cuộc đời sai ở đâu?”
Tưởng Leaflet khó nhằn, ai ngờ chính tôi là “đứa con bị bỏ quên của CSS”.
Hello Leaflet, em đến không kèn không trống, dạy tôi bài học đầu đời:
Làm web bản đồ, trước hết phải nhớ... cho cái bản đồ nó hiện ra đã.
Không backend, không build tool, không React, không Webpack – vì tôi biết nếu dùng các hệ thống hiện đại, tôi sẽ mất 3 tháng để convert các thư viện cũ, chưa kể đọc tài liệu của Leaflet đã đủ mệt rồi.
"Nếu đời bạn đã đủ khó, đừng thêm Vite."
Khi L.tileLayer... không còn đủ
Trong quá trình phát triển, tôi thêm dữ liệu thời tiết, thiên tai, bão, cáp biển...
Rồi tôi nhận ra: dùng L.tileLayer() là một con đường không lối thoát nếu bạn muốn render quá nhiều thứ cùng lúc. Tại sao?
Nó tải ảnh nền theo từng ô.
Các lớp chồng lên nhau nhanh chóng trở thành một cái chăn bông code mà bạn không thể debug nổi.
Nếu bạn nghĩ thêm vài dòng là được thì... xin lỗi, bạn vừa mới đến chương 1.
Chuyển hướng: Dùng leaflet-maplibre-gl như một cú phản đòn
Và thế là tôi chuyển sang dùng:
L.maplibreGL({ style: 'https://quyhoachvietnam.com.vn/ViQy/tiles.json'
}).addTo(map);
Đây là cú pivot lớn nhất kể từ việc tôi bỏ Java để học JavaScript.
MapLibre GL giúp tôi render hàng chục lớp JSON một cách mượt mà như kem tươi trên bánh flan:
- Thời tiết vệ tinh
- Định hướng gió
- Máy bay
- Tàu biển
- Bão nhiệt đới
- Và... (spoiler) mạng lưới chém gió DevTools đang dần hoàn thiện
Tôi viết lại plugin gốc để:
- Chạy nhiều JSON layer
- Sync pan/zoom/bearing
- Quản lý layer như admin group Facebook
Và khi tôi nhận ra... đây không còn là bản đồ quy hoạch nữa
Lúc đầu tôi chỉ muốn giúp người dân tra quy hoạch. Rồi thấy nhiều người hỏi về thời tiết, lại thêm mấy trận lũ ống, lũ quét, cá mập cắn cáp, bão đổ vào Biển Đông.
Thế là tôi nghĩ:
"Tại sao người Việt phải vào Windy, Zoom.Earth… để xem thông tin thiên tai?"
Ý tưởng ViQy Maps – bản đồ All-in-One, của người Việt, nhẹ, mượt, dữ liệu thời gian thực – bắt đầu từ đó.
Tập 2 khép lại với 2 điều:
- Tôi vẫn dùng JavaScript thuần, vì tôi thích hiểu từng dòng.
- Nếu bạn cũng đang làm một cái gì đó điên rồ một mình – hãy tiếp tục.
🫶 “ViQy Maps không phải bản đồ mạnh nhất. Nhưng là bản đồ tôi tự build từng dòng, debug từng đêm, từ những câu hỏi ngây thơ nhất.”
To be continued...