CODEWITHSUNDEEP
javascriptleafletopenstreetmap
Joris Mathijssen
Joris Mathijssen

Reputation: 669

Showing more details ons leaflet map

Currently i'm implementing a leaflet map that serves map data from our own OSM server.

During the implementation I noticed that the details on the maps are not clearly visible. Street names are unclear and walking paths do not stand out.

We currently support a zoom level of 17. However, the tiles received are of high quality and show much more detail than leaflet does. If I zoom in further, the tiles unfortunately turn gray.

An implementation with OpenLayers looks clearer.

Is there a setting that solves this or that allows you to zoom in without showing gray tiles? I thought this was maxNativeZoom but if i put this field on 17, it still tries to show zoom level 18 tiles.

enter image description here

const osmLayer = new L.TileLayer(osmUrl,
    {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

const element = elemId[0].className + "-" + mapId;

const map = new L.Map(element,
    {
        maxZoom: 22,
        maxNativeZoom: 17,
        minZoom: 9
    });

map.addLayer(osmLayer);

return map;

Upvotes: 0

Views: 440

Answers (1)

Joris Mathijssen
Joris Mathijssen

Reputation: 669

I just moved the zoom settings to the tileLayer and that seems to work. The settings are properties of the tileLayer:

const osmLayer = new L.TileLayer(osmUrl,
    {
        maxZoom: 20,
        maxNativeZoom: 17,
        minZoom: 9,
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

const element = elemId[0].className + "-" + mapId;

const map = new L.Map(element);

map.addLayer(osmLayer);

return map;

Upvotes: 0

Related Questions