Bản đồ cập nhật màu theo tiêu chí xã hội. Ví dụ: tại đây
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://vietnam.diagioi.gov.vn:8080/jquery/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://vietnam.diagioi.gov.vn:8081/api/api.js"></script>
<link rel="stylesheet" href="http://vietnam.diagioi.gov.vn:8081/api/style.css">
<script type="text/javascript">
var getRandomColor = function () {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var data1 = {
token: "your api key",
scope: '51',
name: 'Quảng Ngãi',
drilldown: true,
featureClass: 'kgtinh_diaphan',
kghuyen_diaphan: {
"522": {
name: "Thành phố Quảng Ngãi",
yearFounded: "2000",
style: {
fillColor: 'red', //màu tô
strokeColor: '', //màu viền
fillOpacity: 0.3, //độ trong suốt
strokeWidth: 1 //độ rộng viền
}
},
"524": {
name: "Huyện Bình Sơ",
yearFounded: "2000",
style: {
fillColor: 'red',
strokeColor: '',
fillOpacity: 0.7,
strokeWidth: 1
}
},
"525": {
name: "Huyện Trà Bồng",
yearFounded: "2000",
style: {
fillColor: '#690F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"526": {
name: "Huyện Tây Trà",
yearFounded: "2000",
style: {
fillColor: '#690F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"528": {
name: "Huyện Tư Nghĩa",
yearFounded: "2000",
style: {
fillColor: '#690F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"529": {
name: "Huyện Sơn Hà",
yearFounded: "2000",
style: {
fillColor: '#690F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"530": {
name: "Huyện Sơn Tây",
yearFounded: "2000",
style: {
fillColor: '#690F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
}
}
}
var data2 = {
token: "your token key",
scope: '51',
name: 'Quảng Ngãi',
drilldown: true,
featureClass: 'kgtinh_diaphan',
kghuyen_diaphan: {
"522": {
name: "Thành phố Quảng Ngãi",
yearFounded: "2000",
style: {
fillColor: 'yellow', //màu tô
strokeColor: '', //màu viền
fillOpacity: 0.3, //độ trong suốt
strokeWidth: 1 //độ rộng viền
}
},
"524": {
name: "Huyện Bình Sơ",
yearFounded: "2000",
style: {
fillColor: 'blue',
strokeColor: '',
fillOpacity: 0.7,
strokeWidth: 1
}
},
"525": {
name: "Huyện Trà Bồng",
yearFounded: "2000",
style: {
fillColor: '#630C13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"526": {
name: "Huyện Tây Trà",
yearFounded: "2000",
style: {
fillColor: '#690E10',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"528": {
name: "Huyện Tư Nghĩa",
yearFounded: "2000",
style: {
fillColor: '#690F24',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"529": {
name: "Huyện Sơn Hà",
yearFounded: "2000",
style: {
fillColor: '#650F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
},
"530": {
name: "Huyện Sơn Tây",
yearFounded: "2000",
style: {
fillColor: '#190F13',
strokeColor: '',
fillOpacity: 0.8,
strokeWidth: 1
}
}
}
}
var map = new AdminMap('map', data1);
var onChange = function (type) {
if (type == 'danso')
map.updateChoropleth(data1);
else
map.updateChoropleth(data2);
}
</script>
</head>
<body>
<div class="">
<h3>Ví dụ: Bản đồ cập nhật màu theo tiêu chí xã hội</h3>
</div>
<div id="map" class="map1" style="width:1024px; height:500px;margin-top:10px !important;"></div>
<ul class="breadcrumb" style="width:995px;">
<li>
<a href="#" onclick="viewCountry()">Toàn quốc</a>
</li>
<li id="province" style="display:none">
<a href="#" onclick="viewProvince()">
<span id="provincec">Tỉnh</span>
</a>
</li>
<li id="distric" style="display:none">
<a href="#">
<span id="districc" ;>Huyện</span>
</a>
</li>
</ul>
<div>
<label for="cmbType">Tô màu theo: </label>
<select id="cmbType" onchange="onChange(this.value)" style="width:200px;" value="dientich">
<option value="danso" selected>Dân số</option>
<option value="dientich">Diện tích</option>
</select>
</div>
</body>
</html>