I have 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 look at my code?

This script only runs on IE and not on FF or Chromium.

    <!DOCTYPE html>
<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>

  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

<div id='map'></div>

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

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) {
    } else if (data.latlng) {
        redmap.setView([data.latlng[0], data.latlng[1]], 13);

    '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)


L.control.layers(baseMaps, overlayMaps).addTo(redmap);


  • script tag must be in head not in body, maybe its why its not working in FF or Chrome – Below the Radar Nov 28 '14 at 14:32
  • 1
    Scripts can be placed in body as well. In fact, it's often recommended (w3schools.com/js/js_whereto.asp) to put scripts at the end of the body tag, although there can be many different reasons to put scripts in other places. – Liedman Nov 28 '14 at 17:32

The problem is that redmap in your code isn't a layer, but a map object, that is initialized with a tile layer added. PencilMap, on the other hand, is a tile layer, that is also added to the same map. This means that the map will, from the start, contain both tile layers.

I fixed the relevant part of the code to look like this:

var redmap = L.mapbox.map('map')
            .addControl(L.mapbox.geocoderControl('mapbox.places-v1', {
            autocomplete: true

    geocoder.query('Cologne', showMap);

var RedLayer = L.mapbox.tileLayer('hoge6b01.kb0pcgai'),
    PencilLayer = L.mapbox.tileLayer('examples.a4c252ab').addTo(redmap);

var baseMaps = {
    "Red": RedLayer,
    "Pencil": PencilLayer

This works by first initializing the map without a tile layer, then creating the background layers and adding only one of them to the map. The layer control will then add and remove them as required.

Note that I successfully ran the script on Chrome for Linux (although I get a lot of cross origin error messages for the kita layer).

| improve this answer | |
  • This helped. I used the code you posted here. But as you already described the kita layer causes problems now. Seems the ArcGIS Server is up. Would you mind to have a look what could be the problem? – hoge6b01 Nov 29 '14 at 12:19
  • I am continuing the topic with kita layer here now: gis.stackexchange.com/questions/123985/… – hoge6b01 Dec 1 '14 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.