Display raster tile layers on your map using TiledRasterLayer
Raster tile layers display map data as pre-rendered image tiles. Open Mobile Maps provides convenient APIs to work with web mercator tiles and custom tile configurations.
For different tile services or tile pyramids, create a custom Tiled2dMapLayerConfig.
Android
iOS
private val customConfig = object : Tiled2dMapLayerConfig() { // Defines the bounds of the layer and implicitly the coordinate system used by the layer as well val epsg3857Bounds: RectCoord = RectCoord( Coord(CoordinateSystemIdentifiers.EPSG3857(), -20037508.34, 20037508.34, 0.0), Coord(CoordinateSystemIdentifiers.EPSG3857(), 20037508.34, -20037508.34, 0.0) ) // Defines to map coordinate system of the layer override fun getCoordinateSystemIdentifier() : Int = CoordinateSystemIdentifiers.EPSG3857() // The layer's name override fun getLayerName(): String = "OSM_Layer" // Defines the url-pattern to load tiles. Enter a valid OSM tile server here override fun getTileUrl(x: Int, y: Int, t: Int, zoom: Int): String { return "https://a.tile.openstreetmap.org/$zoom/$x/$y.png" } // Defines origin corner of the data in vector tiles override fun getVectorSettings(): Tiled2dMapVectorSettings? = null // Defines the extent (in layer system coordinates) that defines the bounds of this layer override fun getBounds(): RectCoord? = null // Defines both an additional scale factor for the tiles (and if they are scaled to match the target // devices screen density), how many layers above the ideal one should be loaded an displayed as well, // as well as if the layer is drawn, when the zoom is smaller/larger than the valid range override fun getZoomInfo(): Tiled2dMapZoomInfo { return Tiled2dMapZoomInfo( zoomLevelScaleFactor = 0.6667f, numDrawPreviousLayers = 2, numDrawPreviousOrLaterTLayers = 0, adaptScaleToScreen = true, maskTile = false, underzoom = true, overzoom = true ) } // List of valid zoom-levels and their target zoom-value, the tile size in // the layers coordinate system, the number of tiles on that level and the // zoom identifier used for the tile-url (see getTileUrl above) override fun getZoomLevelInfos(): ArrayList<Tiled2dMapZoomLevelInfo> = ArrayList( listOf( Tiled2dMapZoomLevelInfo(559082264.029, 40075016f, 1, 1, 1, 0, epsg3857Bounds), Tiled2dMapZoomLevelInfo(279541132.015, 20037508f, 2, 2, 1, 1, epsg3857Bounds), Tiled2dMapZoomLevelInfo(139770566.007, 10018754f, 4, 4, 1, 2, epsg3857Bounds), // ... additional zoom levels ) )}
import MapCoreclass TiledLayerConfig: MCTiled2dMapLayerConfig { // Defines both an additional scale factor for the tiles (and if they are scaled // to match the target devices screen density), how many layers above the ideal // one should be loaded an displayed as well, as well as if the layer is drawn, // when the zoom is smaller/larger than the valid range func getZoomInfo() -> MCTiled2dMapZoomInfo { MCTiled2dMapZoomInfo(zoomLevelScaleFactor: 0.65, numDrawPreviousLayers: 1, adaptScaleToScreen: true) } // Defines to map coordinate system of the layer public func getCoordinateSystemIdentifier() -> Int32 { MCCoordinateSystemIdentifiers.epsg3857() } // Defines the bounds of the layer func getBounds() -> MCRectCoord { let identifer = MCCoordinateSystemIdentifiers.epsg3857() let topLeft = MCCoord(systemIdentifier: identifer, x: -20037508.34, y: 20037508.34, z: 0.0) let bottomRight = MCCoord(systemIdentifier: identifer, x: 20037508.34, y: -20037508.34, z: 0.0) return MCRectCoord( topLeft: topLeft, bottomRight: bottomRight) } // Defines the url-pattern to load tiles. Enter a valid OSM tile server here func getTileUrl(_ x: Int32, y: Int32, zoom: Int32) -> String { return "https://example.com/tiles/\(zoom)/\(x)/\(y).png" } // The Layername func getLayerName() -> String { "OSM Layer" } // List of valid zoom-levels and their target zoom-value, the tile size in // the layers coordinate system, the number of tiles on that level and the // zoom identifier used for the tile-url (see getTileUrl above) func getZoomLevelInfos() -> [MCTiled2dMapZoomLevelInfo] { [ .init(zoom: 559082264.029, tileWidthLayerSystemUnits: 40_075_016, numTilesX: 1, numTilesY: 1, numTilesT: 1, zoomLevelIdentifier: 0, bounds: getBounds()), .init(zoom: 279541132.015, tileWidthLayerSystemUnits: 20_037_508, numTilesX: 2, numTilesY: 2, numTilesT: 1, zoomLevelIdentifier: 1, bounds: getBounds()), .init(zoom: 139770566.007, tileWidthLayerSystemUnits: 10_018_754, numTilesX: 4, numTilesY: 4, numTilesT: 1, zoomLevelIdentifier: 2, bounds: getBounds()), // ... additional zoom levels ] }}