I am building a map based chart using Leaflet (with MapBox). I would like to know if there is a way to control the level of details displayed on the map when zooming in. For example I do not want to see Interstate highway or street names.

This link explains how to do this using google maps.


Yes, there are at least two ways.

  1. Leaflet's zoomend event. For example:

    map.on('zoomend', function() {  
    var zoomLevel = map.getZoom();  
        if (zoomLevel > 10) map.removeLayer(highways);  

    This is (very) incomplete. Most likely you will want to add and remove layers based on the current zoom level.

    Here is an example from MapBox for hiding markers at specific zoom levels with this event, plus some custom MapBox methods.

  2. L.tileLayer has options for minZoom and maxZoom. So, if you have access to tiles with and without labels (highways, etc.), you can pass these options when generating the tile layers:

    // tiles with labels for high zoom
    var withLabels = L.tileLayer(url, {
        maxZoom: 18,
        minZoom: 11,
    // tiles without labels for low zoom
    var noLabels = L.tileLayer(url, {
        maxZoom: 19,
        minZoom: 0,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.