Last active
November 26, 2025 09:24
-
-
Save CookieBox26/dd24f3cbad9fa91b9884cc5bae06424c to your computer and use it in GitHub Desktop.
Leaflet から公開ラスタタイルサーバを参照するサンプル
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>地図 (ラスタタイル + Leaflet)</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" | |
| integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" | |
| integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> | |
| <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; | |
| background: powderblue; | |
| 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">地図画像出典: 地理院タイル (https://maps.gsi.go.jp/development/ichiran.html)</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 = L.map('map').setView([35.170915, 136.881537], 14); // 名古屋駅 | |
| const servers = { | |
| 'OpenStreetMap': 'https://{s}.tile.openstreetmap.jp/{z}/{x}/{y}.png', | |
| '国土地理院 (標準地図)': 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', | |
| '国土地理院 (淡色地図)': 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', | |
| }; | |
| function setLayer(serverName) { | |
| L.tileLayer(servers[serverName], {maxZoom: 16}).addTo(map); | |
| 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) => setLayer(serverName)); | |
| const label = document.createElement('label'); | |
| label.appendChild(inputRadio); | |
| label.appendChild(document.createTextNode(serverName)); | |
| header.appendChild(label); | |
| }); | |
| document.getElementsByName('server')[0].click(); | |
| </script> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment