Hướng dẩn sử dụng Leaflet cơ bản

Table of ContentsCHƯƠNG 1: HƯỚNG DẨN NHANH LEAFLET..............................................................................2

1.1) Chỉnh lại website với các thẻ, css, div..................................................................................2

1.2) Thiết lập bản đồ...................................................................................................................2

1.3) Đánh dấu một điểm, vẽ vòng trong, tô màu một khu vực....................................................3

1.3.1) Đánh dấu 1 điểm trên bản đồ..............................................................................................3

1.3.2) Vẽ 1 vòng tròn trên bản đồ.................................................................................................3

1.3.3) Vẽ 1 khối với danh sách các tọa độ......................................................................................3

1.4) Làm việc với Popup.............................................................................................................4

1.4.1) Thêm Popup lên các điểm, các vòng tròn, các khối chọn ở trên........................................4

1.4.2) Thêm Popup tại một tọa độ nào đó.....................................................................................4

1.5) Xử lý các sự kiện khác.........................................................................................................4

CHƯƠNG 2: LEAFLET TRÊN MOBILE.........................................................................................6

2.1) Chỉnh sửa lại trang web với css................................................................................................6

CHƯƠNG 3: CÁC ĐÁNH DẤU VÀ CÁC TÙY CHỈNH CÁC ICONS..............................................7

3.1) Thay đổi các ảnh......................................................................................................................7

3.2) Code tạo icon............................................................................................................................7

3.3) Xác định 1 lớp(class) các icons.................................................................................................7

CHƯƠNG 4: SỬ DỤNG GEOJSON VỚI LEAFLET........................................................................9

4.1) GeoJSON layer...........................................................................................................................9

4.2) Options.....................................................................................................................................9

4.2.1) Css style..............................................................................................................................9

CHƯƠNG 5: TƯƠNG TÁC CHOROPLETH MAP........................................................................12

5.1) Data Source............................................................................................................................12

5.2) Cơ bản về States Map..............................................................................................................12

5.3) Thêm các màu.........................................................................................................................13

5.4) Thêm các tương tác.................................................................................................................15

5.4.1 Lắng nghe sự kiện mouseover............................................................................................15

5.4.2) Hàm reset khi chuột di chuyển ra khỏi...............................................................................16

5.4.3) Hàm lắng nghe sự kiện click thì sẻ zoom map....................................................................16

Châu Minh Tuấn Email: [email protected] Trang 1

mailto:[email protected]

5.4.4) Chúng ta bắt đầu thêm các hàm lắng nghe ở trên vào các bang trên bản đồ bằng hàm onEachFeature............................................................................................................................16

5.5) Thay đổi một ít các thông tin trong các điều khiển................................................................17

CHƯƠNG 6: CÁC LỚP(LAYER) GROUPS VÀ CÁC LỚP ĐIỀU KHIỂN( LAYERS CONTROL)..........................................................................................................................................................21

6.1) Nhóm các lớp lại.....................................................................................................................21

6.2) Điều khiển các lớp..................................................................................................................21



HƯỚNG DẨN SỬ DỤNG LEAFLET

Leaflet là một thư viện Javascript mã nguồn mở cho việc tương tác với bản đồ. Nó được

phát triển bởi Vladimir Agafonkin. Leaflet thì được thiết kế đơn giản, nhanh chóng và dể

sử dụng. Nó sử dụng được trên môi trường Desktop,Mobile vì nó sử dụng HTML5,

CSS3.

CHƯƠNG 1: HƯỚNG DẨN NHANH LEAFLET

1.1) Chỉnh lại website với các thẻ, css, div

Trước khi viết code các bạn phải import Css, Javascript của Leaflet và 1 thẻ div với

id="map" trong trang web

Css

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />



Javascript

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

Div

<div id="map"></div>

Xác định chiều cao cho map với css

#map { height: 180px; }

1.2) Thiết lập bản đồ

Đầu tiên chúng ta phải khởi tạo map và cài đặt một tọa độ địa lý và zoom cho việc

hiển thị

var map = L.map('map').setView([51.505, -0.09], 13);

Thêm các đường vẻ của map

Bạn lên trang http://account.cloudmade.com/user/register để đăng ký 1 tài khoản và get key API.



http://account.cloudmade.com/user/register

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',

maxZoom: 18}).addTo(map);

Lưu ý: các thiết lập phải nằm sau Div và leaflet.js

1.3) Đánh dấu một điểm, vẽ vòng trong, tô màu một khu vực

Bên cạnh lớp vẽ có sẳn mình get trên cloudmade.com xuống, mình có thể dể dàng

thêm vào map của mình các điểm được đánh dấu, các đường kẻ,các khối chọn, các

vòng tròn, các popups.

1.3.1) Đánh dấu 1 điểm trên bản đồ

var marker = L.marker([51.5, -0.09]).addTo(map);

Trong dấu ngoặc vuông là tọa độ của điểm cần đánh dấu

1.3.2) Vẽ 1 vòng tròn trên bản đồ

var circle = L.circle([51.508, -0.11], 500, {

color: 'red',

fillColor: '#f03',

fillOpacity: 0.5}).addTo(map);

1.3.3) Vẽ 1 khối với danh sách các tọa độ


Tọa đọ tâm hình tròn

Bán kính tính từ tâm ra(500 mét theo tỉ lộ của bản đồ)Màu đường viền

Màu bên trong vòng tròn

Độ mờ ở bên trong vòng tròn


var polygon = L.polygon([

[51.509, -0.08],

[51.503, -0.06],

[51.51, -0.047]]).addTo(map);

1.4) Làm việc với Popup

1.4.1) Thêm Popup lên các điểm, các vòng tròn, các khối chọn ở trên

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

circle.bindPopup("I am a circle.");polygon.bindPopup("I am a polygon.");

* openPopup(): mặt định popup đó mở, không cần click vào

1.4.2) Thêm Popup tại một tọa độ nào đó

var popup = L.popup()

.setLatLng([51.5, -0.09])

.setContent("I am a standalone popup.") .openOn(map);

1.5) Xử lý các sự kiện khácMỗi lần người dùng click, zoom trên bản đồ các đối tượng sẻ gửi ra một sự kiện

tương ứng

Ví dụ bên dưới là sẻ gửi ra tọa độ khi người dùng click trên bản đồ



function onMapClick(e) {

alert("You clicked the map at " + e.latlng);

} map.on('click', onMapClick);

và như vậy mình có thể gán các xử lý cho từng sự kiện

var popup1 = L.popup();

function onMapClick(e) {

popup1

.setLatLng(e.latlng)

.setContent("You clicked the map at " + e.latlng.toString())

.openOn(map);

}

map.on('click', onMapClick);



CHƯƠNG 2: LEAFLET TRÊN MOBILE

2.1) Chỉnh sửa lại trang web với css

body {

padding: 0;

margin: 0;

}

html, body, #map {

height: 100%;}

Chúng ta phải báo cho trình duyệt của mobile biết để vô hiệu hóa những phần không cần thiết

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Khởi tạo bản đồ giống như ở trên

var map = L.map('map');

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',

maxZoom: 18

}).addTo(map);

Xác định tọa độ hiện tại

map.locate({setView: true, maxZoom: 16});



http://account.cloudmade.com/register

CHƯƠNG 3: CÁC ĐÁNH DẤU VÀ CÁC TÙY CHỈNH CÁC ICONS

3.1) Thay đổi các ảnh

Để thay đổi một biểu tượng trên bản đồ chúng ta cần 2 ảnh, 1 ảnh thật và 1 ảnh đổ bóng

của ảnh thật đó. Leaflet logo có thể dùng 4 ảnh, 3 ảnh thật và 1 ảnh đổ bóng

3.2) Code tạo icon

Mình sẻ tạo với icon màu xanh lá cây trước.

var greenIcon = L.icon({

iconUrl: 'leaf-green.png',

shadowUrl: 'leaf-shadow.png',

iconSize: [38, 95], // size of the icon

shadowSize: [50, 64], // size of the shadow

iconAnchor: [22, 94], // point of the icon which will correspond to marker's location

shadowAnchor: [4, 62], // the same for the shadow

popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor});

Đặt icon trên lên bản đồ

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

3.3) Xác định 1 lớp(class) các iconsChúng ta cần tạo ra một lớp icon cho kế thừa từ L.Icon

var LeafIcon = L.Icon.extend({

options: {

shadowUrl: 'leaf-shadow.png',

iconSize: [38, 95],

shadowSize: [50, 64],

iconAnchor: [22, 94],

shadowAnchor: [4, 62],

popupAnchor: [-3, -76]

}});

Dùng hàm trên để tạo ra các icon xanh, đỏ, cam

var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),

redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

Ở đây chúng ta sẻ dùng từ khóa new để yêu cầu một Leaflet Icon.Châu Minh Tuấn Email: [email protected] Trang 8


Để thuận tiện cho việc khỏi tạo các icon thì có thể dùng

L.icon = function (options) {

return new L.Icon(options);};

Sau đó đưa các icon này vào bản đồ của mình với các dòng lệnh sau

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");

L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");



CHƯƠNG 4: SỬ DỤNG GEOJSON VỚI LEAFLET

GeoJSON là một định dạng mã hóa cho một loạt các cấu trúc dữ liệu địa lý. Một đối

tượng GeoJSON có thể đại diện cho một hình học, một tính năng hoặc một tập các tính

