Mapbox GL 触ってみる
弊社で愛用しているMapboxさんが、Mapbox GLというのを出してましたので、ちょいちょい触ってみました。
ですが、ドキュメントがわかりづらく、あまり全体としてつかめてないのが現状です。&cry:
とりあえず、現時点（2015年12月8日）でわかったことを書いておきます。
Mapbox GL
Overview
API
Examples
まずは、シンプルなマップを下記で見ると
https://www.mapbox.com/mapbox-gl-js/examples/
「おっ きれいになった！心なしか早くなった！高速道路や国道もきれいに表示されてるしいーじゃん！！」
とワクワクします。
が…
なんか主要なところは英語？？
おそらく、OSMの英語データがあるところは英語で、ないところは日本語です。
しかも、なんか日本語はきれいに出ていない…
Switch languages
https://www.mapbox.com/mapbox-gl-js/example/language-switch/
というサンプルがあるので、これをどうにかして、日本語にするかーとやってみましたが（上記のサンプルをswitchLanguage(“jp”)とかswitchLanguage(“ja”)とか できませんでした。
やり方ご存知の方がいたら、教えてください。┌o ﾍﾟｺｯ
ついでなんで、サンプル以上のことを少しがんばってみます。
真黒な海と、道路だけの地図を出します。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
<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.eyJ1Ijoi…自分たちのAPIキーを入れてね';
var map = new mapboxgl.Map({
container: 'map',
style:{
"version": 8,
"name": "Mapbox Streets",
center: [139.632314, 35.45797], // starting position
zoom: 9,
//sourcesとlayersは設定しないと動作しない
"sources": {
"mapbox-streets": {
"type": "vector",
"url": "mapbox://mapbox.mapbox-streets-v6"
}
},
"layers": [
{
"id": "water",
"source": "mapbox-streets",
"source-layer": "water",
"type": "fill",
"paint": {
"fill-color": "#000000"
}
},
{
"id": "street",
"source": "mapbox-streets",
"source-layer": "road",
"type": "line",
}
]
}
});
</script>
</body>
</html>
