Open Mobile Maps supports most of the Vector Tiles standard. Vector layers render map data from vector tiles using a style.json configuration.
Basic Setup
Add a vector tile layer by referencing a style URL.
val tiledVectorLayer = TiledVectorLayer(context, "https://www.sample.org/base-map/style.json")
mapView.add(tiledVectorLayer)
Combining Multiple Layers
You can combine vector layers with raster layers and other layer types.
struct ContentView: View {
@State private var camera = MapView.Camera(
latitude: 46.962592372639634,
longitude: 8.378232525377973,
zoom: 1000000
)
@State private var layers: [any Layer] = []
var body: some View {
MapView(
camera: $camera,
layers: layers
)
.onAppear {
setupLayers()
}
}
private func setupLayers() {
layers = [
TiledRasterLayer("base", webMercatorUrlFormat: "https://tiles.sample.org/{z}/{x}/{y}.png"),
try! VectorLayer("overlay", styleURL: "https://www.sample.org/overlay/style.json")
]
}
}
Style Configuration
Vector layers are configured using a style.json file that follows the Mapbox Style Specification. The style file defines:
- Sources: Where to fetch vector tile data
- Layers: How to render features from the sources
- Sprites: Icon and pattern images
- Glyphs: Font rendering configuration
Style.json Example
{
"version": 8,
"name": "Base Map",
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": [
"https://tiles.example.org/data/{z}/{x}/{y}.pbf"
],
"minzoom": 0,
"maxzoom": 14
}
},
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#f8f4f0"
}
},
{
"id": "water",
"type": "fill",
"source": "openmaptiles",
"source-layer": "water",
"paint": {
"fill-color": "#a0c8f0"
}
}
],
"glyphs": "https://fonts.example.org/{fontstack}/{range}.pbf"
}
Font Loading
Font data for vector layers is loaded via the FontLoaderInterface and not via the URL provided in style.json.
- A bitmap texture with multi-channel signed distance fields of all glyphs
- Corresponding metadata JSON
Font Data Structure
See the FontData class for the metadata structure. Font files can be created using the msdf-bmfont tool.
Import fonts from the app’s asset folder using the provided FontLoader.kt:val fontLoader = FontLoader(context)
// Fonts will be loaded from assets based on the font family names in style.json
Implement the FontLoaderInterface to provide font data:// Custom font loader implementation
class CustomFontLoader: MCFontLoaderInterface {
// Implement font loading logic
}
Parameters
Unique identifier for the layer
URL to the style.json configuration file
Android context (Android only)
Supported Features
Open Mobile Maps supports most of the Vector Tiles standard, including:
- Vector tile rendering from various sources
- Style-based feature rendering
- Multiple layer types (fill, line, symbol, etc.)
- Dynamic styling based on zoom level
- Text rendering with custom fonts
Additional vector layer features and differences from the standard are being documented.