Serving Tiles of format {z}/{x}/{-y}.png in Openlayers version 6.3.1

Geographic Information Systems Asked on April 27, 2021

I am facing a problem in serving the map tiles in Openlayers the format for the tiles is {z}/{x}/{-y}.png but when i try to add this url into the tile source it is giving me the following error

Please find the code attached for the page

<!doctype html>
<html lang="en">
<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>Climate Maps - Interactive global monthly climate maps</title>

<style>
  html, body {
  height:100%;
  overflow-x: hidden;
  }

  body {
      padding-top: 68px;
  }

  #map-container {
      position: relative;
      padding: 0;
      height: 100%;
      width: 100%;
  }

  #map {
      position: relative;
      padding: 0;
      height: 100%;
      width: 100%;
  }

  #info {
      position: absolute;
      border-radius: 5px;
      background-color: black;
      color: white;
      padding: 7px;
      z-index: 1;
  }

  #slider-container {
      position: absolute;
      left:0;
      right:0;
      bottom: 0%;
      width: 100%;
      max-width: 1200px;
      margin: auto;
      padding: 0em 0em 0em 0em;
      background-color: white;
      border-radius: 5px 5px 0px 0px;
      z-index: 1;
  }

  .plot-stettings-input-fields {
      padding: 0.5em 1em 0.5em 1em;
  }

  #colorbar-legend-container {
      position: absolute;
      top: 4em;
      right: 5px;
      height: 50%;
      width: 12%;
      max-width: 6em;
      margin: auto;
      background-image: url("./data/precipitation/1_colorbar.png");
      background-size: contain;
      background-repeat: no-repeat;
      padding: 0.5em 0.5em 0.5em 0.5em;
      font-weight: bold;
      z-index: 1;
      display: block;
  }

  .ol-attribution {
      display: none;  /* attributions can be found in the about.html page */
  }


</style>

</head>

<body>


  <div id="map-container">
    <div id="map"></div>
  </div>

<script>
  var lon = 0.0;
  var lat = 10.0;

  var map = new ol.Map({
    target: 'map',
    interactions: ol.interaction.defaults({keyboard:false}),  // disable because this moves the map when using the arrow keys to change the slider
  });

  var view = new ol.View({
    center: [0, 0],
    zoom: 3,
    projection: 'EPSG:3857'
  });

  view.setCenter(ol.proj.fromLonLat([lon, lat]));
  map.setView(view);

  var osmSource = new ol.source.OSM('OpenCycleMap');
  
  osmSource.setUrl('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png');
  

  var osmLayer = new ol.layer.Tile({source: osmSource});
  map.addLayer(osmLayer);
  map.addControl(new ol.control.FullScreen());
var templayer=new ol.layer.Tile({
  title: "Czone",
  source: new ol.source.Tile({ url: 'https://conze.pt/app/climate-data/data/meantemp/6/maptiles/{z}/{x}/{-y}.png' })
  
});

 map.addLayer(templayer);
</script>

</body>

</html>

openlayers tile server tiles tiling scheme

One Answer

So basically i had to change the type of tile from ol.source.tile to ol.source.XYZ. I replaced this line of code

var templayer=new ol.layer.Tile({
title: "Czone",
 source: new ol.source.Tile({ url: 'https://conze.pt/app/climate- data/data/meantemp/6/maptiles/{z}/{x}/{-y}.png' })

});

with this

var templayer=new ol.layer.Tile({
title: "Czone",
 source: new ol.source.XYZ({ url: 'https://conze.pt/app/climate-data/data/meantemp/6/maptiles/{z}/{x}/{-y}.png' })

});

Answered by hashir ilyas on April 27, 2021

Add your own answers!

Ask a Question

Get help from others!