---
title: 'Geojson with Leaflet'
disqus: hackmd
---

Geojson with Leaflet
===

## Table of Contents

[TOC]

## 線上geojson繪製

可以線上直接繪製想要的圖形或是提供geojson內容，都可以即時觀看效果。

1. 連結至 http://geojson.io/
2. 繪製簡易圖形，取得geojson檔
3. 提供geojson內容，繪製圖形

Using GeoJSON with Leaflet
---
資料來源：https://leafletjs.com/examples/geojson/

**將geojson弄上leaflet**

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

> geojsonFeature是geojson資料，其實這樣就可以繪製了。再設定相關的style。

**加上style**

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

L.geoJSON(myLines, {
    style: myStyle
}).addTo(map);

> 可設定顏色等等樣式

Geojson檔過大解決方案
---
> 使用台灣的鄉鎮geojson，發現檔案過大，造成網頁loading過久無回應。這該怎麼辦是好呢？

**情境**
>因為鄉鎮圖我只要相關區塊，所以我選擇讓他區塊還在，但線段可能就沒有那麼精細。這時候就有個神奇的工具出現惹

**解決**
>使用mapshaper縮小檔案

1. 連結到https://mapshaper.org/
2. 上傳覺得過大的geojson檔
3. 壓縮到自己可接受的範圍(可線上看被平滑的線條)
4. 另存想要存的檔案格式

## Appendix and FAQ

:::info
**Find this document incomplete?** Leave a comment!
:::

###### tags: `leaflet` `geojson`