I'm creating a map like this:

var map_object = new L.Map('map', {
    center: [39.8282, -98.5795],
    zoom: 5,


var sublayers = [];

  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'

    .done(function(layer) {
       for (var i = 0; i < layer.getSubLayerCount(); i++) {
           sublayers[i] = layer.getSubLayer(i);               

This works great. I'm then changing the zoom and adding circles based on user clicking buttons.

Is there a simple way to get the map back to its original condition (i.e. before all the changes and additions created by user actions)? I'm looking to see if there's something better than removing each layer and rezooming, etc.

I tried to use map.remove and then run all the code above again, but this gives me an error:

Uncaught Error: Map container not found.

Which is referring to this line:

var map_object = new L.Map('map', {
  • Sounds like Leaflet can't find the map div. Is it possible that you've deleted the div from the dom, using something like jQuery remove()? $( "#map" ).remove();
    – toms
    Mar 27, 2015 at 5:15
  • I thought this was the issue as well, but I've got nothing like this in my code.
    – jonmrich
    Mar 27, 2015 at 10:55

1 Answer 1


You can use sublayer.remove()(docs) or sublayer.hide() (docs) when the reset button is clicked.

This course of the CartoDB Academy explains how to work with .show() and .hide() in an interactive map via Javascript.

A related code sample:

var sublayer0Shown = true;
$("#sublayer0").on('click', function() {
    if (sublayer0Shown) {
    } else {
    sublayer0Shown = !sublayer0Shown; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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