javascript - Leaflet Not Adding Tile Layer to Bottom -

I am helping my students with a map of some data related to Hurricane Sandy. They have four tile layers (MapBox Street, Map Box Satellite, NOAA Satellite, and NOAA Induction) and several vector layers.

When this is first loaded, Map Mapbox shows Street Tile with some vector data at the top, as well as the ability to convert the MapBox satellite layer into a base map. Users can then add the Ination Layer to the top of the base map (the Ination Layer is very complex so that it needs tiles instead of the rendered polygons).

The problem occurs when you switch base map layers after the infinity layer is added to the map. My students use the function to add a new base map layer below (after removing old ones), but for some reasons only the vector is added under the layers, not the bottom of the induction tile layer. When the base layers are switched out, you can clearly see that the flood tile layer is still there, it will not move to the top of the new base layer.

Do anyone know why this is the matter? The documentation states that this parameter ensures that the new layer all will be added to other layers

live example of the page:

the relevant code block < / P>

  & lt; body & gt; & Lt; div id = "map" & gt; & Lt; / Div & gt; & Lt; Div id = "control" & gt; & Lt; Input type = "checkbox" id = "toggle satellites" / & gt; & Lt; Label = "toggleSatellite" & gt; Toggle Satellite & lt; / Label & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; Var Map = Faucet, Layerstrates, LayerSetlated News, Layer Satellites, Layer 1 Acres, Layer 3 Acres, LGRPBs, LIDPSarge; Map = LMAP ("map", {'center': L.Lat long (40.7127, -74.0059), 'zoom': 10, 'min zoom': 9, 'maxxim': 16}) // - - Tile layers ---- Layerstrates = L. Mapbox. Tile layer ("user.id"); layerSatelliteNow = L.mapbox.tileLayer ("user.id"); Layer 1 source = l.mapbox.tileLayer ("user.id"); layer3msurge = l.mapbox. Tile layer ("user.id"); LgrpSurge = L. Layer Group (); LDRP Serge. Adler (Layer 3 Assurances). Adlayer (Layer 1 Ascend); // ---- Adding data to the map ---- Map .setMaxBounds (LTLL Bounds (L.L.T.L.G. (40.4600, -74.33), LL .TLG (40.9400, -73.667). Andyler (Layerstratts). Andyler (LDRPsarge) .ADL (FIRPAVECcenter); // ----Interactivity ---- $ ("# Toggle Satellite"). Change (function () (if ($ ("Input [id = 'toggle satellites']: checked"). Length & gt; 0) {Map .removeLayer (Layerstresses). Endless (LayerSetulated Nova, True);} And {map .removeLayer (from layer Laede Nova). Endless (Layerstrakes, True);}})    
 
 
 Your frequency layer should be added to the map as the  overlay  code> and  basemap  Layers of tile can also be overlays and betamaps).  
 First you want to distinguish between your basemap layers and your overlay.  
 Your baseless layers (roads, satellites, etc.) ) These layers which are mutually exclusive and always Stay down.  
 Your overlay layer is not mutually exclusive and will always sit at the top  
  var cloudmadeUrl = 'http: // {s}. tile.cloudmade.com / API-key /    
 {styleId} / 256 / {z} / {x} / {y} .png ', cloud-medied attribution = 'Map data & copy; Contributors of 2011 Open, Imagery and Copy; 2011 Cloud Meade '; Middle Minimum = LLEleLayer (CloudMed URL, {Style ID: 999, Attribution: Cloudmed Attribution}), Motorways = LLElayer (Cloud Meded Url, {StyleId: 46561, Attribution: Cloudmed Attribution}); var map = l.map ('map', {center: new L. lattelle (39.73, -104.99), zoom: 10, layers: [minimum, motorway, cities]}); Var baseMaps = {"Minimum": Minimum, "Night View": Midnight}; Var Overlay Maps = {"Motorways": Motorway, "Cities": Cities}; L.control.layers (Besemap, Overlay Maps) .addTo (map);   
 At this point, the Bayesamps (minimum and night view) will always be under the overlay (motorways and cities).  
 Ensure that your induction layer has been added to Max as a  overlay  and there is no  basemap .