Integrate STREAM:RASTER Layers into a Web Map (XYZ Template)

Get Started

To integrate STREAM:RASTER layers into a web map, you'll need:

• A valid API Key
• Layer ID(s)

Layer ID

Each layer in STREAM:RASTER is assigned a unique 22-character alphanumeric identifier, known as a Layer ID.

To find a layer's Layer ID, download the WMTS capabilities document with the following request, replacing {API_KEY} with your actual key:

https://raster.stream.woolpert.io/ogc/wmts/1.0.0/capabilities?key={API_KEY}

In the capabilities XML that is returned, look for the Contents/Layer element(s). Each layer will have ows:Title and ows:Abstract child elements containing the layer's name and description. Find the layer you want to view and locate its ows:Identifier element—that element contains the Layer ID.

"XYZ" URL Templates

STREAM:RASTER tiles can be added to web maps using an XYZ-style URL template of the form:

https://raster.stream.woolpert.io/layers/{layer_id}/tiles/{z}/{x}/{y}?key={api_key}

• layer_id - unique 22-character alphanumeric identifier found in the Contents/Layer/ows:Identifier tag of your WMTS capabilities document
• z - zoom level index
• x - tile grid column index (northwest origin)
• y - tile grid row index (northwest origin)
• api_key - your API Key

Code Snippets

Sample code to add STREAM:RASTER tile layers in some common map libraries follows:

• ArcGIS JS API
• Google Maps JS API
• Mapbox GL JS
• OpenLayers

ArcGIS JS API

Create a WebTileLayer

new WebTileLayer({
 urlTemplate: 'https://raster.stream.woolpert.io/layers/LAYER_ID/tiles/'
   + '{level}/{col}/{row}?key=API_KEY'
});

Live Demo

Google Maps JS API

Create a custom ImageMapType overlay

map.overlayMapTypes.push(new google.maps.ImageMapType({
 tileSize: new google.maps.Size(256, 256),
 getTileUrl: function (coord, zoom) {
   return 'https://raster.stream.woolpert.io/layers/LAYER_ID/tiles/'
     + zoom + '/' + coord.x + '/' + coord.y + '?key=API_KEY';
 },
}));

Live Demo

Mapbox GL JS

Register a raster tiled source, then create a layer referencing that source

map.addSource('stream-raster-source', {
  type: 'raster',
  tiles: [
    'https://raster.stream.woolpert.io/layers/LAYER_ID/tiles/'
      + '{z}/{x}/{y}?key=API_KEY'
  ],
  tileSize: 256,
});
map.addLayer({
  id: 'stream-raster-layer',
  type: 'raster',
  source: 'stream-raster-source',
});

Live Demo

OpenLayers

Create a Tile layer with an XYZ source

new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://raster.stream.woolpert.io/layers/LAYER_ID/tiles/'
      + '{z}/{x}/{y}?key=API_KEY'
  })
})

Live Demo

Related

Get Started with STREAM:RASTER

Request a new STREAM:RASTER API Key

View STREAM:RASTER tile layers in GIS applications (WMTS)