Leaflet custom map with custom tiles

Question

I am trying to make a custom map with leafletjs, and i've figured it out for the version 0.6.x but when it comes to the latest version (0.7.x) it does not work.

This is the code that works with 0.6.x

Anyone has had this issue before?

var mapMinZoom = 0;
    var mapMaxZoom = 5;
    var map = L.map('wu-map', {
      maxZoom: mapMaxZoom,
      minZoom: mapMinZoom,
      crs: L.CRS.Simple
    }).setView([0, 0], mapMaxZoom);

    var mapBounds = new L.LatLngBounds(
      map.unproject([0, 3072], mapMaxZoom),
      map.unproject([4352, 0], mapMaxZoom));

    map.fitBounds(mapBounds);

    L.tileLayer('images/map/{z}/{x}/{y}.png', {
      minZoom: mapMinZoom, maxZoom: mapMaxZoom,
      bounds: mapBounds,
      attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
      noWrap: true,
      tms: false
    }).addTo(map);

No error, the map just does not get displayed, though it works perfectly with the version 0.6.x — sadiqevani
Do you mean that map is not shown at all (even zoomIn and zoomOut buttons) or tile layer is not being loaded? — Alexandr Lazarev
only the map is not being shown, the other elements zoomin buttons work. — sadiqevani

Alexandr Lazarev Alexandr Lazarev · Accepted Answer · 2015-12-10T14:07:40

There is a bug in leaflet.js 0.7 version that appears when crs option is set to L.CRS.Simple value (and not only). Leaflet 0.7 introduced L.CRS.getSize (a function which returns the size of the world in pixels for a particular zoom for particular coordinate reference system), which by default calls and returns the same value as L.CRS.scale. It works great for the default CRS and fails for others.

All I can suggest is to remove crs: L.CRS.Simple from your options object, it will be set to default value (L.CRS.EPSG3857):

var map = L.map('wu-map', {
  maxZoom: mapMaxZoom,
  minZoom: mapMinZoom
}).setView([0, 0], mapMaxZoom);

Leaflet custom map with custom tiles

1 Answers