After generating the OpenSeaMap tiles, I tried to add them as an overlay upon the openstreet basemap. The idea is after generating the OpenSeaMap tiles to serve them as "static" tiles to the client, from an image folder under /var/www/html from apache.

I copied the tiles/ folder under /var/www/html/map/ (in the same location with index.html) and added

in the section script of index.html the following:

var map = L.map('map');
map.setView([53.45 , 14.55],5);

var basemap = L.tileLayer('http://localhost/osm_tiles/{z}/{x}/{y}.png', {
maxZoom: 18

var sea = L.tileLayer('tiles/{z}/{x}/{y}.png', {
minZoom: 9,
maxZoom: 18

but I see in browser only the openstreetmap layer not the seamarks layer. But no error (pink page). I may also open openseamap tiles and view as pictures. Is something wrong with the file structure (see below)? What is wrong?

I also noticed that the x , y (coordinates) of the OpenSeaMap tiles are large numbers like this:

under 18/ (zoom) I have 219132/ (x) and then 120318.png

Instead the structure of osm tiles is a little bit different:

18/ (zoom)

under 18/ there exist 33/72/75/80/128.meta

1 Answer 1


If you use leaflet and you don't have an error, you can add a ControLayer on your map with the following lines :

//link to tiles
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmUrlcolor='http://{s}.tilexxxxx.com/watercolor/{z}/{x}/{y}.jpg';

//create two TileLayer
var osm=new L.TileLayer(osmUrl,{minZoom:1,maxZoom:20});
var osmcolor=new L.TileLayer(osmUrlcolor,{minZoom:1,maxZoom:20});

//add a layer which will be display first

//add basemaps in an array

//add a control layer to switch on the both basemaps

You can with it check if the both TileLayer are ok.

Hope it will be usefull

  • osmbg is not defined somewhere. Is that a mistake? Mar 17, 2016 at 15:26
  • osmbg is not defined somewhere. Is that a mistake? In my case osmUrl='localhost/osm_tiles{z}/{x}/{y}.png' and osmUrlcolor='tiles/{z}/{x}/{y}.png'. Is it possible for L.tileLayer to "read" the tiles from the filesystem (by using a relative or absolute path)?I have OpenSeaMap tiles pre-rendered and want to serve them to the client (via leaflet). How may I perform the check suggested? Mar 17, 2016 at 15:32
  • I used your code without the osmbg layer. The 'localhost/osm_tiles{z}/{x}/{y}.png' layer is ok! When I change to the other one (with the controlLayer feature) I only sea a light blue image. I must mention that OpenSeaMap tiles are transparent, which means that it is a sparse array, only populated at positions where there are non-blank tiles. Mar 17, 2016 at 15:55
  • To build your Tile Layer, check it out : build-failed.blogspot.fr/2012/11/…
    – Benno
    Mar 18, 2016 at 7:59
  • The first part of the tutorial demonstrates how to create tiles. I already have them. Finally the tiles are served as static files via web server. That's what I am trying to do but with no success! I have the tile folder in my /var/www/html/map directory next to index.html. But I see nothing when trying to view tiles from that directory. I read that nginx can be used to serve static files. What I want is to serve prerendered tiles as static files stored in my hard disk.... Any ideas Mar 18, 2016 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.