MapConductorドキュメント / はじめる / MapLibre
MapLibre で最初の地図を出す
MapConductor で MapLibre の地図を表示するまでの手順です。セットアップはプラットフォームごとに異なりますが、地図とマーカーを書くコードは同じ考え方で通ります。
TIME
5 min
PROVIDER
MapLibre
API KEY
不要
LICENSE
OSS
01 · インストール
依存関係に core と for-maplibre を追加します。他のプロバイダを使う場合はモジュールを差し替えるだけです。
settings.gradle.ktsKotlin
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
}
}app/build.gradle.ktsKotlin
dependencies {
implementation(platform("com.mapconductor:mapconductor-bom:1.3.1"))
implementation("com.mapconductor:core")
implementation("com.mapconductor:for-maplibre")
// 任意: compose / icons / heatmap / marker-clustering / geojson / kml
}Package.swiftSwift Package Manager
dependencies: [
.package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
.package(url: "https://github.com/MapConductor/ios-for-maplibre", from: "1.3.1"),
]Package.swift · targetSwift
.target(
name: "YourApp",
dependencies: [
.product(name: "MapConductorCore", package: "ios-sdk-core"),
.product(name: "MapConductorForMapLibre", package: "ios-for-maplibre"),
]
)terminalnpm
npm install @mapconductor/js-sdk-core \
@mapconductor/js-sdk-react \
@mapconductor/react-for-maplibrevite.config.tsTypeScript · Vite
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});Vite の依存事前バンドルからプロバイダを外します。maplibre-gl v6 はワーカーを URL で読み込むため、事前バンドルされると .vite/deps 配下にワーカーのファイルが出力されず、読み込みに失敗します。
02 · タイルを決める
MapLibre 自体に API キーはありません。地図の見た目はタイルの配信元で決まります。
DEMO TILES
デモタイルで始める
MapLibreDesign.DemoTiles / OpenMapTiles をそのまま指定すれば、キーなしで動作を確認できます。
HOSTED TILES
本番はホスティングを用意
MapTiler などのタイル配信を使う場合は、各サービスのキーをスタイルURLに設定します。
NOTE
デモタイルは動作確認用です。本番アプリでは自前または商用のタイル配信を使ってください。
03 · Hello Map
カメラ位置を持つ状態オブジェクトを作り、地図ビューに渡します。マーカーや情報バブルなどのオーバーレイは子要素として宣言します。マーカーがタップされたら情報バブルを出し、地図がタップされたら閉じます。
状態オブジェクトはコンポーネントの生存期間中ずっと保持します。プロパティを直接更新すると、ビューを作り直さずに反映されます。
SimpleMapScreen.kt · Jetpack Compose
@Composable
fun SimpleMapScreen(modifier: Modifier) {
var selected by remember { mutableStateOf<MarkerState?>(null) }
val mapState = rememberMapLibreMapViewState(
cameraPosition = MapCameraPosition(
position = GeoPoint(35.6812, 139.7671),
zoom = 14.0,
),
mapDesign = MapLibreDesign.OsmBright,
)
val markerState = remember {
MarkerState(
position = GeoPoint(35.6812, 139.7671),
onClick = { selected = it },
)
}
MapLibreMapView(
modifier = modifier,
state = mapState,
onMapClick = { selected = null },
) {
Marker(markerState)
selected?.let {
InfoBubble(marker = it) { Text("Hello, MapConductor") }
}
}
}ContentView.swift · SwiftUI
import SwiftUI
import MapConductorCore
import MapConductorForMapLibre
struct ContentView: View {
@StateObject private var mapState = MapLibreViewState(
mapDesignType: MapLibreDesign.OsmBright,
cameraPosition: MapCameraPosition(
position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
zoom: 14
)
)
@State private var selected: MarkerState?
var body: some View {
MapLibreMapView(state: mapState, onMapClick: { _ in selected = nil }) {
Marker(
position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
onClick: { selected = $0 }
)
if let selected {
InfoBubble(marker: selected) { Text("Hello, MapConductor") }
}
}
}
}HelloMap.tsx · TypeScript · React
import { useMemo, useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState }
from '@mapconductor/js-sdk-core';
import { InfoBubble, Marker } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, useMapLibreViewState }
from '@mapconductor/react-for-maplibre';
import '@mapconductor/react-for-maplibre/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useMapLibreViewState({
mapDesignType: MapLibreDesign.OsmBright,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 14 }),
});
const [selected, setSelected] = useState(false);
const marker = useMemo(() =>
createMarkerState({
id: 'hello',
position: TOKYO,
onClick: () => setSelected(true),
}), []);
return (
<MapLibreMapView state={mapState} onMapClick={() => setSelected(false)}>
<Marker state={marker} />
{selected && (
<InfoBubble marker={marker}>Hello, MapConductor</InfoBubble>
)}
</MapLibreMapView>
);
}RESULT · 動くところまで
東京駅を中心に地図が表示され、マーカーが1つ立ちます。マーカーをタップして「Hello, MapConductor」の吹き出しが出れば完了です。
04 · プロバイダを差し替える
同じ画面コードのまま、依存モジュールとビュー名を差し替えれば別のプロバイダで動きます。変わるのは導入手順 — キーの取得と初期化の作法 — だけです。