Revision 850e8017-b3b5-416c-97c1-d280b193abfe - Geographic Information Systems Stack Exchange

I've got a strange behavior with my map.

I wanted to have to basemaps and one overlay.
I've defined classes but when I try to change them via LayerControl I only get one same map.

Could you please have a look on my code?
Thanks

By the way: why does this script only run on IE and not on FF or Chromium?

        <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>A simple map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
    
      <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js"></script>
    
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>
    
    <div id='map'></div>
    <script>
    
    L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';
    
    var geocoder = L.mapbox.geocoder('mapbox.places-v1');
    
    var	redmap = L.mapbox.map('map', 'hoge6b01.kb0pcgai')
    			.addControl(L.mapbox.geocoderControl('mapbox.places-v1', {
    			autocomplete: true
    	}));
    	
    	geocoder.query('Cologne', showMap);
    	
    var	PencilMap = L.mapbox.tileLayer('examples.a4c252ab').addTo(redmap);
    
    var baseMaps = {
    	"Red": redmap,
    	"Pencil": PencilMap
    	};
    	
    var greenIcon = L.icon({
        iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png',
        shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
    
        iconSize:     [38, 95], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    	});
    	
     var kita = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9' , {
    			pointToLayer: function (geojson, latlng) {
    			return L.marker(latlng, {
    			icon: greenIcon
    			});
    			},
    			}).addTo(redmap);
    		
    var overlayMaps = {
    	"Kita": kita
    	};
       
    function showMap(err, data) {
        // The geocoder can return an area, like a city, or a
        // point, like an address. Here we handle both cases,
        // by fitting the map bounds to an area or zooming to a point.
        if (data.lbounds) {
            redmap.fitBounds(data.lbounds);
        } else if (data.latlng) {
            redmap.setView([data.latlng[0], data.latlng[1]], 13);
        }
    }
    
    /*L.control.layers({
        'Red Map': L.mapbox.tileLayer('hoge6b01.kb0pcgai'),
        'Pencil Map': L.mapbox.tileLayer('examples.a4c252ab').addTo(map)
    }, {
    //    'Bike Stations': L.mapbox.tileLayer('examples.bike-locations'),
    //    'Bike Lanes': L.mapbox.tileLayer('examples.bike-lanes'),
    	//'Kita': L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9').addTo(map)
    
    }).addTo(map);*/
    
    L.control.layers(baseMaps, overlayMaps).addTo(redmap);
    
    </script>
    
    </body>
    </html>