mle 0840 - izudon/izudon.github.io GitHub Wiki

0840 Display a map

const map = new maplibregl.Map();
  • 要するにこれは Map を new すれば、マップが表示されるという単純な話なのです。
const map = new maplibregl.Map({
    container: 'map', // container id
    // :
  • ただし、マップ の <canvas> 要素が上乗りする HTMLElement の id は指定してよねと。
const map = new maplibregl.Map({
    container: 'map', // container id
    style: 'https://demotiles.maplibre.org/style.json', // style URL
  • それとスタイルも指定しておかなければ何にも表示されませんよと。
    （タイルのＵＲＬなどもスタイルの構成要素の一つとして指定される）。
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
  • 加えて、<head>~</head> 部で、MapLibre のスタイルシートと JavaScript も、
    事前に（この順で）読み込んでおいてやる必要がありますよと（意外に面倒）。
const map = new maplibregl.Map({
    // :
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
});
  • あとは、マップの表示中心の経緯度と、ズームレベルの初期でも指定しておいてやればいいですよ。
⚠️ **GitHub.com Fallback** ⚠️