This article describes how to load and visualize worldwide OpenStreetMap imagery data in LuciadRIA. You access such data through
OpenStreetMap tile servers
that adhere to the tile URL pattern http(s)://baseUrl/${z}/${x}/${y}.png
. In that pattern, z
, x
, and y
refer
to zoom level, tile column, and tile row respectively. You can apply the principles used in this article to other tile servers
adhering to a similar tile URL pattern.
Visualizing OpenStreetMap raster tiles on a map requires two steps:
-
Create a
UrlTileSetModel
that applies the OpenStreetMap raster tiles settings. -
Use a
RasterTileSetLayer
to visualize the model.
// Create a model that applies the OpenStreetMap raster tiles' settings, including: // - the URL pattern consisting of baseUrl/{tileLevel}/{tileColumn}/{inverse tileRow}.png // - a Web Mercator projection // - a single top-level tile const webMercatorReference = getReference("EPSG:3857"); const quadTreeStructure : QuadTreeRasterTileSetStructure = { bounds: createBounds(webMercatorReference, [-20037508.3427892, 2 * 20037508.3427892, -20037508.3427892, 2 * 20037508.3427892]), level0Columns: 1, level0Rows: 1, reference: webMercatorReference }; const model = new UrlTileSetModel({ baseURL: "https://a.tile.openstreetmap.org/{z}/{x}/{-y}.png", structure: quadTreeStructure }) // Create a layer for the model. const layer = new RasterTileSetLayer(model, { label: "OpenStreetMap" });
You can download OpenStreetMap tiles from public providers, like the ones listed on https://wiki.openstreetmap.org/wiki/Raster_tile_providers. Please consider the usage policies of these public providers. Most of them offer free access to OpenStreetMap tiles, but have limited bandwidth, and discourage putting too much stress on their services.
You can also choose to serve OpenStreetMap tiles from your own machines. Check http://wiki.openstreetmap.org/wiki/Tile_servers for a list of servers that you can run to serve OpenStreetMap tiles.