> [Javascript 初學](https://hackmd.io/@Yung-Pei/ByXb_VMn5)
## **JSON**
<style>
.red {
color: red;
}
</style>
#### 定義：JavaScript Object Notation (JSON) 是資料交換格式。是一種以<span class="red">文字</span>為基礎的方式來表示 JavaScript 物件文字、陣列和純量資料。

JSON 包含的資料類型：
1. 字串
2. 數字
3. 數字
4. Null
5. 物件
6. 陣列

### 字串
#### 由 Unicode 字元組成，並使用反斜線（\）遁離。

{ "name" : "Jones" }

### 數字
#### 編號遵循 JavaScript 的雙精度浮點數格式。

{
  "number_1" : 210,
  "number_2" : 215,
  "number_3" : 21.05,
  "number_4" : 10.05
}

### 數字
#### 布林值可指定為 ==true== 或 ==false==。布林值不會用引號括住，系統會將其視為字串值。

{ "AllowPartialShipment" : false }

### Null
#### 空白值。沒有指定給索引鍵的值時，可以將它視為 null。

{ "Special Instructions" : null }

### 物件
<style>
.red {
color: red;
}
</style>
#### 一組在 {} (大括號) 之間插入的名稱或值組。索引鍵必須是字串且應以<span class="red">逗號</span>分隔。

{
  "Influencer" :   { "name" : "Jaxon" ,  "age" : "42" ,  "city" ,  "New York" }
}

### 陣列
#### 排序的值集合。在 JSON 中，陣列值必須是字串、數字、物件、陣列、布林值或 null 類型。

{

"Influencers" :   [ 
{
 "name" : "Jaxon", 
 "age" : 42, 
 "Works At" : "Tech News"
}

{
 "name" : "Miller", 
 "age" : 35
 "Works At" : "IT Day"
}

] 
}

## **GeoJSON**
<style>
.red {
> color: red;
}
.blue{
color: blue;
}
</style>
#### 定義：基於<span class="red">JSON</span>的<span class="red">地理空間</span>數據交換格式。表示有關地理要素、屬性和它們的空間範圍的數據。
使用唯一地理坐標參考系統**WGS1984和十進位度單位**，一個GeoJSON對象可以是Geometry, Feature或者FeatureCollection.

其幾何對象包括有<span class="blue">點</span>（表示地理位置）、<span class="blue">線</span>（表示街道、公路、邊界）、<span class="blue">多邊形</span>（表示國家、省、領土），以及由以上類型組合成的複合幾何圖形。

#### 點

{
    "type": "Point", 
    "coordinates": [30, 10]
}

#### 線

{
    "type": "LineString", 
    "coordinates": [
        [30, 10], [10, 30], [40, 40]
    ]
}

#### 多邊形

{
    "type": "Polygon", 
    "coordinates": [
        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
    ]
}

## **自製簡易的 Taiwan Map**
#### 以臺灣各縣市<span class="red">確診人數累計數量</span>為例。

程式碼：GeoJOSN（taiwan.js）

###### 在 vusual studio code 環境製作，使用 leaflet 讀取 GeoJSON 檔

### Basic Map

const map = L.map('map', {
    tap: false,
    center: [24.881990044416405, 121.2664629984844],
    zoom: 8,
    maxZoom: 18,
    fullscreenControl: true,
    fullscreenControlOptions: { // optional
       	title:"Show me the fullscreen !",
       	titleCancel:"Exit fullscreen mode"
    },
    layers:[L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })]
});

### Adding Layers

const baselayers = {
    'OpenStreetMap.Mapnik': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    'OpenStreetMap.DE': L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'),
    'OpenStreetMap.CH': L.tileLayer('https://tile.osm.ch/switzerland/{z}/{x}/{y}.png'),
    'OpenStreetMap.France':  L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'),
    'OpenStreetMap.HOT': L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
    'OpenStreetMap.BZH': L.tileLayer('https://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'),
    'OpenTopoMap': L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png')
};


### Adding Some Color

// get color depending on population density value
function getColor(d) {
    return d > 2000000 ? '#800026' :
        d > 1000000  ? '#BD0026' :
        d > 500000  ? '#FC4E2A' :
        d > 50000   ? '#FD8D3C' : '#FFEDA0';
}

##### 接下來，為 GeoJSON 層定義一個 function，使 fillColor 依賴於 feature.properties.density 屬性，稍微調整外觀並添加虛線描邊的漂亮效果。

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.TOTAL)
    };
}


### Adding Interaction
##### Mouseover 事件：當滑鼠移動到某一區塊，邊框會變成灰黑色。

function highlightFeature(e) {
    const layer = e.target;
    
    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    layer.bringToFront();

    info.update(layer.feature.properties);
}


##### Mouseover 事件：當滑鼠移動到某一區塊，會顯示「該縣市確診累計數量」。

info.update = function (props) {
    const contents = props ? `<b>${props.COUNTY}</b><br />${props.TOTAL} people` : 'Hover over a county';
    this._div.innerHTML = `<h4>各縣市確診累計數量</h4>${contents}`;
	};

info.addTo(map);


## 參考資料
* [ Leaflet](https://leafletjs.com/examples/choropleth/)
* [GeoJSON 維基百科](https://zh.wikipedia.org/zh-tw/GeoJSON)
* [Json 与GeoJson](https://blog.csdn.net/qq_36330643/article/details/72841949)
* [JSON 的定義](https://www.oracle.com/tw/database/what-is-json/)