Load or display differents geojson data on zoom level for leaflet maps

by Alex Azuero

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://leafletjs.com/examples/geojson/sample-geojson.js"></script>
<div id="info">
     <h3>Load or display differents geojson data on zoom level for leaflet maps</h3>
Zoom in to see other layers!
    
<h2>Zoomlevel: <span id="zoomlevel">12</span> active Layer: <span id="layername">Coors Field</span>

</h2> 
</div>
<div id="map"></div>Data from http://leafletjs.com/examples/geojson.html

CSS

html {
          height: 100%
      }
      body {
          height: 100%;
          margin: 0;
          padding: 0;
      }
      #info {
          margin:10px;
      }
      #map {
          height: 85%;
          margin-top:10px;
          border: 1px solid grey;
      }
      #zoomlevel {
          color:green;
          font-weight:bold;
      }
      #layername {
          color:orange;
          font-weight:bold;
      }

JavaScript

var map = L.map('map').setView([39.74739, -105], 11);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var baseballIcon = L.icon({
    iconUrl: 'http://leafletjs.com/examples/geojson/baseball-marker.png',
    iconSize: [32, 37],
    iconAnchor: [16, 37],
    popupAnchor: [0, -28]
});

function onEachFeature(feature, layer) {
    var popupContent = "<p>I started out as a GeoJSON " + feature.geometry.type + ", but now I'm a Leaflet vector!</p>";

    if (feature.properties && feature.properties.popupContent) {
        popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
}

var campuslayer = L.geoJson(campus, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature
});

var rental = L.geoJson(bicycleRental, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }
});

var buslayer = L.geoJson(freeBus, {

    filter: function (feature, layer) {
        if (feature.properties) {
            // If the property "underConstruction" exists and is true, return false (don't render features under construction)
            return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
        }
        return false;
    },

    onEachFeature: onEachFeature
});
//.addTo(map);

var coorsLayer = L.geoJson(coorsField, {

    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: baseballIcon
        });
    },

   ...