I added the OSM tiles and my tiles(193ortho) which I am serving from the same folder that html file is in, but the tiles I made won't appear. The tiled images appear fine in the webviewer that is created when you tile out an image. I followed this tutorial: http://build-failed.blogspot.com/2012/11/zoomable-image-with-leaflet.html

<link rel="stylesheet"
     href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<div id="map" style="width: 700px; height: 500px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    var map = L.map('map').setView([32.96, -83.11], 2);
    L.tileLayer('193ortho/{z}/{x}/{y}.png', {
        attribution: 'ESO/INAF-VST/OmegaCAM',
        tms: true


When you directly add Tile Layers to a map, they are just "stacked" one of top of the others in the tilePane. So if the top (last) one is not transparent, it just hides all other Tile Layers.

Start first by not adding the OSM Tile Layer and make sure your own Tile Layer displays fine.

Then you might be interested in implementing the Layers Control, which is a nice and common feature to allow the user switching between base layers.

Have a look at the nice Leaflet Tutorial for Layers Control.

By the way, you might also want to upgrade to Leaflet 0.7.7 to benefit from latest bug fixes.

  • Thank you for the answer, I can now select between the OSM layer and my custom tiles but the tiles still not appear. Interestingly enough, Chrome's developer tools do not show any call to that folder at all. – user1232812 Nov 15 '15 at 6:53
  • Strange indeed… You can try adding ./ in front of your path, just in case, but this should not be needed normally (./193ortho/…). Have you tried with only your own Tile Layer added directly to the map, without OSM nor Layers Control? – ghybs Nov 15 '15 at 9:26

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.