Accueil / Blog / Métier / Archives / Leaflet Zoom Switcher

Leaflet Zoom Switcher

Par Sylvain Beorchia — 18/10/2012

Have you ever experienced an automatic layer switching when browsing on a map  ? Your current baselayer is a satellite view, and at the next zoom, baselayer becomes an aerial map or a road map.
Most of the time you have the choice for selecting the baselayer when you want, and at the scale you want.
But Sometimes, it's usefull to make this automatic.

We had to do this for a project, then we did it with Leaflet, just by adding 2 small classes.

First one is an extent of the TileLayer class. I named it TileLayerZoomSwitch. It defines only 3 more variables in the options, and set a few methods for settings of getting these variables.

L.TileLayerZoomSwitch = L.TileLayer.extend({
	includes: L.Mixin.Events,

	options: {
        // switchZoomUnder: when zoom < switchZoomUnder, then switch to switchLayer
        switchZoomUnder : -1,
        // switchZoomAbove: when zoom >= switchZoomAbove, then switch to switchLayer
        switchZoomAbove: -1,
        switchLayer: null

    setSwitchLayer: function (layer) {
        this.options.switchLayer = layer;
    getSwitchZoomUnder: function () {
        return this.options.switchZoomUnder;
    getSwitchZoomAbove: function () {
        return this.options.switchZoomAbove;
    getSwitchLayer: function () {
        return this.options.switchLayer;


L.tileLayerZoomSwitch = function (url, options) {
	return new L.TileLayerZoomSwitch(url, options);

Second one is a SwitchLayermanager class, where all the "magic" occurs. It just checks the current level of zoom when the user is zooming (in or out),
and automatically adds or removes base layers according to their configuration.

 * SwitchLayerManager is a custom class for managing base layer automatic switching according to the current zoom level

SwitchLayerManager = L.Class.extend({

    _map: null,

    options: {
        baseLayers: null

    initialize: function (map, options) {
        this._map = map;
        L.Util.setOptions(this, options);
            'zoomend': this._update
        }, this)

    _update: function (e) {
        var zoom = this._map.getZoom();
        for (var i in this.options.baseLayers) {
            var curBL = this.options.baseLayers[i];
            var zoomUnder = curBL.getSwitchZoomUnder();
            var zoomAbove = curBL.getSwitchZoomAbove();
            var switchLayer = curBL.getSwitchLayer();
            // If layer got a switchlayer, and if layer actually displayed
            if (switchLayer && curBL._map != null) {
                if(zoomUnder != -1 && zoom < zoomUnder) {
                    this._map.addLayer(switchLayer, false);
                if(zoomAbove != -1 && zoom >= zoomAbove) {
                    this._map.addLayer(switchLayer, false);

And that's it.
Now, how to use it ?
Here is an example :

var osmUrl='http://{s}{z}/{x}/{y}.png';
var osmAttrib='Map data © openstreetmap contributors';
var cmUrl = 'http://{s}{z}/{x}/{y}.png';
var cmAttrib = 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">CloudMade</a>;'

cloudmade = new L.TileLayerZoomSwitch(cmUrl,{attribution: cmAttrib, switchZoomUnder: 12});
osm = new L.TileLayerZoomSwitch(osmUrl,{minZoom:8, maxZoom:18, switchZoomAbove: 12, switchLayer: cloudmade, attribution:osmAttrib});

var baseLayers = {
    "Cloudmade": cloudmade,
    "Osm": osm
switchManager = new SwitchLayerManager(map, {baseLayers: baseLayers});

The layer named cloudmade will be the active one till zoom 12. Layer osm will be the active one from zoom 12 to 1.
Note that the switchLayer option is defined directly for the osm layer, and we have to call setSwitchLayer() for cloudmade layer.

Mots-clés associés : ,
Voir aussi
Makina Corpus, sponsor au FROG 2013Makina Corpus, sponsor au FROG 2013 15/03/2013

Une journée de conférences sur la géomatique et les données géographiques libres le 10 juin ...

Makina Corpus acteur de l'économie circulaireMakina Corpus acteur de l'économie circulaire 20/09/2013

L'économie circulaire est le premier des cinq sujets abordés lors des tables rondes de la ...

Formez-vous aux alternatives Open Source à Google Maps et ses APIFormez-vous aux alternatives Open Source à Google Maps et ses API 28/07/2014

Leaflet, OpenStreetMap, TileMill, OpenLayers... Réalisez vos propres cartes interactives, ...

Convertir un flux TourInFrance en GeoJSONConvertir un flux TourInFrance en GeoJSON 27/03/2014

Une bibliothèque python minimaliste qui rend les contenus compatibles avec la plupart des outils ...

Dessiner une ville à la main avec TileMill (2 - Découper 340 000 polygones)Dessiner une ville à la main avec TileMill (2 - Découper 340 000 polygones) 19/03/2014

Comme nous l'avons vu dans un précédent article, la création d'une carte urbaine reproduisant un ...