ODM Tiles not working in Openlayers


#1

I’m having issues using tiles in OpenLayers that I generated and exported with WebODM. Is there anything more that I need to do get this to work. Are the tiles generated in a non-standard projection? This is the only thing I can think of considering that the code works with tiles generated by MapTiler. Any help would be greatly appreciated.

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
    var odmLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "{z}/{x}/{y}.png"
            })
        });
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          odmLayer
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([-87.404804, 37.944298]),
          zoom: 19
        })
      });
    </script>

#2

Your URL:

url: "{z}/{x}/{y}.png"

Does it point to a valid URL where WebODM is running? Or to a valid path where the tiles are stored?

If you are serving the tiles from a running instance of WebODM, see http://docs.webodm.org/#orthophoto-tms-layer for the exact URL format. You’ll also need to share the task (by pressing the “Share” button) from WebODM if you want it to be displayed publicly (without authentication).

I’m not sure if it helps, but this is how we use the tiles using Leaflet. https://github.com/OpenDroneMap/WebODM/blob/master/app/static/app/js/components/Map.jsx#L95


#3

I grabbed the tiles from the full download that WebODM provides and I’m storing them in an AWS S3 bucket. I did not want to share the url. That being said I can assure you that the files do load BUT I have to change the names of the files to coordinates of the area that I’m looking at. Also, if I use tiles generated by MapTiler, those work as well. Do you guys have a working example of tiles generated in ODM being using in OpenLayers? I can’t seem to find anything online grading this.


#4

Maybe this link will help: https://gis.stackexchange.com/questions/286649/displaying-tiles-generated-by-gdal2tiles-with-openlayers

url: './data/maps/7068/temp/{z}/{x}/{-y}.png',

Because XYZ tiling scheme differs from TMS scheme (produced by gdal2tiles) for tiles. It’s because Y numbering starts at the top for XYZ and at the bottom for TMS (hence the minus sign in suggested url change)


#5

This is the answer. Thank you for your help.