-
Notifications
You must be signed in to change notification settings - Fork 7
Constants
niryuu edited this page May 25, 2026
·
1 revision
embed-core 切り出し / embed 書き直しの際にこれら全てを再現する必要がある。値を変更してよいか判断するために、定義箇所だけでなく外部仕様(サーバ/CDN)に依存しているかを併記する。
参照箇所はすべて現在の master を grep して確認済み。Verification 時にもう一度突き合わせること。
| 値 | 用途 | 定義箇所 | 外部仕様？ |
|---|---|---|---|
tileserver.geolonia.com |
ベクトルタイルサーバ (基準) |
util.ts:44, geolonia-map.ts:144, geolonia-map.ts:156
|
Yes (サーバ側合意) |
*.tiles.geolonia.com (ホスト suffix .tiles.geolonia.com) |
ベクトルタイルサーバ (サブドメイン版。osm.v2/osm.v3 等) | util.ts:45 |
Yes |
tileserver-dev.geolonia.com |
dev stage の tileserver | geolonia-map.ts:157 |
Yes |
https://cdn.geolonia.com/style/ |
スタイル CDN prefix |
util.ts:226, util.ts:228, util.ts:269, util.ts:271, keyring.ts:109
|
Yes |
https://api.geolonia.com/ |
API ルート (/{stage}/sources, /{stage}/sprites/) |
keyring.ts:110, geolonia-map.ts:131, geolonia-map.ts:167, parse-atts.ts:59
|
Yes |
https://cdn.geolonia.com/logo/geolonia-symbol_1.png |
GeoloniaControl ロゴ画像 | controls/geolonia-control.ts:11 |
Yes (ブランド) |
https://geolonia.com/ |
GeoloniaControl リンク先 | controls/geolonia-control.ts:22 |
Yes (ブランド) |
「外部仕様」= サーバ・CDN 側の URL 体系と合意済み。embed 側で勝手に変えるとリクエストが届かない。
parse-atts.ts:33-66 に集約。data-* 属性が無いときの fallback。
| 属性 | デフォルト | 備考 |
|---|---|---|
lat, lng, zoom, bearing, pitch
|
0 |
数値型は parseFloat で読まれる |
hash |
'off' |
'on' で URL hash に同期 |
marker |
'on' |
|
markerColor |
'#E4402F' |
Geolonia 赤。geolonia-marker.ts:40 にも同じ literal あり (重複) |
openPopup |
'off' |
|
customMarker |
'' |
CSS selector |
customMarkerOffset |
'0, 0' |
parse-atts.ts:44 の literal、後で .split(/,/) で分解 |
gestureHandling |
params.interactive === false のときのみ 'off'、それ以外 'on'
|
parse-atts.ts:45 |
navigationControl |
params.interactive === false のときのみ 'off'、それ以外 'on'
|
parse-atts.ts:46 |
geolocateControl |
'off' |
|
fullscreenControl |
'off' |
|
scaleControl |
'off' |
|
geoloniaControl |
'on' |
|
geojson |
'' |
|
simpleVector |
'' |
|
cluster |
'on' |
|
clusterColor |
'#ff0000' |
simplestyle.ts:33 にも literal あり (重複) |
style |
'geolonia/basic-v2' |
parse-atts.ts:30,55 の 2 箇所に同じ literal |
lang |
getLang() の結果 ('ja' または 'en')、data-lang="auto" 時のみ navigator から判定 |
parse-atts.ts:16-25 |
plugin |
'off' |
未使用 |
key |
keyring.apiKey |
parse 済み API key |
apiUrl |
`https://api.geolonia.com/${keyring.stage}` |
template 結合 |
stage |
keyring.stage |
'v1' または 'dev'
|
loader |
'on' |
|
minZoom |
'' (空文字 = 未指定) |
getOptions で `Number(...) === 0 |
maxZoom |
20 |
|
'3d' |
'' |
キー名はリテラル '3d' (識別子と区別) |
simplestyle.ts:8-11 / simplestyle-vector.ts:7-10 で両方に同名定数が独立に定義されている (DRY 違反、移植時に統一可能)。
| 定数 | 値 | 用途 |
|---|---|---|
textColor |
'#000000' |
テキスト塗り |
textHaloColor |
'#FFFFFF' |
テキストハロー |
backgroundColor |
'rgba(255, 0, 0, 0.4)' |
fill / circle 既定 |
strokeColor |
'#FFFFFF' |
stroke 既定 |
options.id のデフォルトは 'geolonia-simple-style' (simplestyle.ts:30)。レイヤ ID は次の通り (${id}-... の形):
| ID | 種別 |
|---|---|
geolonia-simple-style |
source (type: 'geojson', ポリゴンと線) |
geolonia-simple-style-points |
source (type: 'geojson', ポイント + cluster) |
geolonia-simple-style-polygon |
layer (type: 'fill') |
geolonia-simple-style-polygon-symbol |
layer (type: 'symbol') |
geolonia-simple-style-linestring |
layer (type: 'line') |
geolonia-simple-style-linestring-symbol |
layer (type: 'symbol') |
geolonia-simple-style-circle-points |
layer (type: 'circle') |
geolonia-simple-style-symbol-points |
layer (type: 'symbol') |
geolonia-simple-style-clusters |
layer (type: 'circle') |
geolonia-simple-style-cluster-count |
layer (type: 'symbol') |
注意: 同一マップに複数 SimpleStyle インスタンスを生成すると ID 衝突。
simplestyle-vector.ts:16 で sourceName = 'vt-geolonia-simple-style' を固定。
| ID | 種別 |
|---|---|
vt-geolonia-simple-style |
source (type: 'vector') |
vt-geolonia-simple-style-polygon-symbol |
layer |
vt-geolonia-simple-style-linestring-symbol |
layer |
vt-geolonia-simple-style-polygon |
layer |
vt-geolonia-simple-style-linestring |
layer |
vt-circle-simple-style-points |
layer (prefix が vt-circle- で他とずれる: simplestyle-vector.ts:170) |
vt-geolonia-simple-style-points |
layer |
source-layer: 'g-simplestyle-v1' をすべてのレイヤで指定 (simplestyle-vector.ts:67,91,125,147,173,195)。これはサーバ側のベクトルタイル仕様に依存する。
GeoJSON Feature の properties で意味を持つキー (simplestyle.ts / simplestyle-vector.ts のスタイル式から逆引き):
| プロパティ | 型 | 用途 | 既定値 |
|---|---|---|---|
marker-color |
string (色) |
ポイントの円塗り | 'rgba(255, 0, 0, 0.4)' |
marker-size |
'small' / 'large' / その他 |
円半径とテキストオフセット | デフォルト分岐 (9 / 1.2) |
marker-symbol |
string (アイコン ID) |
icon-image |
(なし → circle レイヤ表示) |
fill |
string (色) |
ポリゴン塗り | backgroundColor |
fill-opacity |
number |
ポリゴン透明度 | 1.0 |
stroke |
string (色) |
線色 / 円の枠 |
strokeColor (線色は backgroundColor) |
stroke-width |
number |
線幅 |
2 (線), 1 (円枠) |
stroke-opacity |
number |
線透明度 | 1.0 |
text-color |
string (色) |
テキスト塗り | textColor |
text-halo-color |
string (色) |
テキストハロー | textHaloColor |
title |
string |
ラベル | (なし) |
description |
string (HTML) |
ポップアップ | (なし — クリック無視) |
description は sanitize-html でフィルタしてから innerHTML に挿入 (util.ts:394-403)。許可タグ: sanitize-html の defaults + 'img'、全要素で 'class' 属性許可。
marker-size のマッピング (simplestyle.ts:220-225):
-
'small'→circle-radius: 7、text-radial-offset: 1 -
'large'→circle-radius: 13、text-radial-offset: 1.6 - その他 →
circle-radius: 9、text-radial-offset: 1.2
vector 版では text-offset に変わる (simplestyle-vector.ts:213-220):
-
'small'→[0, 1] -
'large'→[0, 1.6] - その他 →
[0, 1.2]
| 値 | 用途 | 場所 |
|---|---|---|
clusterMaxZoom: 14 |
クラスタ展開閾値 | simplestyle.ts:91 |
clusterRadius: 50 |
クラスタ半径 (px) | simplestyle.ts:92 |
クラスタ円 circle-radius: 20
|
クラスタ表示半径 (固定) | simplestyle.ts:321 |
クラスタ count text-size: 14
|
カウント文字サイズ | simplestyle.ts:334 |
通常 text-size: 12
|
レイヤ文字サイズ | 多数 |
text-max-width: 12 |
テキスト折り返し | 多数 |
text-halo-width: 1 |
テキストハロー幅 | 多数 |
text-font: ['Noto Sans Regular'] |
フォント名 |
simplestyle.ts:111,135,252,335, simplestyle-vector.ts:80,104,209
|
localIdeographFontFamily: 'sans-serif' |
maplibre option (CJK ローカル fallback) | util.ts:294 |
fitBounds duration: 3000
|
アニメ時間 (ms) | simplestyle.ts:152 |
fitBounds padding: 30
|
余白 (px) |
simplestyle.ts:153, simplestyle-vector.ts:50
|
fitBounds (vector, 初期 zoom) duration: 0
|
即時 | simplestyle-vector.ts:49 |
popup offset: [0, -25]
|
popup と marker の隙間 | geolonia-map.ts:256 |
marker offset: [0, -15]
|
SVG marker のアンカー位置 | geolonia-marker.ts:47 |
marker SVG 26 x 34 px |
サイズ (CSS) | geolonia-marker.ts:25-26 |
ロゴ画像 16 x 16 px |
GeoloniaControl ロゴ | controls/geolonia-control.ts:13-14 |
sessionId 40 桁 hex |
getSessionId(40) 呼び出し |
geolonia-map.ts:121 |
| 値 | 用途 | 場所 |
|---|---|---|
'geolonia-api-key' |
script URL のクエリパラメータ名 | keyring.ts:68 |
'key' |
transformRequest で URL に追加するパラメータ名 |
geolonia-map.ts:123,160,173 |
'sessionId' |
transformRequest で URL に追加するパラメータ名 |
geolonia-map.ts:124,159 |
HTTP 402
|
restricted mode のステータスコード | geolonia-map.ts:361 |
'dev' |
デフォルト stage | keyring.ts:73,80 |
'v1' |
npm scripts (start, build:embed, analyze) で渡される stage |
package.json:18,21,22 |
| 値 | 用途 | 場所 |
|---|---|---|
pmtiles |
maplibre プロトコル登録名 |
render.ts:14, embed-core.ts:12
|
geolonia:// |
カスタム URL スキーム (data-simple-vector で受ける) |
util.ts:359, geolonia-map.ts:139
|
geolonia://tiles/custom/{id} |
parseSimpleVector が生成する URL |
util.ts:362 |
geolonia://tiles/{username}/{customtileId} |
transformRequest 内 regex で match |
geolonia-map.ts:140-141 |
https://tileserver.geolonia.com/customtiles/{id}/tiles.json |
変換後の TileJSON URL | geolonia-map.ts:144 |
| `https://api.geolonia.com/(dev | v1)/sprites/` regex | sprite URL match |
| class | 場所 | 用途 |
|---|---|---|
.geolonia |
render.ts:82-87 |
DOM 走査対象セレクタ |
data-lazy-loading="off" |
render.ts:83 |
即時 render 用属性セレクタ |
loading-geolonia-map |
geolonia-map.ts:115 |
loader 親 div |
lds-grid |
geolonia-map.ts:116 |
loader spinner |
geolonia-default-marker |
geolonia-marker.ts:19 |
デフォルトマーカー container |
geolonia-clickable-marker |
geolonia-map.ts:282 |
popup 付きマーカー |
geolonia__restricted-mode-image-container |
util.ts:372 |
402 表示用 |
geolonia__error-container |
util.ts:378 |
初期化失敗時 |
geolonia__error-message |
util.ts:386 |
エラーメッセージ |
geolonia__error-message-description |
util.ts:387 |
エラー詳細 |
maplibregl-ctrl |
controls/geolonia-control.ts:8, CustomAttributionControl.ts:68,72,77
|
maplibre 標準 |
maplibregl-ctrl-attrib |
CustomAttributionControl.ts:68 |
maplibre 標準 |
maplibregl-ctrl-attrib-button |
CustomAttributionControl.ts:72 |
maplibre 標準 |
maplibregl-ctrl-attrib-inner |
CustomAttributionControl.ts:79 |
maplibre 標準 |
maplibregl-compact / maplibregl-compact-show / maplibregl-attrib-empty
|
CustomAttributionControl.ts 内多数 |
状態クラス |
geolonia-marker.ts:34-44:
-
.leftselector のstyle.fill←options.colorまたは'#E4402F' -
.rightselector のstyle.fill←tinycolor(color).darken().toString()
つまりマーカー SVG 内に .left と .right という class を持つ要素が必須(現 assets/marker.svg でその構造)。書き直し時もこの DOM 構造を維持しないと色が変わらない。
3 サイトに対し referrer ベースの特例を持つ:
| ホスト | origin チェック | referrer prefix | 場所 |
|---|---|---|---|
| Codepen |
https://cdpn.io または https://codepen.io
|
https://codepen.io |
util.ts:67-77 |
| JSFiddle | https://fiddle.jshell.net |
https://jsfiddle.net |
util.ts:82-89 |
| CodeSandbox |
*.csb.app (regex) |
https://codesandbox.io |
util.ts:98-105 |
これら以外の iframe は 同一 origin または API key がすでにロード済み のときのみ許可。
CustomAttributionControl.ts:84-219 に Shadow DOM 用 CSS が長尺で埋め込まれている。書き直し時はこれを丸ごとコピペするか別ファイル化する。主要トークン:
font: 12px/20px Helvetica Neue,Arial,Helvetica,sans-serif-
box-shadow: 0 0 2px 2px #0096ff(focus) - 背景:
hsla(0,0%,100%,.5) - リンク色:
rgba(0,0,0,.75) - compact 表示の閾値:
offsetWidth <= 640(CustomAttributionControl.ts:361)
# 全 hex color
grep -nE "'#[0-9A-Fa-f]+'" src --include="*.ts" -r | grep -v test
# Geolonia 系ホスト
grep -nE "geolonia\.com|tileserver|cdn\.geolonia|api\.geolonia" src --include="*.ts" -r | grep -v test
# layer/source ID prefix
grep -nE "geolonia-simple-style|vt-(circle|geolonia)-simple-style" src --include="*.ts" -r
# CSS class
grep -nE "(geolonia-|maplibregl-|lds-grid|geolonia__)" src --include="*.ts" -r上記コマンドの出力と本ファイルの表が一致していれば再現可能性が担保される。