Bản đồ cập nhật màu theo tiêu chí xã hội

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>
Close