Create a simple MapLibre GL JS site with hash and PMTiles enabled, which takes style.json URL. #548
Comments
|
https://optgeo.github.io/terrain22/style.json をサンプルに使っていただければと思います。日本の地形分類も入っています。 |
CDNを使ってMapLibre のライブラリを読み込む場合に、バージョンを指定しないと最新バージョンが適応されます。 |
|
ChatGPT と相談して書いてみました。（PMTiles の扱いを除く。） <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style view</title>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const urlParams = new URLSearchParams(window.location.search)
const styleUrl = urlParams.get('style') || 'https://optgeo.github.io/terrain22/style.json'
const map = new maplibregl.Map({
container: 'map',
style: styleUrl,
hash: true
})
})
</script>
</body>
</html>夕食後、リポジトリを作って本格に始めてみます。 |
|
多分、pmtilesのことはこのmaplibre.glのドキュメントでいいかな？ https://maplibre.org/maplibre-gl-js/docs/examples/pmtiles/ @hfu がレポジトリー作った後で僕が調べって見ようかも！ |
|
@albertkun ありがとう！Observable 上では https://observablehq.com/d/e66dd18a3be303c7 で maplibregl = {
let m = await require("maplibre-gl")
let p = await import("https://cdn.skypack.dev/pmtiles")
let protocol = new p.Protocol()
m.addProtocol('pmtiles', protocol.tile)
yield m
}という形でロードできているので、これに沿って ES モジュールとして pmtiles をインポートするコードを書いてみます。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style view</title>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script type="module">
import { Protocol } from 'https://cdn.skypack.dev/pmtiles'
maplibregl.addProtocol('pmtiles', (new Protocol()).tile)
document.addEventListener('DOMContentLoaded', function () {
const urlParams = new URLSearchParams(window.location.search)
const styleUrl = urlParams.get('style') || 'https://optgeo.github.io/terrain22/style.json'
const map = new maplibregl.Map({
container: 'map',
style: styleUrl,
hash: true
})
})
</script>
</body>
</html>これで進めてみます。 |
|
unopengis/stylehub という名前でリポジトリ作ります。 |
|
リポジトリは https://github.com/unopengis/stylehub でした。うまくいっているようなのでイシューはクローズします。 |
|
ここで作ったシンプルサイトをベースに、Observable から terrain22 の凡例を表示するコードを追加し、 https://optgeo.github.io/terrain22/index.html にする。 |
FOIL4G で style.json の URL を改めてリソースとしてとらえやすくなっていることを踏まえ、@hfu の実用的モチベーションもあり、次の要件を満たすシンプルな MapLibre GL JS サイトを作りたいと思っています。
MapLibre GL JS は最新のものに自動的に追従するようにしたいです。
このようなサイトを作るにあたり、注意するべきこと、その他コメントなどあればいただけますか。
@asahina820 @yuiseki @smellman @albertkun @k96mz
私のユースケース
The text was updated successfully, but these errors were encountered: