MapConductorRaster layer
Overlay any XYZ tile set by giving a URL template — external tiles such as the GSI maps of Japan work as-is.
01 · Usage
Pass a URL template as the source. Opacity and zoom range are controlled on the layer.
val rasterLayerState = RasterLayerState(
id = "gsi-raster",
source = RasterLayerSource.UrlTemplate(
template = "https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
tileSize = 256,
minZoom = 5,
maxZoom = 15,
),
opacity = 0.75f,
)
MapLibreMapView(state = mapState) {
RasterLayer(rasterLayerState)
}@StateObject private var layerState = RasterLayerState(
source: .urlTemplate(
template: "https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
tileSize: 256,
minZoom: 5,
maxZoom: 15
),
opacity: 0.75,
id: "gsi-raster"
)
MapLibreMapView(state: mapState) {
RasterLayer(state: layerState)
}import { RasterLayerSource, createRasterLayerState } from '@mapconductor/js-sdk-core';
import { RasterLayer } from '@mapconductor/js-sdk-react';
const state = useMemo(() => createRasterLayerState({
id: 'gsi-raster',
source: RasterLayerSource.UrlTemplate({
template: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
tileSize: 256,
minZoom: 5,
maxZoom: 15,
attributionRules: [...GSI_RELIEF_ATTRIBUTION_RULES],
}),
opacity,
}), [opacity]);
<RasterLayer state={state} />02 · Options
03 · Header support
Tiles are fetched by each provider's map SDK, and whether it exposes a hook for rewriting requests differs per SDK. Where there is no hook, the values are ignored and a warning is logged at runtime. The table below reflects what was actually observed by receiving the tile requests (on device for native, in the browser for web).
On the web, userAgent has no effect on any provider: browsers forbid overriding User-Agent and no SDK can work around it. The property remains for React Native, where the value is passed to the native SDK and does take effect — so the same component code runs on both web and RN.
If your tile server requires headers, pick a provider that supports them. Providers without support can still be used when the token can be passed as a URL query parameter instead.
04 · Sample
GSI tiles
The sample switches between relief and standard GSI layers with an opacity slider; attribution switches automatically through attributionRules.
var opacity by remember { mutableFloatStateOf(0.75f) }
var relief by remember { mutableStateOf(true) }
val layerState = remember { RasterLayerState(id = "gsi-raster") }
// Both source and opacity can be reassigned; the layer is not rebuilt
LaunchedEffect(relief, opacity) {
layerState.source = RasterLayerSource.UrlTemplate(
template = if (relief) {
"https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png"
} else {
"https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
},
tileSize = 256,
minZoom = 5,
maxZoom = 15,
)
layerState.opacity = opacity
}
MapLibreMapView(state = mapViewState) {
RasterLayer(layerState)
}
Slider(value = opacity, onValueChange = { opacity = it })
Switch(checked = relief, onCheckedChange = { relief = it })