---
title: 'leaflet, 臺灣分區圖跟colorbar'
disqus: hackmd
---
leaflet.js 臺灣分區圖跟colorbar
===
<https://leafletjs.com/>
使用JS語法
## Table of Contents
[TOC]
## 使用情境
> 今天想對於地區分區地圖做colorbar相關互動, 並結合同事給的csv檔結合colorbar [name=Kate Ding]
> Interactive Choropleth Map(互動地區地圖)
## First - 產地圖
首先使用leaflet.js產生地圖，並定位於臺灣
> leaflet
```gherkin=
this.map = L.map('map').setView([23.473875, 120.982024], 8);
this.tileLayer = L.tileLayer("",
//'http://{s}.tile.osm.org/{z}/{x}/{y}.png',//中文地圖
{
maxZoom: 8,
minZoom: 0,
bounds:[
[19.715015145512087, 117.49902343749999],
[26.892679095908164, 123.969482421875]
],
attribution: ''
// attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
```
## Second - 鄉鎮geojson呈現於地圖上
取得臺灣鄉鎮geojson檔，並呈現於地圖上
**leaflet**
```gherkin=
draw_partition(geojson) {
let a = L.geoJSON(geojson,{
style: function(feature) {
const data = {"weight": 1, "opacity": 0.8, fillOpacity: 0.5};
return data;
}.bind(this),
}).addTo(this.map);
},
```
>這樣就會弄上鄉鎮圖上去了唷!!!如果想再切乾淨一點，可以把style的function再拉出去
**取得geojson檔**
```gherkin=
axios.get(this.jsonurl)
.then(function(e) {
//叫leaflet做事
this.draw_partition(e.data);
}.bind(this));
```
> this.jsonurl為檔案放置路徑，this.draw_partition(e.data)是上面leaflet
## Third - 取得colorbar
產生colorbar, 但必須先取得csv檔
**leaflet**
```gherkin=
get_colorbar() {
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info map_legend'),
grades = [1, 0.8, 0.6, 0.4, 0.2, "0", -0.2, -0.4, -0.6, -0.8, -1],
labels = [];
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
grades[i + 1] ? '<i style="background:' + this.getColor(grades[i] - 0.01) + '"></i> ' +
grades[i] + ' ~ ' + grades[i + 1] + '<br>' : '';
}
return div;
}.bind(this);
legend.addTo(this.map);
},
```
>L.control and L.DomUtil.create用法
**Adding Some Color**
```gherkin=
function getColor(d) {
return d < -0.8 ? '#0000CC' :
d < -0.6 ? '#0000FF' :
d < -0.4 ? '#5555FF' :
d < -0.2 ? '#9999FF' :
d < 0 ? '#CCCCFF' :
d < 0.2 ? '#FFC8B4' :
d < 0.4 ? '#FFA488' :
d < 0.6 ? '#FF7744' :
d < 0.8 ? '#FF5511' :
d < 1 ? '#FF0000' :
'gray';
}
```
>其實到這裡就已經有出現colorbar
**Css**
```gherkin=
.map_legend {
line-height: 16px;
color: #555;
z-index: 2;
padding: 6px 8px;
background: white !important;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.map_legend i {
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
/* opacity: 0.7; */
z-index:2;
}
```
> 這裡我使用i去建立方塊
## Forth - colorbar隨著csv資料更動
其實以上就已經可以出現colorbar,但因為我要讓colorbar隨著csv檔更動，所以再做一些處理。
**leaflet**
```gherkin=
get_colorbar(csv_data) {
let legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
let div = L.DomUtil.create('div', 'map_legend_info map_legend');
let legent_count = csv_data.length;
for(let i=0; i < csv_data.length; i++){
div.innerHTML +=
'<i style="background:rgb(' + csv_data[i] + '");></i>'+
i + '<br>';
}
return div;
}.bind(this);
legend.addTo(this.map);
},
```
> 因為csv給的顏色資料都有惹就不用上個get_color function
**取得CSV檔**
```gherkin=
get_csv() {
this.csv_url = "static/ColorMapping20.csv"
axios.get(this.csv_url)
.then(function(e) {
let csv_data_str = e.data;
let csv_data = csv_data_str.split("\n");
this.get_colorbar(csv_data);
}.bind(this));
}
```
>這份csv檔是顏色資料，根據資料
**色碼使用RGB**
```gherkin=
selector.style.color = "rgb(155, 102, 102)";
or
selector.style.color = "#"+(155).toString(16)+(102).toString(16)+(102).toString(16);
```
> 但要先處理色碼RGB怎麼顯示, 但後來我使用CSS處理
## Appendix and FAQ
:::info
**Find this document incomplete?** Leave a comment!
:::
###### tags: `leaflet` `colorbar` `geojson` `csv`
Sign in with Wallet
Connect another wallet