Leaflet Layer Switcher Problems

by lprashad

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="https://dl.dropboxusercontent.com/u/45525845/geojson/Hudson_HUC10.geojson"></script>
<script src="https://dl.dropboxusercontent.com/u/45525845/geojson/Hudson_HUC10_copy.geojson"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div id="map" style="height: 300px"></div>

JavaScript

var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
    cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

var minimal = L.tileLayer(cmUrl, {
    styleId: 22677,
    attribution: cmAttr
}),
    midnight = L.tileLayer(cmUrl, {
        styleId: 999,
        attribution: cmAttr
    });

var Orange = {
    "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
};

//styling for watersheds_copy
var Water_Orange = L.geoJson(watersheds_copy, {
    style: Orange
});

Water_Orange.addData(watersheds_copy);

//these are just blue - styling is not working
var Water_blue = L.geoJson(watersheds, {
    //  style: function(feature) {
    //    switch (feature.properties.party) {
    //      case 'Catskill Creek': return {color: "#000000"};
    //  }
    //  }
});
Water_blue.addData(watersheds);



//This sets the inital order - last in layer list being on top. Except minimal - tile layer is always on bottom
var map = L.map('map', {
    center: [41.609, -74.028],
    zoom: 8,
    layers: [minimal, Water_Orange, Water_blue]
});

var baseLayers = {
    "Minimal": minimal,
        "Night View": midnight
};

//This controls the order in the layer switcher. This does not change draw order
var overlays = {
    "Water_Orange": Water_Orange,
        "Water_blue": Water_blue


};

L.control.layers(baseLayers, overlays).addTo(map);