MapConductorErste Karte mit MapLibre anzeigen
Schritte zum Anzeigen einer MapLibre-Karte mit MapConductor. Das Setup variiert je nach Plattform, aber der Ansatz für den Code für Karten und Marker ist derselbe.
01 · Installation
Füge `core` und `for-maplibre` zu den Abhängigkeiten hinzu. Wenn Sie einen anderen Anbieter verwenden, tauschen Sie einfach das Modul aus.
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
}
}dependencies {
implementation(platform("com.mapconductor:mapconductor-bom:1.3.1"))
implementation("com.mapconductor:core")
implementation("com.mapconductor:for-maplibre")
// optional: compose / icons / heatmap / marker-clustering / geojson / kml
}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"),
].target(
name: "YourApp",
dependencies: [
.product(name: "MapConductorCore", package: "ios-sdk-core"),
.product(name: "MapConductorForMapLibre", package: "ios-for-maplibre"),
]
)npm install @mapconductor/js-sdk-core \
@mapconductor/js-sdk-react \
@mapconductor/react-for-maplibreimport { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});Nimm den Anbieter aus dem Vite-Prebundling heraus. `maplibre-gl` v6 lädt Worker über URLs. Wenn sie vorbündelt werden, werden die Worker-Dateien nicht unter `.vite/deps` ausgegeben und das Laden schlägt fehl.
02 · Kacheln festlegen
MapLibre selbst hat keinen API-Schlüssel. Das Erscheinungsbild der Karte wird durch den Kachelanbieter bestimmt.
Starten mit Demo-Tiles
Wenn Sie MapLibreDesign.DemoTiles / OpenMapTiles direkt angeben, können Sie die Funktion ohne Schlüssel überprüfen.
Hosting für die Produktion vorbereiten
Wenn Sie Tile-Dienste wie MapTiler verwenden, legen Sie den Schlüssel des jeweiligen Dienstes in der styleURL fest.
Demo-Tiles dienen nur zur Überprüfung der Funktion. Verwenden Sie in Produktions-Apps eigene oder kommerzielle Tile-Dienste.
03 · Hello Map
Erstelle ein Zustandsobjekt mit einer Kameraposition und gib es an die Kartenansicht weiter. Overlays wie Marker und Informationsblasen werden als untergeordnete Elemente deklariert. Wenn ein Marker angetippt wird, wird die Informationsblase angezeigt; wenn die Karte angetippt wird, wird sie geschlossen.
@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") }
}
}
}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") }
}
}
}
}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 · Bis zum Laufen bringen
Die Karte wird mit dem Bahnhof Tokio als Zentrum angezeigt, und ein Marker wird gesetzt. Wenn du den Marker anztippst und die Sprechblase „Hello, MapConductor“ erscheint, ist es fertig.
04 · Anbieter austauschen
Mit demselben Screen-Code funktioniert es mit einem anderen Anbieter, indem du einfach die Abhängigkeitsmodule und den Ansichtsnamen austauschst. Was sich ändert, ist nur der Integrationsprozess — Abrufen des Schlüssels und Initialisierung.