Leaflet - Custom Map does not load - Wrong File Size? - customization

Question

Something like "OpenStreetMaps" works fine!
Everything is ok, Zoom and Marker works, small Code...
But when i add my own Url, the Tiles are get not loaded !
So i think there is something wrong with my Image Size ? Pixel ?
Leaflet Tutorial just say "add a Map Url"
Look in my Code there is a Notice with Examples,
i think this is not a "coding" Error, more like a File Error.
I hope somebody has a idea :-)
http://hizi.xyz/Map/

Answer 1

You are using http://www.hizi.xyz/Map/{z}/{x}/{y}.png as your base URL, but your tiles are actually at http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png.
At the zoom level you've initialized the map (11), you will not be able to see your custom tiles anyway, so you should set maxZoom: 5 in the map options. Also, your tiles only cover the northwestern quadrant of the map (from 0-85 degrees north and 0-180 degrees west), so you will either want to restrict panning within those bounds by setting the maxBounds option, or (if you actually want the map to be global) modify the directory structure by lowering the index for each of the {z} directories by 1. The following code should work to load your map as it is and prevent users from getting outside the boundaries of your map tiles:
var southWest = L.latLng(0, -180),
northEast = L.latLng(85, 0),
bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {maxZoom: 5, maxBounds: bounds}).setView([42.5, -90], 3);
L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png').addTo(map);
If, for aesthetic reasons, you want to keep the map from wrapping at the world boundaries, you may also want to set noWrap: true in the tileLayer options, i.e.:
L.tileLayer('http://www.hizi.xyz/Map/tiles/{z}/{x}/{y}.png', {noWrap: true}).addTo(map);
Here is an example fiddle that shows it working:
http://jsfiddle.net/nathansnider/6qeL29sm/