tsuz/README.md

## README.md

      
    Raw
  

              README.md
            
          
達成したい事


JSFiddle


データソース: 国土交通省


GL JS Examples


iOS実装


国土交通省のサイトからGeoJSONデータをダウンロード
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-A33-v1_4.html

全都道府県のGeoJSONファイルを一つにまとめる
jq -n 'reduce inputs as $in ({"type":"FeatureCollection"}; .features += $in.features)' ~/Downloads/A33-20_00_GML/GeoJSON/A33-20_* > dosha_combined.geojson

Uploads APIも使えるが、情報の精度を保つ為MTSを使う。
MTSのデータ形式はGeoJSON LDなので、形式を変換する。
cat dosha_combined.geojson |  jq -c '.features[]' > dosha_combined.geojsonld

dosha_combined.geojsonをVimで開き、フォーマットを整える。
# A33_001の1 -> "1"に変更
# A33_001の2 -> "2"に変更
# A33_001の3 -> "3"に変更
:%s/"A33_001": 1,/"A33_001": "1",/g
:%s/"A33_001": 2,/"A33_001": "2",/g
:%s/"A33_001": 3,/"A33_001": "3",/g

# A33_002 区域区分 -> 土砂災害警戒区域の指定の種類
# A33_002の1 -> "1"に変更
# A33_002の2 -> "2"に変更
:%s/"A33_002": 1,/"A33_002": "1",/g
:%s/"A33_002": 2,/"A33_002": "2",/g

シークレットトークンの設定
export MAPBOX_ACCESS_TOKEN=sk.シークレットトークン

MTSにソースをアップロード
> curl -X POST "https://api.mapbox.com/tilesets/v1/sources/takutosuzukimapbox/dosha2?access_token=$(echo $MAPBOX_ACCESS_TOKEN)" \
    -F file=@/Users/takutosuzuki/Documents/projects/mlit-data/dosha_combined.geojsonld \
    --header "Content-Type: multipart/form-data"

{"id":"mapbox://tileset-source/takutosuzukimapbox/dosha2","files":1,"source_size":1831232560,"file_size":1831232560}

タイルセット作成レシピを定義（recipe_dosha.json）として保存する。
{
    "recipe": {
        "version": 1,
        "layers": {
          "dosha": {
            "source": "mapbox://tileset-source/takutosuzukimapbox/dosha2",
            "minzoom": 0,
            "maxzoom": 16,
            "features": {
              "simplification": 0
            }
          }
        }
    },
    "name": "Dosha Tileset"
}

タイルセットを作成
> curl -X POST "https://api.mapbox.com/tilesets/v1/takutosuzukimapbox.dosha2?access_token=$(echo $MAPBOX_ACCESS_TOKEN)" \ 
-d @recipe_dosha.json  \
--header "Content-Type:application/json" 

{"message":"Successfully created empty tileset takutosuzukimapbox.dosha2. Publish your tileset to begin processing your data into vector tiles."}

タイルセットをパブリッシュ
> curl -X POST "https://api.mapbox.com/tilesets/v1/takutosuzukimapbox.dosha2/publish?access_token=$(echo $MAPBOX_ACCESS_TOKEN)"

{"message":"Processing takutosuzukimapbox.dosha1","jobId":"ckqxtbgcq001r09jyh6jv53g6"}


Jobのステータスを確認
curl "https://api.mapbox.com/tilesets/v1/takutosuzukimapbox.dosha2/jobs/ckqxtbgcq001r09jyh6jv53g6?access_token=$(echo $MAPBOX_ACCESS_TOKEN)" | jq

{
  "id": "ckqxtbgcq001r09jyh6jv53g6",
  "stage": "processing",
  "created": 1625924249738,
  "created_nice": "Sat Jul 10 2021 13:37:29 GMT+0000 (Coordinated Universal Time)",
  "published": 1625924249738,
  "tilesetId": "takutosuzukimapbox.dosha1",
  "errors": [],
  "warnings": [],
  "completed": null,
  "recipe": {
    "version": 1,
    "layers": {
      "dosha": {
        "source": "mapbox://tileset-source/takutosuzukimapbox/dosha1",
        "minzoom": 0,
        "maxzoom": 16,
        "features": {
          "simplification": 0
        }
      }
    }
  }
}

タイルセットをUIで確認
https://studio.mapbox.com/tilesets/takutosuzukimapbox.dosha2/#12/34.27083/136.80176


## index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>土砂災害警戒区域</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = 'pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA';
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/takutosuzukimapbox/ckr0l9cln5b5e18n0x970lxnt', // style URL
        center: [139.6503, 35.6762], // starting position [lng, lat]
        zoom: 12 // starting zoom
      });
      map.on('load', () => {
        map.addSource('dosha', {
          type: 'vector',
          url: 'mapbox://takutosuzukimapbox.dosha2'
        });
        map.addLayer({
          'id': 'dosha',
          'type': 'fill',
          'source': 'dosha',
          'source-layer': 'dosha',
          'paint': {
            'fill-color': [
              "match",
              ["get", "A33_002"],
              ["1"],
              "hsl(45, 96%, 56%)",
              ["2"],
              "hsl(0, 95%, 53%)",
              "hsl(0, 0%, 100%)"
            ]
          }
        });
      })

    </script>

  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>土砂災害警戒区域</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	</style>
	</head>

	<body>
	<div id="map"></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/takutosuzukimapbox/ckr0l9cln5b5e18n0x970lxnt', // style URL
	center: [139.6503, 35.6762], // starting position [lng, lat]
	zoom: 12 // starting zoom
	});
	map.on('load', () => {
	map.addSource('dosha', {
	type: 'vector',
	url: 'mapbox://takutosuzukimapbox.dosha2'
	});
	map.addLayer({
	'id': 'dosha',
	'type': 'fill',
	'source': 'dosha',
	'source-layer': 'dosha',
	'paint': {
	'fill-color': [
	"match",
	["get", "A33_002"],
	["1"],
	"hsl(45, 96%, 56%)",
	["2"],
	"hsl(0, 95%, 53%)",
	"hsl(0, 0%, 100%)"
	]
	}
	});
	})

	</script>

	</body>

	</html>