[GIS] Map not rendering at zoom level 18+ using openlayers3 and leaflet

leafletopenlayersopenstreetmap

I've configured an OSM map server with mod_tile/renderd/postgres to display a basic map and everything works fine until I try to zoom into level 18 or more. At any zoom level less than 18, I can see renderd -f accepting connections and generating new map tiles. However, when I zoom into level 18 or more, I just get 404's in my weblogs and renderd service is completely quiet.

Also this only seems to be a problem through the browser. When I use render_list to pregenerate tiles, it works at every zoom level. And even when I point the browser to the area of the map that's been pregenerated at zoom 18+ the tiles don't display and again I get a bunch of 404's. I've used both openlayers3 and leaflet libraries and the problem is the same. Here's the relevant configs

renderd.conf

[style2]
URI=/osm_tiles2/
TILEDIR=/var/www/mod_tile
TILESIZE=256
XML=/var/www/osm-bright/osmbright.xml
HOST=localhost
TILESIZE=256
MINZOOM=4
MAXZOOM=20

leaflet

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" type="text/css">
    <link rel="stylesheet" href="leaflet/L.Control.Zoomslider.css" type="text/css">
    <style>
      html, body, .map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>Maps</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="leaflet/leaflet.js" type="text/javascript"></script>
    <script src="leaflet/L.Control.Zoomslider.js" type="text/javascript"></script>
    <script type="text/javascript">
      var map = L.map('map', {zoomControl: true}).setView([41.505, -100.183], 4);

      L.tileLayer('http://server/osm_tiles2/{z}/{x}/{y}.png', {
        minZoom: 4,
        maxZoom: 20,
        id: 'mapbox.streets'
      }).addTo(map);

      map.addControl(new L.Control.Zoomslider());
    </script>
  </body>
</html>

The openlayers3 html is basically the same. Anybody seen this before or can assist?

Best Answer

As the comment only talk about openlayers3. I think that it is OK to answer the leaflet one, it is similar to openlayers3 case, by providing maxNativeZoom , you should able to load map tiles on that zoom level:

  L.tileLayer('http://server/osm_tiles2/{z}/{x}/{y}.png', {
    minZoom: 4,
    maxZoom: 20,

    maxNativeZoom: 20,

    id: 'mapbox.streets'
  }).addTo(map);
Related Question