ドキュメント / 地図ビュー / 地図デザイン

地図デザイン（タイル）を切り替える

地図の見た目は mapDesignType 1つで決まります。プロバイダごとに用意されたプリセットを選ぶか、スタイルJSON・タイルURLを指定して独自のデザインを定義します。切り替えはプロパティへの代入だけで、地図を作り直す必要はありません。

ANDROID

com.mapconductor:core

iOS

MapConductorCore

REACT

@mapconductor/js-sdk-core

デモを見る地図デザイン · React ↗

01 · デザインの型

どのプロバイダのデザインも MapDesignTypeInterface（iOS では MapDesignTypeProtocol）を実装します。共通の3要素だけを覚えれば、プロバイダが変わっても扱い方は同じです。

デザインを識別する値。プロバイダのネイティブ値（Google の mapType 定数など）か文字列。

getValue()

プロバイダの地図エンジンに渡す実際の値。スタイルJSONのURLやタイル定義を含みます。

attributionRules

ズームや表示範囲に応じて出典表記を切り替えるルール。独自タイルを使うときに必須です。

02 · プリセット

各プロバイダのパッケージに、そのプロバイダで使える標準デザインが定数として入っています。サンプルアプリはこの一覧をそのまま選択肢にしています。

プロバイダ

型

プリセット

Google Maps

GoogleMapDesign

Normal · Satellite · Hybrid · Terrain · None

MapLibre

MapLibreDesign

DemoTiles · OsmBright / En / Ja · MapTilerBasicEn / Ja · MapTilerTonerEn / Ja · OpenMapTiles（9）

MapKit
iOS · React

MapKitMapDesign

Standard · Satellite · Hybrid · SatelliteFlyover · HybridFlyover · MutedStandard

Mapbox

MapboxMapDesign
React: MapboxDesign

Standard · StandardSatellite · Streets · Outdoors · Light · Dark · Satellite · SatelliteStreets · NavigationDay / Night
React は Streets · Outdoors · Light · Dark · SatelliteStreets ＋ OsmBright / MapTiler 系のスタイルJSON

MapTiler

MapTilerDesign

Streets · StreetsDark · StreetsLight · Basic · Bright · Satellite · Outdoor · Winter · Topo · Toner · Dataviz · Backdrop · Ocean · Landscape · Aquarelle · OpenStreetMap（16）

HERE

HereMapDesign

NormalDay / Night · Satellite · HybridDay / Night · LiteDay / Night · LiteHybridDay / Night · LogisticsDay / Night · LogisticsHybridDay · RoadNetworkDay / Night（14。iOS のみ LogisticsHybridNight を加えた 15）

ArcGIS

ArcGISDesign
iOS / React: ArcGISMapDesign

Streets · Imagery · Topographic · Navigation · Nova · Newspaper · HumanGeography… · OsmStandard …（61）

TomTom

TomTomMapDesign
React: TomTomDesign

Standard · Driving · Satellite
React はさらに StandardLight / Dark · DrivingLight / Dark · MonoLight / Dark

Longdo

LongdoDesign

Normal · Easy · Pastel · PastelGray · Hard · Gray · Light · Night · Dark · Political · Osm · Satellite · Hybrid（13）

Leaflet
React

LeafletDesign

OpenStreetMap · None ＋任意の XYZ タイル

OpenLayers
React

OpenLayersDesign

OpenStreetMap · None ＋任意の XYZ タイル

Azure Maps
React

AzureMapsDesign

Road · RoadShadedRelief · Blank · BlankAccessible · Satellite · SatelliteRoadLabels · GrayscaleDark / Light · Night · HighContrastDark / Light（12）

Cesium
React

CesiumDesign

Default · None

プラットフォームで差があるものだけ注記しています。注記のない行は、型名もプリセットの定数名も 3 プラットフォームで同じです。

プラットフォーム

03 · 切り替える

地図ビューの状態オブジェクトの mapDesignType に代入します。状態は監視されているので、代入した時点で地図の見た目が変わります。

MapDesignMapPage.kt · Jetpack Compose

// state は MapViewStateInterface<*>。プロバイダごとの型に絞って代入する
when (state) {
    is GoogleMapViewStateInterface ->
        state.mapDesignType = GoogleMapDesign.Satellite
    is MapLibreViewStateInterface ->
        state.mapDesignType = MapLibreDesign.OsmBrightJa
    is MapTilerViewStateInterface ->
        state.mapDesignType = MapTilerDesign.Toner
}

MapDesignMapPage.swift · SwiftUI

// 初期デザインは State の生成時に渡す
@StateObject private var mapLibreState = MapLibreViewState(
    mapDesignType: MapLibreDesign.DemoTiles,
    cameraPosition: viewModel.initCameraPosition
)

// 切り替えは @Published なプロパティへの代入だけ
mapLibreState.mapDesignType = MapLibreDesign.OsmBrightJa

MapDesignPage.tsx

const [mapViewState, setMapViewState] =
  useState<MapViewStateInterface<MapDesignTypeInterface<unknown>> | null>(null);

const handleDesignChange = (designId: string) => {
  const option = mapDesignOptions.find(item => item.design.id === designId);
  if (!mapViewState || !option) return;
  mapViewState.mapDesignType = option.design;
};

04 · カスタムデザインを定義する

プリセットの型はそのままコンストラクタとして公開されています。id と、スタイルJSONのURL（ベクタ系）またはタイルURLテンプレート（ラスタ系）を渡せば、自社スタイルや地理院タイルをプリセットと同じ扱いで使えます。

CustomDesigns.kt · MapLibre / スタイルJSONで定義

// MapLibreDesign は data class。スタイル JSON の URL を渡せば独自デザインになる
val GsiPale =
    MapLibreDesign(
        id = "gsi-pale",
        styleJsonURL = "https://example.com/styles/gsi-pale/style.json",
        attributionRules =
            listOf(
                AttributionRule(attribution = "地理院タイル"),
                AttributionRule(attribution = "GEBCO", minZoom = 5, maxZoom = 8),
            ),
    )

MapDesignPageViewModel.kt · 選択肢に混ぜる

private val mapLibreDesigns =
    listOf(
        MapDesignOption(label = "OsmBright", design = MapLibreDesign.OsmBright),
        MapDesignOption(label = "GSI Pale", design = GsiPale),
    )

GoogleMapDesign.Custom · ネイティブ値を包む

// ネイティブの mapType 定数をそのまま包み、出典表記だけ足す
val NormalWithNotice =
    GoogleMapDesign.Custom(
        id = MAP_TYPE_NORMAL,
        attributionRules = listOf(AttributionRule(attribution = "自社データ 2026")),
    )

Google Maps のように地図の種類がネイティブ定数で決まるプロバイダでは GoogleMapDesign.Custom を使い、id に定数を渡して出典表記だけを差し替えます。MapTiler・Mapbox・HERE なども同じ形のコンストラクタを持ちます。

CustomDesigns.swift · MapLibre / スタイルJSONで定義

// public init(id:styleJsonURL:attributionRules:) がそのまま独自デザインの入口
let gsiPale = MapLibreDesign(
    id: "gsi-pale",
    styleJsonURL: "https://example.com/styles/gsi-pale/style.json",
    attributionRules: [
        AttributionRule(attribution: "地理院タイル"),
        AttributionRule(attribution: "GEBCO", minZoom: 5, maxZoom: 8),
    ]
)

MapDesignPageViewModel.swift · 選択肢に混ぜる

private let mapLibreDesigns = [
    MapDesignOption(label: "DemoTiles", design: MapLibreDesign.DemoTiles),
    MapDesignOption(label: "GSI Pale", design: gsiPale),
]