năng. GeoJSON hổ trợ các loại hình sau: 1 điểm, 1 đường thẳng, đa giác, đa điểm, đa

cạnh….

Leaflet hổ trợ tất cả các loại GeoJSON. Feature và FeatureCollections cho phép bạn mô

tả các thực thể (features) và thuộc tính(properties)

var geojsonFeature = {

"type": "Feature",

"properties": {

"name": "Coors Field",

"amenity": "Baseball Stadium",

"popupContent": "This is where the Rockies play!"

},

"geometry": {

"type": "Point",

"coordinates": [-104.99404, 39.75621]

}};

4.1) GeoJSON layer

Đối tượng GeoJSON thì được thêm vào map thông qua GeoJSON layer. Code bên dưới

cho thấy chúng ta tạo và thêm nó vào bản đồ

L.geoJson(geojsonFeature).addTo(map);

Chúng ta có thể thêm nhiều thực thể hình ảnh(features) vào GeoJSON layer

var myLayer = L.geoJson().addTo(map);myLayer.addData(geojsonFeature);

4.2) Options

4.2.1) Css style

Tùy chọn style này có thể dùng cho 2 thực thể

var myLines = [{

"type": "LineString",



"coordinates": [[-100, 40], [-105, 45], [-110, 55]]

}, {

"type": "LineString",

"coordinates": [[-105, 40], [-110, 45], [-115, 55]]

}];

var myStyle = {

"color": "#ff7800",

"weight": 5,

"opacity": 0.65

};

L.geoJson(myLines, {

style: myStyle}).addTo(map);

Code ở trên chúng ta tạo ra 2 thực thể là 2 đường với các tọa độ. Sau đó chúng ta sẻ thêm style và thực thể đó vào GeoJSON cuối cũng là thêm vào bản đồ

Hoặc với các hình tứ giác

var states = [{

"type": "Feature",

"properties": {"party": "Republican"},

"geometry": {

"type": "Polygon",

"coordinates": [[

[-104.05, 48.99],



[-97.22, 48.98],

[-96.58, 45.94],

[-104.03, 45.94],

[-104.05, 48.99]

]]

}

}, {

"type": "Feature",

"properties": {"party": "Democrat"},

"geometry": {

"type": "Polygon",

"coordinates": [[

[-109.05, 41.00],

[-102.06, 40.99],

[-102.03, 36.99],

[-109.04, 36.99],

[-109.05, 41.00]

]]

}

}];

L.geoJson(states, {

style: function(feature) {

switch (feature.properties.party) {

case 'Republican': return {color: "#ff0000"};

case 'Democrat': return {color: "#0000ff"};

}

}}).addTo(map);





CHƯƠNG 5: TƯƠNG TÁC CHOROPLETH MAP

Trong phần này chúng ta tạo ra các màu bao quanh các bang trong nước Mỹ. Mình chưa

thấy có thể tô màu cho các nước khác (vì không có đủ các tọa độ). Bạn nào có thể làm

được cho các nước khác và Việt Nam thì email mình biết với

[email protected]

5.1) Data Source

Các dữ liệu về các bang cùng tọa độ được lưu dưới dạng JSON và nằm trong file theo

đường dẩn http://leafletjs.com/examples/us-states.js . Các bạn có thể coi thêm cấu trúc của

JSON tại http://json.org/example

Dưới đây là cấu trúc trên website của Leafletjs

{

"type": "Feature",

"properties": {

"name": "Alabama",

"density": 94.65

},

"geometry": ...

...}

5.2) Cơ bản về States Map

Ban đầu chúng ta cũng lấy các ảnh về bản đồ tại địa chỉ CloudMade với StyleID: 22677,

với style này chúng ta sẻ nhận được bản đồ với khung nền, không có nhiều các hìng về

đường phố

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {

key: ...,

attribution: ...,

styleId: 22677



http://json.org/example

http://leafletjs.com/examples/us-states.js


}).addTo(map);

L.geoJson(statesData).addTo(map);

Cũng giống như các phần trên với Key và attribution.

Lưu ý:các bạn nhớ phải đưa file chứa tọa độ ở trên vào thì mới cho ra được như hình dưới

5.3) Thêm các màu

Mỗi màu biểu thị cho mật độ dân số, các thông số này có trong file us-state.js mà tôi có

đề cập bên trên

function getColor(d) {

return d > 1000 ? '#800026' :

d > 500 ? '#BD0026' :

d > 200 ? '#E31A1C' :

d > 100 ? '#FC4E2A' :

d > 50 ? '#FD8D3C' :



d > 20 ? '#FEB24C' :

d > 10 ? '#FED976' :

'#FFEDA0';

}

function style(feature) {

return {

fillColor: getColor(feature.properties.density),

weight: 2,

opacity: 1,

color: 'white',

dashArray: '3',

fillOpacity: 0.7

};

}

