Skip to content

Display your XYZ Space content

Adding a SpaceProvider as an additional Layer to the display enables you to quickly show your content on top of a map, without having to impement any additional functionality to fetch data from the space every time the user interacts with the map, like panning the map or zooming in and out. This will be handled completely by the provider/layer combination and the only thing you need to configure is where the data is you want to show, and at which zoom levels you want it to be visible.

  1. Create and configure a SpaceProvider acting as a datasource to your XYZ Space content

    // Define provider for this layer
    var mySpaceProvider = new here.xyz.maps.providers.SpaceProvider ({
      // Name of the provider
      name:  'SpaceProvider',
    
      // Zoom level at which tiles are cached
      level: 14,
    
      // Space name
      space: 'playground-link',
    
      // User credential of the provider
      credentials: {
              access_token: YOUR_ACCESS_TOKEN
      }
    });
    

  2. Create a Layer for displaying your data provided by your GeoSpaceProvider

    // Create data layer with Space provider
    var myLayer = new here.xyz.maps.layers.TileLayer({
      // Name of the layer
      name: 'mySpaceLayer',
    
      // Minimum zoom level
      min: 14,
    
      // Maximum zoom level
      max: 20,
    
      // Define provider for this layer
      provider: mySpaceProvider
    })
    

  3. And now add the Layer to your display

    display.addLayer( myLayer )