Skip to main content
This example demonstrates how to add a vector tile layer to your map. Vector tiles provide crisp, scalable maps that support the Vector Tiles Standard.

Complete Vector Layer Setup

import io.openmobilemaps.mapscore.map.MapView
import io.openmobilemaps.mapscore.map.MapConfig
import io.openmobilemaps.mapscore.shared.map.coordinates.CoordinateSystemFactory
import io.openmobilemaps.mapscore.shared.map.coordinates.CoordinateSystemIdentifiers
import io.openmobilemaps.mapscore.shared.map.coordinates.Coord
import io.openmobilemaps.mapscore.shared.map.layers.tiled.vector.TiledVectorLayer
import io.openmobilemaps.mapscore.MapsCore

class VectorMapActivity : AppCompatActivity() {
    private lateinit var mapView: MapView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Initialize the library
        MapsCore.initialize()
        
        // Get reference to MapView
        mapView = findViewById(R.id.mapView)
        
        // Setup map with EPSG:3857 coordinate system
        mapView.setupMap(MapConfig(CoordinateSystemFactory.getEpsg3857System()))
        mapView.registerLifecycle(lifecycle)
        
        // Create vector layer with style URL
        val tiledVectorLayer = TiledVectorLayer(
            this,
            "https://www.sample.org/base-map/style.json"
        )
        
        // Add layer to map
        mapView.add(tiledVectorLayer)
        
        // Move camera to initial position
        mapView.getCamera().moveToCenterPositionZoom(
            Coord(CoordinateSystemIdentifiers.EPSG4326(), 8.378232525377973, 46.962592372639634, 0.0),
            1000000.0,
            false
        )
    }
}

Combining Vector and Raster Layers

You can combine multiple layers, mixing vector and raster tiles:
// Add base raster layer
val baseRasterLayer = TiledRasterLayer()
mapView.addLayer(baseRasterLayer)

// Add vector overlay layer
val vectorOverlay = TiledVectorLayer(
    this,
    "https://www.sample.org/overlay/style.json"
)
mapView.add(vectorOverlay)

Font Loading (Android)

Vector layers require font data for text rendering. Font data is loaded via the FontLoaderInterface and not from the style.json URL. For each font type used in the layer, you need to provide:
  • A bitmap texture with multi-channel signed distance fields of all glyphs
  • Corresponding metadata JSON
You can create these files using msdf-bmfont and import them via the provided FontLoader.kt.

Result

The map will display crisp, scalable vector tiles that look sharp at any zoom level. Vector tiles support dynamic styling, smooth zooming, and smaller file sizes compared to raster tiles.

Build docs developers (and LLMs) love