L.geoJson(statesData, {style: style}).addTo(map);

Chúng ta sẻ lấy dữ liệu từ file statesData và Color để tạo thành cấu trúc JSON và thêm

vào Map chúng ta sẻ thu được hình bên dưới



5.4) Thêm các t ng tácươ

5.4.1 Lắng nghe sự kiện mouseover

Hàm này sẻ tạo border cho các bang mà bạn di chuyển chuột đến

function highlightFeature(e) {

var layer = e.target;

layer.setStyle({

weight: 5,

color: '#666',

dashArray: '',

fillOpacity: 0.7

});

if (!L.Browser.ie && !L.Browser.opera) {

layer.bringToFront();



}

}

Lưu ý: hàm e.target không hổ trợ trên IE và Opera

5.4.2) Hàm reset khi chuột di chuyển ra khỏi

function resetHighlight(e) {

geojson.resetStyle(e.target);}

5.4.3) Hàm lắng nghe sự kiện click thì sẻ zoom map

function zoomToFeature(e) {

map.fitBounds(e.target.getBounds());}

5.4.4) Chúng ta bắt đầu thêm các hàm lắng nghe ở trên vào các bang trên bản đồ bằng hàm onEachFeature

function onEachFeature(feature, layer) {

layer.on({

mouseover: highlightFeature,

mouseout: resetHighlight,

click: zoomToFeature

});

}

geojson = L.geoJson(statesData, {

style: style,

onEachFeature: onEachFeature}).addTo(map);



Khi chúng ta rê chuột vào sẻ có border xung quanh

5.5) Thay đổi một ít các thông tin trong các điều khiển

http://leafletjs.com/reference.html#icontrol

Chúng ta sẻ sử dụng popup

var info = L.control();

info.onAdd = function (map) {

this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"

this.update();

return this._div;

};

// method that we will use to update the control based on feature properties passed

info.update = function (props) {

this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?

'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'

: 'Hover over a state');

};

info.addTo(map);

Đưa hàm này vào trong hàm lắng nghe sự kiện mouseover của chuột



http://leafletjs.com/reference.html#icontrol

function highlightFeature(e) {

...

}

function resetHighlight(e) {

...

info.update();}

Chúng ta sẻ nhìn thấy thông tin bên trên và góc phải của hình

Sau đó chúng ta thêm các Css cho map

.info {

padding: 6px 8px;

font: 14px/16px Arial, Helvetica, sans-serif;

background: white;

background: rgba(255,255,255,0.8);

box-shadow: 0 0 15px rgba(0,0,0,0.2);

border-radius: 5px;

}

.info h4 {

margin: 0 0 5px;

color: #777;}



Bây giờ thì hoàn thiện hơn rồi

Hiện thị thông tin về bản màu cùng với các thông số chú thích

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),

grades = [0, 10, 20, 50, 100, 200, 500, 1000],

labels = [];

// loop through our density intervals and generate a label with a colored square

for each interval

for (var i = 0; i < grades.length; i++) {

div.innerHTML +=

'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +

grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');

}

return div;

};

legend.addTo(map);

.legend {

line-height: 18px;

color: #555;



}

.legend i {

width: 18px;

height: 18px;

float: left;

margin-right: 8px;

opacity: 0.7;}

Hình được thể hiện ở bên phải góc dưới của ảnh



CHƯƠNG 6: CÁC LỚP(LAYER) GROUPS VÀ CÁC LỚP ĐIỀU KHIỂN( LAYERS CONTROL)

6.1) Nhóm các lớp lại

Giả sử chúng ta có nhiều lớp thành phố như là thành phố littleton, denver, aurora, golden. Giờ chúng ta cần nhóm chúng lại thành 1 nhóm là thành cities để tiện xử lý

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),

denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),

aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'), golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

Giờ chúng ta có thể dùng lớp cities để thêm vào bản đồ

6.2) Điều khiển các lớp

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/API-

key/{styleId}/256/{z}/{x}/{y}.png',

cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery

© 2011 CloudMade';

var minimal = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution:

cloudmadeAttribution}),

midnight = L.tileLayer(cloudmadeUrl, {styleId: 999, attribution:

cloudmadeAttribution}),

motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561, attribution:

cloudmadeAttribution});

var map = L.map('map', {

center: new L.LatLng(39.73, -104.99),

zoom: 10,

layers: [minimal, motorways, cities]

});

var baseMaps = {

"Minimal": minimal,

"Night View": midnight





};

var overlayMaps = {

"Motorways": motorways,

"Cities": cities};

L.control.layers(baseMaps, overlayMaps).addTo(map);

Documents

Hướng dẩn sử dụng Leaflet cơ bản