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!

Recent Answers

Lex on Does Google Analytics track 404 page responses as valid page views?
Peter Machado on Why fry rice before boiling?
Joshua Engel on Why fry rice before boiling?
Jon Church on Why fry rice before boiling?
haakon.io on Why fry rice before boiling?