ハウツー 地図の見た目（スタイル）を切り替えるには
地図のベーススタイル（道路の色、文字の大きさ、建物の塗りなど）を差し替えます。
コード
初期スタイルは Map の style オプションで指定します。実行時に切り替えるには、基盤の地図の setStyle を使います。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";
const map = new geolonia.maps.Map(document.getElementById("map"), {
apiKey: "YOUR-API-KEY",
center: { lat: 35.68, lng: 139.75 },
zoom: 11,
style: "geolonia/gsi",
});styleオプション：スタイル名（例:geolonia/gsi）または URL。
実行時に切り替えるときは、基盤の地図の setStyle を呼びます（map は上で作ったものです）。
map.getGeoloniaMap().setStyle("https://tile.openstreetmap.jp/styles/osm-bright/style.json");map.getGeoloniaMap().setStyle(...)：スタイル JSON の URL か、インラインのスタイル定義オブジェクトを渡します。
Map の style プロパティにスタイル名または URL を渡します。state と組み合わせると、実行時にボタンで切り替える UI も作れます。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { Map } from "@geolonia/maps-react";
function App() {
const [style, setStyle] = useState("geolonia/basic-v2");
return (
<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
<div>
<button onClick={() => setStyle("geolonia/basic-v2")}>標準</button>
<button onClick={() => setStyle("geolonia/gsi")}>地理院</button>
</div>
<Map
apiKey="YOUR-API-KEY"
style={style}
center={[139.75, 35.68]}
zoom={11}
containerStyle={{ flex: 1 }}
/>
</div>
);
}
createRoot(document.getElementById("root")).render(<App />);style：スタイル名か、スタイル JSON の URL。state を差し替えるとベース地図が丸ごと切り替わります。- スタイルをオブジェクト（インラインのスタイル定義）で渡す場合は、モジュール定数などにして参照を安定させてください。レンダーのたびに新しいオブジェクトを作ると、毎回スタイルが再読み込みされます。
結果
上のコードは、それぞれのタブの下でそのまま動いています。geolonia/gsi に切り替えると、道路や地名の描き方がデフォルトと変わります。react の例ではボタンで実際に切り替えられます。
うまくいかないとき
- 地図が真っ白になった → スタイル名や URL のつづりを確認。存在しないスタイルを指定すると何も描画されません。
- 属性を書いたのに反映されない →
data-styleのハイフンやつづりを確認。間違った属性名は黙って無視されます。