shimizu/.block

## .block
license: mit
height: 1200

## README.md

      
    Raw
  

              README.md
            
          
## index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<style>
body {
  padding: 10px;
}
</style>

</head>

<body>


<script>
if(!Function.heredoc) Function.prototype.heredoc = function(){
	return this.toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "");
}

var doc = (function () {/*
## 概要

geojsonファイルから、スタティックなバイナリベクトルタイルを生成する。


## 必要なもの

下記ツールをインストールしておく。

+ [tippecanoe](https://github.com/mapbox/tippecanoe)
+ [mb-util](https://github.com/mapbox/mbutil)

## 作業フロー

1. geojson -> mbtiles

  geojsonをmbtilesファイルに変換する

  ```sh
  $ tippecanoe -o hoge.mbtiles hoge.geojson
  ```

2. mbtiles -> .pbf

  mbtilesファイルを静的なpdfファイルに展開する

  ```sh
  $ mb-util --image_format=pbf hoge.mbtiles hoge
  $ cd hoge
  $ gzip -d -v -r -S .pbf *
  $ find . -type f -exec mv -v '{}' '{}'.pbf \;
  ```

これで完成。


## TIPS


### mbtilesファイルの内容を確認する

ローカルサーバーが起動するので出力されたurlをブラウザで開いて確認する。。

```sh
$ npm install
$ npm run tessera mbtiles://./<ファイル名>
```

mb-utilを使ってメタ情報を確認することもできる。

```sh
$ mb-util hoge.mbtiles dumps
```


pbf単体の内容を確認したい場合は以下。

[shimizu / vt_pbf2json](https://github.com/shimizu/vt_pbf2json)


*/}).heredoc();

var md = marked(doc);
d3.select("body").html(md);

d3.selectAll("body pre").each(function() {
  hljs.highlightBlock(this, this.className);
});
</script>

</body>
</html>

## package.json
{
  "name": "make-vt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tessera": "tessera",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mbtiles": "^0.9.0",
    "tessera": "^0.9.0",
    "tilelive-vector": "^3.9.4",
    "tilelive-xray": "^0.3.0"
  }
}
	<!DOCTYPE html>
	<html lang="jp">
	<head>
	<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">
	<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
	<style>
	body {
	padding: 10px;
	}
	</style>

	</head>

	<body>



	<script>
	if(!Function.heredoc) Function.prototype.heredoc = function(){
	return this.toString().match(/(?:\/\(?:[\s\S]?)\\/)/).pop().replace(/^\/\/, "").replace(/\*\/$/, "");
	}

	var doc = (function () {/*
	## 概要

	geojsonファイルから、スタティックなバイナリベクトルタイルを生成する。


	## 必要なもの

	下記ツールをインストールしておく。

	+ [tippecanoe](https://github.com/mapbox/tippecanoe)
	+ [mb-util](https://github.com/mapbox/mbutil)

	## 作業フロー

	1. geojson -> mbtiles

	geojsonをmbtilesファイルに変換する

	```sh
	$ tippecanoe -o hoge.mbtiles hoge.geojson
	```

	2. mbtiles -> .pbf

	mbtilesファイルを静的なpdfファイルに展開する

	```sh
	$ mb-util --image_format=pbf hoge.mbtiles hoge
	$ cd hoge
	$ gzip -d -v -r -S .pbf *
	$ find . -type f -exec mv -v '{}' '{}'.pbf \;
	```

	これで完成。


	## TIPS


	### mbtilesファイルの内容を確認する

	ローカルサーバーが起動するので出力されたurlをブラウザで開いて確認する。。

	```sh
	$ npm install
	$ npm run tessera mbtiles://./<ファイル名>
	```

	mb-utilを使ってメタ情報を確認することもできる。

	```sh
	$ mb-util hoge.mbtiles dumps
	```



	pbf単体の内容を確認したい場合は以下。

	[shimizu / vt_pbf2json](https://github.com/shimizu/vt_pbf2json)


	*/}).heredoc();

	var md = marked(doc);
	d3.select("body").html(md);

	d3.selectAll("body pre").each(function() {
	hljs.highlightBlock(this, this.className);
	});
	</script>

	</body>
	</html>
	{
	"name": "make-vt",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"tessera": "tessera",
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"mbtiles": "^0.9.0",
	"tessera": "^0.9.0",
	"tilelive-vector": "^3.9.4",
	"tilelive-xray": "^0.3.0"
	}
	}