Zenn
🗺️

Mapbox で OpenStreetMaps を表示するだけ

2020/10/23に公開
JavaScript
Mapbox
#
openstreetmaps
tech

Mapbox のアクセストークンを取得して埋め込むのも面倒なアナタに。

import する js/css

https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js
https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css

index.html

<div id="map"></div>

index.js

const map = new mapboxgl.Map({
  container: 'map',
  center: [134, 35],
  zoom: 10,
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
});

DEMO

Discussion