mapbox-gl.jsでOSMを表示

JavaScript mapbox-gl 地図

mapbox-gl.jsのサンプルを検索すると、大抵はVector Tileのサンプルが多くヒットしてしまう。 ただ、これまで利用していたOSMなどのRaster Tileをベースに表示したい場合もある。

mapbox-gl.js でRaster Tile今回はOSMを表示する例 ※ 実行する際にmapboxのサイトからmapbox-glのJavaScriptとCSSのファイルを取得してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Mapbox-gl.js Sample OSM</title>
  <link rel="stylesheet" href='css/main.css' />
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<script src='js/vendor/mapbox-gl.js'></script>
<script src="js/app.js"></script>
</body>
</html>

JavaScript

let map = new mapboxgl.Map({
  container: 'map',
  center: [141.3564, 43.0611],
  zoom: 16,
  style: {
    "version": 8,
    "sources": {
      "OSM": {
        "type": "raster",
        "tiles": ['http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
        "tileSize": 256
      }
    },
    "layers": [{
      "id": "OSM",
      "type": "raster",
      "source": "OSM",
      "minzoom": 0,
      "maxzoom": 22
    }]
  }
});
  • sourcesのtypeは rasterに設定
  • sources のオブジェとのkeyとlayersのsourceの値を揃える
  • layersのtypeは rasterに設定

CSS

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  z-index: 0;
  width: 100%;
  height: 100%;
}

実行結果

f:id:hinosita:20180731162856p:plain

leaflet.jsなどと同様にRasterのOSMが表示出来る。

【参考URL】 www.mapbox.com