CODEWITHSUNDEEP
javascriptleaflet
sadiqevani
sadiqevani

Reputation: 500

Leaflet custom map with custom tiles

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);

Upvotes: 1

Views: 1295

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12862

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);

Upvotes: 1

Related Questions