Comment 5 for bug 1822455

Revision history for this message
Michael Rupp (wnymathguy-1) wrote :

Just an update to my #4 comment:

I wish I had some idea what I was doing, but instead, I can only follow recipes and guess at things I don't know yet. I did successfully launch that Docker type map server from OpenMapTiles on my local machine and it was almost as easy as they showed in the videos found through https://openmaptiles.com/server/
 https://www.youtube.com/watch?v=fJnZn1IpQHE
My only snag was not putting `sudo` in front of the `docker run --rm -it -v $(pwd):/data -p 8080:80 klokantech/openmaptiles-server` command I copied and pasted from the https://openmaptiles.org/docs/ guide.

I tried again using the JTileDownloader app with the"Output Zoom Level:" selection of 12, the "Output Zoom Levels (ex. 12,13,14):" textbox set to "8-18", option Mapnik selected and in the "Alt. Tileserver:" textbox I tried "http://localhost:8080/" which didn't work, then I tried "http://localhost:8080/styles/osm-bright/?raster#12/" which seemed to work. I transferred over the files to the phone as shown in https://unav.me/offline/ but still the offline maps just shows that pattern of an unplugged electric powercord.

I took a look inside one of the PNG files that came out of the "Download Tiles" operation using the Bluefish Editor. The contents of ~/maps/18/73677/96305.png is:

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>OSM Bright - TileServer GL</title>
  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
  <script src="/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="/mapbox.css" />
  <script src="/mapbox.js"></script>
  <script src="/leaflet-hash.js"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  <h1 style="display:none;">OSM Bright</h1>
  <div id='map'></div>
  <script>
    var q = (location.search || '').substr(1).split('&');
    var preference =
      q.indexOf('vector') >= 0 ? 'vector' :
        (q.indexOf('raster') >= 0 ? 'raster' :
          (mapboxgl.supported() ? 'vector' : 'raster'));
    if (preference == 'vector') {
      mapboxgl.setRTLTextPlugin('/mapbox-gl-rtl-text.js');
      var map = new mapboxgl.Map({
        container: 'map',
        style: '/styles/osm-bright/style.json',
        hash: true
      });
      map.addControl(new mapboxgl.NavigationControl());
    } else {
      var map = L.mapbox.map('map', '/styles/osm-bright.json', { zoomControl: false });
      new L.Control.Zoom({ position: 'topright' }).addTo(map);
      setTimeout(function() {
        new L.Hash(map);
      }, 0);
    }
  </script>
</body>
</html>
```

Is that what a map tile is supposed to look like? I thought tiles were a set of graphic image files in raster format that the software loaded and stitched together as the birds-eye-window slid across the plane. I clicked the "Export TileList" button on JTileDownloader and see "http://localhost:8080/styles/osm-bright/?raster#12/18/73677/96305.png" in the list. When I browse to it I get forwarded to "http://localhost:8080/styles/osm-bright/?raster#7/42.535/-75.194" and it's showing the whole New York, USA image tile I selected during the initial set-up phase on localhost:8080.

I think I'm going to try it one more time before giving up but I'll use "http://localhost:8080/styles/osm-bright/" where I had "http://localhost:8080/styles/osm-bright/?raster#12/" before.