1

Within the zoom bar, is there a way to include a home extent button that the user could click to zoom to the same extent as the initial extent of the map?

1

Yes, if I'm understanding your question correctly.

Leaflet has a method called setView (link) that changes the center and zoom level of your map. You can even animate the transition!

A button, like this <div id='button_div'>Reset View</div>, will work with the following CartoDB.js/Leaflet code:

var map = new L.Map('map', { center: [45, -122], zoom: 5 });

var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
             }).addTo(map);

cartodb.createLayer(map,'link/to/viz.json')
    .addTo(map)
    .done(function(layer) {
        $("#button_div").on('click', function(e) {
            map.setView([-122,45],5);
        });
    })
    .error(function(err) {
        console.log("Error: " + err);
    });
0

Here is a pure leaflet solution; it extends the built in Leaflet zoom control to add a zoom home button.

'Home' button Leaflet map

Unfortunately, I'm not familiar enough with cartodb.js to know what changes (if any) will be necessary to get this working with the cartodb version of leaflet, but this should at least get you started

0

Successfully achieved in the following example by making the map object a global variable. View example code here

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.