I need to run an OpenLayers instance offline. I am trying to load map image tiles which I have downloaded from here. I am running TilerServer-GL docker image as specified in the documentation. I have a simple index.html
file to display an OpenLayers map as specified in the OpenLayers QuickStart documentation. The only change I have made to the .html
they provide is to change the Tile Layer source as follows:
source: new ol.source.XYZ({
url: 'http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}',
attributions: ['MapTiler: https://www.maptiler.com/copyright/', 'OpenStreetMap: https://www.openstreetmap.org/copyright'],
maxZoom: 5,
}),
This map loads as expected when using the OSM()
source as specified in the QuickStart docs. It also loads other online sources I have found. But when I give it the reference to the local TileServer-GL instance as I have indicated in my code above, I get the following CORB error:
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/data/openmaptiles_satellite_lowres/
with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details
How can I securely access the tile data being served by TileServer-GL? I do not want to disable browser security features as a work around.
Note: I know the TileServer is getting the requests from the browser because the TileServer console logs the requests in real time. For example:
GET /data/openmaptiles_satellite_lowres/ 200 899 - 0.704 ms
OS: ubuntu 20.04 LTS
Node version: v16.5.0
OpenLayers Version: 6.6.1
EDIT:
Steps to reproduce:
index.html
.index.html
docker pull maptiler/tileserver-gl
index.html
run docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl
(Note: If you are on Windows you need to use ${pwd}
, not $(pwd)
. Docker may throw a warning if one of your folder names has a space character in it.)Tada! You (almost) have a working offline maps app!
Turns out that the reason the CORB error was being thrown was because the server was responding with a 'text/html' MIME type and the browser was expecting an image. Since it didn't match, the CORB error was thrown.
The server was responding with the wrong type because the URL was wrong. I had:
http://localhost:8080/data/openmaptiles_satellite_lowres/#{z}/{x}/{y}
While it needed to be
http://localhost:8080/data/openmaptiles_satellite_lowres/{z}/{x}/{y}.jpg
The first URL worked fine if I put it directly into the browser, but only the second URL worked inside the JavaScript fetch request.