[GIS] How to add OpenSeaMap tiles as an overlay on top of osm base map with Leaflet

Question

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
)}.addTo(map);

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

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

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
map.addLayer(osmbg);

//add basemaps in an array
baseMaps={"OSM":osm,"COLOR":osmcolor};

//add a control layer to switch on the both basemaps
ControlLayer=L.control.layers(baseMaps).addTo(map);

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

Hope it will be usefull