Constructing the slippy tiles back into larger images

[CooperNederhood]

Hello, I'm wondering how, after you've built the training data folders for the masks and images, you can compile the slippy map tiles into a single (or at least many larger) images. As a check, I'd like to visually inspect the imagery that I've downloaded along with the corresponding classification masks. From my review of the Slippy Map format, given the format " /zoom/x/y.png", I should just be able to join the tiles in a grid fashion using the x and y values. Am I mistaken here?

I extracted a rectangular region, yet I find that the "x" subdirectories contain often wildly different numbers of tiles. Any suggestions?

Thanks!

[jqtrde]

You could use something like https://github.com/mapbox/untiler to stitch them back together again - but I wonder if it would be more useful to run a local tileserver and view them on a proper map instead?

[CooperNederhood]

Hmm, I've never run a local tileserver (coming from a deep learning background) but that sounds promising. I am investigating now but if you have any resources on how to get a local tileserver set up it would be much appreciated. Thank you!

[daniel-j-h]

To avoid the xy problem - what do you want to do with the larger images? If it's for visualization or further post-processing just serve your slippy map directory via HTTP e.g. via

python3 -m http.server

and then point any map framework to this endpoint, e.g. using Mapbox GL JS check out the compare map we provide

https://github.com/mapbox/robosat/blob/a8e0e3d676b454b61df03897e43e003867b6ef48/robosat/tools/templates/map.html

This will give you an interactive map loading tiles on demand

You can do this for the aerial imagery, the probability files, and the mask files.

[CooperNederhood]

Thanks, I do want to just view the aerial imagery, the masks, and the probability files so I think the tileserver is the way to go. I have successfully run the:

python3 -m http.server

And I can navigate to the corresponding directory in my web browser but I'm unclear as to what you mean by "point any map framework to this endpoint" and how to make use of the html script you linked. My apologies if this seems obtuse, this is my first time doing this.

[daniel-j-h]

1. Create an index.html similar to the template in

https://github.com/mapbox/robosat/blob/a8e0e3d676b454b61df03897e43e003867b6ef48/robosat/tools/templates/map.html

2. Use e.g. Mapbox GL JS (see template) to visualize Slippy Map raster tiles

3. Point a raster layer to localhost, port (this is where your http server serves your tiles).

If you put the index.html into your slippy map dir, you can use the simple Python HTTP server to serve both your index.html and your slippy map tiles.

[jqtrde]

Think this is resolved - please reopen if there are further questions!

[dorbodwolf]

sorry for disturb.
I try to serve my slippy map tiles generated by running this script, but I failed to do it. I cannot understand this:

just serve your slippy map directory via HTTP , and then point any map framework to this endpoint

below are what I tried:

1. pwd to the tiles dir

(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles$ pwd
/home/tiandeyu/robosat-taipei/robosat-hainan/tiles

this is my tile folders, the image format is webp, and my map.html here:

(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles$ ls
17  maketiles.ipynb  map.html  raster.html
(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles$ cd 17
(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles/17$ ls
105626  105629  105632  105635  105638  105641  105644  105647  105650  105653  105656  105659  105662  105665  105668  105671  105674  105677  105680  105683  105686
105627  105630  105633  105636  105639  105642  105645  105648  105651  105654  105657  105660  105663  105666  105669  105672  105675  105678  105681  105684
105628  105631  105634  105637  105640  105643  105646  105649  105652  105655  105658  105661  105664  105667  105670  105673  105676  105679  105682  105685
(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles/17$ pwd
/home/tiandeyu/robosat-taipei/robosat-hainan/tiles/17

2. open the python3 http server in port 8887 and I can check the dir and files in my browser

(base) tiandeyu@deekongone:~/robosat-taipei/robosat-hainan/tiles$ python -m http.server --bind=127.0.0.1 8887 
Serving HTTP on 127.0.0.1 port 8887 (http://127.0.0.1:8887/) ...
127.0.0.1 - - [30/Nov/2019 12:55:29] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [30/Nov/2019 12:55:33] "GET /map.html HTTP/1.1" 200 -
127.0.0.1 - - [30/Nov/2019 12:55:52] "GET /raster.html HTTP/1.1" 200 -
127.0.0.1 - - [30/Nov/2019 12:56:14] "GET /18/ HTTP/1.1" 200 -
127.0.0.1 - - [30/Nov/2019 12:56:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [30/Nov/2019 13:01:27] "GET /17/ HTTP/1.1" 200 -

3. Then I try to visualize the slippy map tiles with Mapbox GL JS API, but I can not find my tiles in the local address:http://127.0.0.1:8887/map.html#17
   here is the contents of the map.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Robosat</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<style>
body {
    overflow: hidden;
}

body * {
   -webkit-touch-callout: none;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
</style>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />

<div id='before' class='map'></div>
<div id='after' class='map'></div>

<script>
mapboxgl.accessToken = 'my mapbox public token';

var beforeMap = new mapboxgl.Map({
  container: 'before',
  center: [110, 29],
  zoom: 17,
  minZoom: 1,
  maxZoom: 20,
  hash: true,
  style: 'mapbox://styles/mapbox/light-v9'
});

var afterMap = new mapboxgl.Map({
  container: 'after',
  center: [110, 29],
  zoom: 17,
  minZoom: 1,
  maxZoom: 20,
  hash: true,
  style: 'mapbox://styles/mapbox/light-v9'
});

var map = new mapboxgl.Compare(beforeMap, afterMap, {});

afterMap.on('load', function() {
  afterMap.addLayer({
    'id': 'robosat',
    'type': 'raster',
    'source': {
      'type': 'raster',
      'tiles': [ 'http://127.0.0.1:8887/{z}/{x}/{y}.webp' ],
      'tileSize': 256
    }
  });

  afterMap.setPaintProperty('robosat', 'raster-opacity', 0.6);
});
</script>

</body>
</html>