I use OpenStreetMap with Leaflet.js.

I have a map with an indoor picture on it. The problem is when I zoom in, streets disapears. Do you know anything that can solve this plz? Tricks or tips!

EDIT:

// Load the Map
this.map_ = L.map($(selector)[0], {
    center: [
      48.8459382,
      2.2863024,
    ],

    maxZoom: 24,
    zoom: 20,
});

I use OpenStreetMap with Leaflet.js.

I have a map with an indoor picture on it. The problem is when I zoom in, streets disapears. Do you know anything that can solve this plz? Tricks or tips!

EDIT:

// Load the Map
this.map_ = L.map($(selector)[0], {
    center: [
      48.8459382,
      2.2863024,
    ],

    maxZoom: 24,
    zoom: 20,
});

• javascript
• leaflet
• openstreetmap

• 1 Can you share some piece of your code or fiddle? We can only guess that zoom level is greater than 20, but OSM tiles are only from 0-20. – mattesCZ Commented Nov 30, 2015 at 16:41

1 Answer 1

I guess you have used map.options.maxZoom at a high number to let the user zoom to see your indoor image details.

However, OSM tiles are not available past zoom level 19, so the server returns 404 errors and your tiles are replaced by the Error Tile (or just a grey tile if not specified).

In that case, you would simply need to use these 2 options (together) on Tile Layer to tell Leaflet to re-use tiles from a lower zoom and to expand them:

• maxNativeZoom set at 19.
• maxZoom set at whatever you need, and equal to map.options.maxZoom if specified.

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxNativeZoom: 19, // OSM max available zoom is at 19.
    maxZoom: 22 // Match the map maxZoom, or leave map.options.maxZoom undefined.
}).addTo(map);

Demo: http://jsfiddle.net/ve2huzxw/68/