Leaflet layer toggling by mapsam

Showing the functionality of toggling layers in Leaflet while preserving their reference for later usage (i.e. turning the layer back on). This is useful when working with many layers in leaflet and turning opacity to 0 won’t cut it because it can have negative effects when hover and click events require properly layered DOM elements.

Important takeaways:

It’s important to scope your data to access it globally, or at least within your appropriate scope.
Turn off a layer by referencing its variable using the removeLayer() method.
Turn on a layer by referencing its variable using the addLayer() method.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" charset="UTF-8">
<title>leaflet starter</title>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

<style>
body {
  padding:0;
  margin:0;
}
#map {
  display:inline-block;
  width:600px;
  height:400px;
}
button {
  position:absolute;
  top:410px;
}
</style>

<link href="css/style.css" rel="stylesheet">

<!--[if IE]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div id="map"></div>

<button onclick="togglePoints();">toggle some data!</button>

<script>
function init() {

  var data1 = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            1.0546875,
            21.94304553343818
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            11.6015625,
            1.4061088354351594
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            23.90625,
            26.11598592533351
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            30.234375,
            -0.7031073524364783
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            17.9296875,
            15.623036831528264
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            20.390625,
            -14.264383087562637
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            44.29687499999999,
            4.214943141390651
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            33.046875,
            -18.646245142670608
          ]
        }
      }
    ]
  };

  var data2 = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            -8.7890625,
            14.944784875088372
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            25.6640625,
            -10.833305983642491
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            49.92187499999999,
            11.178401873711785
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": [
            46.05468749999999,
            -19.973348786110602
          ]
        }
      }
    ]
  };

  // initialize map object with view
  window.map = L.map('map').setView([0, 0], 3);

  // add tile layer
  L.tileLayer('//a.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

  // add multiple data layers (defined above ... sloppy!)
  window.data1 = L.geoJson(data1).addTo(map);
  window.data2 = L.geoJson(data2).addTo(map);

  // toggle variable to use in togglePoints();
  window.toggle = false;
}

function togglePoints() {
  if(!toggle) {
    map.removeLayer(data1);
  } else {
    map.addLayer(data1);
  }
  toggle = !toggle;
}

window.onload = init();
</script>
</body>
<html>