Created
November 26, 2025 09:22
-
-
Save CookieBox26/48321a46c67449ff960055d3e5d92ccd to your computer and use it in GitHub Desktop.
MapLibre GL JS から公開ベクタタイルサーバを参照するサンプル
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>地図 (ベクタタイル + MapLibre GL JS)</title> | |
| <!-- https://maplibre.org/maplibre-gl-js/docs/#cdn で CDN が確認できます --> | |
| <!-- https://unpkg.com/maplibre-gl@5.13.0/dist/?meta で integrity が確認できます --> | |
| <script src="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.js" | |
| integrity="sha256-jrS8Kkfqdoc1F8nTzRxMn0Fyvi+kxaq67AOOW5L0GS8=" crossorigin=""></script> | |
| <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css" | |
| integrity="sha256-Ha6JJe5ZBuRC8P1wKN3tKIQ4G5rNengOUnACXgn8fF4=" crossorigin="" /> | |
| <style type="text/css"> | |
| html { | |
| margin: 0; | |
| height: 100%; | |
| } | |
| body { | |
| margin: 15px; | |
| height: calc(100% - 30px); | |
| font-size: 14px; | |
| line-height: 18px; | |
| font-family: 'Verdana', 'BIZ UDPGothic', sans-serif; | |
| display: flex; | |
| flex-flow: column; | |
| } | |
| div#map { | |
| box-sizing: border-box; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| label { | |
| user-select: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"></div> | |
| <div id="ref-osm">地図画像出典: OpenStreetMap (https://www.openstreetmap.org/copyright)</div> | |
| <div id="ref-gsi">地図画像出典: 地理院地図Vector (https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js)</div> | |
| <div id="map"></div> | |
| <script> | |
| const header = document.getElementById('header'); | |
| const refOsm = document.getElementById('ref-osm'); | |
| const refGsi = document.getElementById('ref-gsi'); | |
| const map = new maplibregl.Map({ | |
| container: 'map', | |
| style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル | |
| center: [136.881537, 35.170915], // 名古屋駅 | |
| zoom: 14, | |
| pitch: 0 // 傾き | |
| }); | |
| const servers = { | |
| 'OpenStreetMap (Basic)': 'https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json', | |
| 'OpenStreetMap (Bright)': 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', | |
| '国土地理院 (標準)': 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json', | |
| '国土地理院 (淡色)': 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/pale.json', | |
| }; | |
| function setStyle(serverName) { | |
| map.setStyle(servers[serverName]); | |
| refOsm.style.display = serverName.startsWith('OpenStreetMap') ? 'block' : 'none'; | |
| refGsi.style.display = serverName.startsWith('国土地理院') ? 'block' : 'none'; | |
| } | |
| Object.keys(servers).forEach((serverName, iServer) => { | |
| const inputRadio = document.createElement('input'); | |
| inputRadio.setAttribute('type', 'radio'); | |
| inputRadio.setAttribute('name', 'server'); | |
| inputRadio.addEventListener('change', (event) => setStyle(serverName)); | |
| const label = document.createElement('label'); | |
| label.appendChild(inputRadio); | |
| label.appendChild(document.createTextNode(serverName)); | |
| header.appendChild(label); | |
| }); | |
| document.getElementsByName('server')[0].click(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment