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. For an overview of available servers, see http://wiki.openstreetmap.org/wiki/Tile_servers. You can apply the principles used in this article to other tile servers adhering to a similar tile URL pattern.

Next to OpenStreetMap tile servers, you can also encounter OGC-based WMS and WMTS servers on the Internet that offer OpenStreetMap data. The OGC web services articles for WMS and WMTS explain how to load and visualize data from such servers.

Visualizing OpenStreetMap raster tiles on a map requires two steps:

  1. Create a UrlTileSetModel that applies the OpenStreetMap raster tiles settings.

  2. 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 model = new UrlTileSetModel({
  baseURL: "https://a.tile.openstreetmap.org/{z}/{x}/{-y}.png",
  bounds: createBounds(webMercatorReference, [-20037508.3427892, 2 * 20037508.3427892, -20037508.3427892, 2 * 20037508.3427892]),
  level0Columns: 1,
  level0Rows: 1,
  reference: webMercatorReference
})
// Create a layer for the model.
const layer = new RasterTileSetLayer(model, {
  label: "OpenStreetMap"
});