1

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>
<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>
Improve this question
2
  • script tag must be in head not in body, maybe its why its not working in FF or Chrome
    – Below the Radar
    Commented Nov 28, 2014 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
    Commented Nov 28, 2014 at 17:32

1 Answer 1

Reset to default
1

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
2
  • 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
    Commented Nov 29, 2014 at 12:19
  • I am continuing the topic with kita layer here now: gis.stackexchange.com/questions/123985/…
    – hoge6b01
    Commented Dec 1, 2014 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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