MapConductorMostrar el primer mapa con MapLibre
Pasos para mostrar un mapa de MapLibre con MapConductor. La configuración varía según la plataforma, pero la idea del código para mapas y marcadores es la misma.
01 · Instalación
Agrega `core` y `for-maplibre` a las dependencias. Si usas otro proveedor, simplemente cambia el módulo.
dependencyResolutionManagement {
repositories {
google()
mavenCentral()
}
}dependencies {
implementation(platform("com.mapconductor:mapconductor-bom:1.3.1"))
implementation("com.mapconductor:core")
implementation("com.mapconductor:for-maplibre")
// opcional: 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()],
});Excluye al proveedor del pre-bundling de dependencias de Vite. `maplibre-gl` v6 carga los trabajadores mediante URL; si se pre-bundlean, los archivos de los trabajadores no se generan en `.vite/deps` y la carga falla.
02 · Definir teselas
MapLibre en sí no tiene una clave de API. La apariencia del mapa la define la fuente de las teselas.
Comenzar con demo tiles
Si especifica MapLibreDesign.DemoTiles / OpenMapTiles directamente, puede verificar el funcionamiento sin clave.
Preparar alojamiento para producción
Si usa servicios de distribución de tiles como MapTiler, configure la clave de cada servicio en la styleURL.
Los demo tiles son solo para verificar el funcionamiento. En aplicaciones de producción, use sus propios servicios de distribución de tiles o servicios comerciales.
03 · Hello Map
Crea un objeto de estado con una posición de cámara y pásalo a la vista del mapa. Las superposiciones como marcadores y burbujas de información se declaran como elementos secundarios. Al tocar un marcador, se muestra la burbuja de información; al tocar el mapa, se cierra.
@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 · Hasta que funcione
Se muestra un mapa centrado en la estación de Tokio con un marcador. Si tocas el marcador y aparece la burbuja "Hello, MapConductor", has terminado.
04 · Cambiar de proveedor
Con el mismo código de pantalla, funciona con otro proveedor simplemente cambiando los módulos de dependencia y el nombre de la vista. Lo único que cambia es el proceso de introducción — obtención de clave y convención de inicialización.