// 適用時はプロバイダの型にキャストする
if let design = option.design as? MapLibreDesign {
    mapLibreState.mapDesignType = design
}

構造体なので let で定義してどこでも共有できます。ViewModel の MapDesignOption は design: Any を持つため、適用時に as? でプロバイダの型へ絞り込みます。

leafletDesignOptions.ts · タイルURLで定義

const GSI_STANDARD_DESIGN = new LeafletDesign({
  id: 'gsi-standard',
  tileUrl: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
  tileOptions: { minZoom: 5, maxZoom: 18, tileSize: 256 },
  attributionRules: GSI_STANDARD_ATTRIBUTION_RULES,
});

export const LEAFLET_DESIGNS: MapDesignOption[] = [
  { label: 'OpenStreetMap', design: LeafletDesign.OpenStreetMap },
  { label: 'GSI Standard', design: GSI_STANDARD_DESIGN },
  { label: 'None', design: LeafletDesign.None },
];

maplibreDesignOptions.ts · スタイルJSONで定義

// new MapLibreDesign(id, styleJsonURL, attributionRules?)
const GSI_PALE = new MapLibreDesign(
  'gsi-pale',
  'https://example.com/styles/gsi-pale/style.json',
  [{ attribution: GSI_ATTRIBUTION }],
);

export const MAPLIBRE_DESIGNS: MapDesignOption[] = [
  { label: 'OsmBrightJa', design: MapLibreDesign.OsmBrightJa },
  { label: 'GSI Pale', design: GSI_PALE },
];

Leaflet はラスタタイル、MapLibre はスタイルJSONで定義します。デザインのメタデータは各プロバイダの重い実行時SDKと同じパッケージに入っているため、サンプルではプロバイダごとに動的 import してチャンクを分離しています。

05 · 出典表記（attributionRules）

独自タイルを使うときは、タイル提供元の表記条件をルールとして持たせます。カメラのズームと表示範囲から必要な表記だけが自動で選ばれます。

attribution

表示する文字列。リンクを含む HTML も渡せます。

minZoom / maxZoom

表記を出すズーム範囲。範囲外では自動的に消えます。

bounds

表記を出す矩形範囲。日本国内のタイルなどで使います。

06 · サンプルアプリ

3プラットフォームともデザイン切替UIが入っています。UIの作りはプラットフォームごとに素直な実装で、代入する処理だけが共通です。

Map design ▾

ANDROID · ExposedDropdownMenu

Map design ⌄

iOS · SwiftUI Menu

REACT · map-design-selector

動画で見せる実装 · Android + MapLibreKotlin · Jetpack Compose

val mapViewState = rememberMapLibreMapViewState(
    mapDesign = MapLibreDesign.DemoTiles,
    cameraPosition = MapCameraPosition(
        position = GeoPoint.fromLatLong(21.382314, -157.933097),
        zoom = 12.0,
    ),
)

val designs = listOf(
    "Demo" to MapLibreDesign.DemoTiles,
    "OSM Bright" to MapLibreDesign.OsmBrightJa,
    "Toner" to MapLibreDesign.MapTilerTonerJa,
)

MapLibreMapView(state = mapViewState, modifier = Modifier.weight(1f))

Row {
    designs.forEach { (label, design) ->
        // 代入するだけ。地図は作り直されないので、カメラはそのまま
        Button(onClick = { mapViewState.mapDesignType = design }) { Text(label) }
    }
}

サンプル動画 · デザインを切り替える

動画未撮影同じ地図のまま mapDesignType を切り替え、プリセットが順に適用される様子。切り替わる瞬間そのものが要点です。

地図デザイン（タイル）を切り替える

01 · デザインの型

02 · プリセット

03 · 切り替える

04 · カスタムデザインを定義する

05 · 出典表記（attributionRules）

06 · サンプルアプリ

関連ページ

プロバイダを切り替える

ラスターレイヤー

APIリファレンス