Leaflet JS là gì
Chào các bạn, Show Càng dạo gần đây, như cầu dùng map của người dùng gần như là rất nhiều, Map xuất hiện ở khắp nơi, từ web đến mobile,… Về dịch vụ cung cấp & API thì thằng mạnh nhất là Google Maps, ko ai dám xưng nhì. Nhưng gần đây nó đã update lại cái policy & pricing => giá cao hơn nhiều. Vậy nên, đối với các nhu cầu cơ bản nhất định, ta có thể tìm 1 bên thứ 3 khác để hỗ trợ ta vụ này. Ko xài hết APIs của Google Maps mà xài nó thì khá là tốn $$$, hút máu như M$ rồi =)) OpenStreetMap ra đời vì việc đó, bao gồm:
Hiện nay cũng có khá nhiều website đang sử dụng thằng này, và VN cũng có nữa đó các bạn 😀 Trang chủ: https://www.openstreetmap.org Tuy nhiên, để implement OSMap lên website, ta cần fải dùng thông qua 1 library có tên là LeafletJS. Và mình sẽ hướng dẫn + walkthough 1 vài thứ nhé. 1/ Tải library/thư viện LeafletJSTruy cập vào đây để tải về nhé bạn, or dùng CDN mà LeafletJS free: https://leafletjs.com/download.html Mình thì sẽ sử dụng CDN cho nhanh và tiện nhé 😀 2/ Import Library và Init Map đơn giảnMình import css/js này: Sau đó tạo ra 1 cái container và set ID cho nó nhé: Nhớ là cái container của cái map, nó fải có height cụ thể (cứng or dynamic %): Rồi, init thôi với đoạn JS như sau, make sure là page fải onload rồi mới init nhé :D, init kèm 1 vài options nhỏ nà: var mapObj = null; var defaultCoord = [10.7743, 106.6669]; // coord mặc định, 9 giữa HCMC var zoomLevel = 13; var mapConfig = { attributionControl: false, // để ko hiện watermark nữa center: defaultCoord, // vị trí map mặc định hiện tại zoom: zoomLevel, // level zoom }; window.onload = function() { // init map mapObj = L.map('sethPhatMap', {attributionControl: false}).setView(defaultCoord, zoomLevel); // add tile để map có thể hoạt động, xài free từ OSM L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mapObj); };Map sẽ hiện ra như sau: 3/ Thêm Marker và click vào Marker hiện PopupTa chỉ cần dùng hàm marker thôi như sau, tạo xong nhớ add vào cái mapObj: L.marker([lat, lng], objOptions).addTo(mapObj);Tạo 1 marker cơ bản và gán vào map nè: L.marker([10.7743, 106.6669]).addTo(mapObj);Test và nó sẽ hiện ntn nè: Như các bạn đã biết, marker vậy chả biết dc gì nhiều, fải zoom to nhất có khi mới rõ chỗ. Vậy nên Map nào nó cũng có cái Popup đi kèm. Ta fải nói là Marker và Popup là đôi bạn thân 😀 Tạo popup thì như sau (còn 1 cách rất nhanh nữa, nhưng sẽ ko styling dc nên mình sẽ ko giới thiệu nha): L.popup(objOption, layer);Với cái marker mặc định đó, tạo popup và gán cho nó như sau: Hello World Nà"); marker.bindPopup(popup); Kết quả khi click vào marker nè: Ngon nhé, mà nếu bạn muốn marker hiển liền cái popup, sử dụng hàm này nè: marker.openPopup();Bonus: Tạo tooltip và gán vào marker (tooltip là 1 loại UI khi ta rê chuột vào, nó sẽ hiện 1 dialog kèm text gì đó của chúng ta), tooltip cũng ko styling dc như Popup vậy nên mình ko tạo 1 cách dài dòng như trên nhé: marker.bindTooltip("Tooltip nà");Khi các bạn rê chuột vào marker, dòng text kia sẽ hiện lên ngay 😀 Okay, vậy mình làm ra 1 function để add 1 marker cơ bản kèm popup nhé 😀 function addMarker(coord, popupContent, popupOptionObj, markerObj) { if (!popupOptionObj) { popupOptionObj = {}; } if (!markerObj) { markerObj = {}; } var marker = L.marker(coord, markerObj).addTo(mapObj); // chơi liều @@ var popup = L.popup(popupOptionObj); popup.setContent(popupContent); // binding marker.bindPopup(popup); return marker; }4/ Tập tành styling cái Popup giải tríThêm một chút style để hiện hình bên trái và một số text bên fải nà: .map-popup-content { width: 300px; } .map-popup-content .left { float:left; width: 40%; } .map-popup-content .left img { width:100%; height:100px; margin: -15px 0 -15px -20px; border-radius:12px; } .map-popup-content .right { float:left; width: 60%; } .clearfix { clear:both; }Sau đó thêm class vào popupObject như sau và kết quả cuối (Hard code HTML hơi dài xíu nha @@): // tạo marker var popupOption = { className: "map-popup-content", }; var marker = addMarker([10.7743, 106.6669], `Hehe, ngon nhé. Các bạn muốn style sao tùy ý các bạn nhé 😀 5/ Kết luậnVới 1 số info cơ bản như trên, sau bài viết này, bạn đã có thể sử dụng OpenStreetMap một cách cơ bản, gồm:
Full code demo cho bài này: https://gist.github.com/sethsandaru/db5f00bdf14476416136143d9bb3d860 Và những bài sau, mình sẽ hướng dẫn các bạn làm:
Thank you for reading! Geolocation là một API mới của HTML5 cho phép bạn truy cập vào vị trí hiện tại của bạn trên thiết bị. Geolocation gồm 3 phương thức: navigator.geolocation.getCurrentPosition(); navigator.geolocation.watchPosition(); navigator.geolocation.clearWatch()Lấy vị trí hiện tại sử dụng GeolocationĐể lấy vị trí hiện tại ta có thể sử dụng phương thức
Leaflet là gì?Leaflet là một thư viện JavaScript mã nguồn mở cung cấp các tương tác với bản đồ thân thiện với các thiết bị di động. Cũng như Google Map API. Nhưng Leaflet được thiết kế đơn giản, hiệu quả và dễ sử dụng:
Với API của Leaflet ta có thể tương tác với bản đồ một cách linh hoạt hơn. Sau đây là ví dụ làm việc đơn giản với Leaflet var map = L.map('map', { center: [latitude, longitude], zoom: 16 }); var tile = 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png'; L.tileLayer(tile, { key: '760506895e284217a7442ce2efe97797', styleId: 103288, maxZoom: 16 }).addTo(map); var maker = L.marker([latitude, longitude]).addTo(map); marker.bindPopup('Tiêu đề... ').openPopup();Ngoài ra, bạn có thể vào những liên kết sau để tìm hiểu thêm về Geolocation và Leaflet:
|