XYZ Layer

Simple XYZ Layer Example

View query content Open in editor mode Open in larger window.

You can define Layers that will load their map based on XYZ-Tiles. For this, you need to define the map ‘source’ property as ‘xyz’ and pass its ‘url’. You also need to define a unique name for the Layer.

  
  // Example of how to load a map with the XYZ source
  // The XYZ source is used to load a map from a URL that contains the z, x and y placeholders
  // The z is the zoom level, x is the longitude and y is the latitude

  [
    {
      title: 'Map rendered by a XYZ source',
      color: '#666699',
      elements: [
        {
          title: 'Base map loaded by XYZ source',
          // The name of the map that will be added. This name must be unique
          name: 'planet:planet',
          source: 'xyz',
          // The url of the map that will be loaded. The $z, $x and $y placeholders will be replaced by the map library
          url: 'https://tiles.planet.com/basemaps/v1/planet-tiles/planet_medres_visual_2021-09_mosaic/gmap/$z/$x/$y.png?api_key=PLAK78456687760442eaa3d3da16aaac5f2d',
          visibility: true,
        },
      ],
    },
  ]