0

I am trying to add the layer control (L.control.layers) to an application using cartodb.js (v. 3.14).

The last line in the following code

 L.control.layers(basemaps).addTo(map);

breaks the entire thing.

If I comment it out the point data will be shown, as expected, on top of the black basemap:

enter image description here

But I would like to have two basemaps and I would like to have my points as an overlay. So I group them into the respective objects and then pass these objects to the layer control.

What happens then is that I can still toggle both my basemaps, and the dataset is briefly displayed when doing so. However, if I click on the overlay button:

enter image description here

I get (first time):

Uncaught TypeError: a.onAdd is not a function

or (subsequent times):

Uncaught TypeError: a.onRemove is not a function



Here is the entire code:

var map;

$( document ).ready(function() {

    map = new L.Map('mapDIV', { 
        center: [52.51601,13.40538],
        zoom: 12
    })

    var layerUrl = 'https://PATH/viz.json';

    cartoDB_lyr = cartodb.createLayer(map, layerUrl)

    cartoDB_lyr.addTo(map);

    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {minZoom: 8,
                    maxZoom: 12,
                    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});
    osm.addTo(map);

    var mapBoxBlack = new L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
            attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
    })

    mapBoxBlack.addTo(map); 

    var basemaps = {
        'OSM':osm,
        'Mapbox Black': mapBoxBlack
    }

    var overlays = {
        'Berlin Points':cartoDB_lyr
    }

    L.control.layers(basemaps, overlays).addTo(map);    
}); 



UPDATED Code after comments:

var map;

$( document ).ready(function() {

    map = new L.Map('mapDIV', { 
        center: [52.51601,13.40538],
        zoom: 12
    })  

    var layerUrl = 'https://PATH/viz.json';

    cartoDB_lyr = cartodb.createLayer(map, layerUrl)
        .addTo(map)
        .on("done",function(lyr){
            var layerOne = lyr.getSubLayer(0);


            var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {minZoom: 8,
                    maxZoom: 12,
                    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'});
            osm.addTo(map);

            var mapBoxBlack = new L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
                    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
            })
            mapBoxBlack.addTo(map); 


            var basemaps = {
                'OSM':osm,
                'Mapbox Black': mapBoxBlack
            }

            var overlays = {
                'Berlin Points':layerOne
            }

            L.control.layers(basemaps, overlays).addTo(map);
    });    
}); 
  • 1
    I believe it is because cartoDB_lyr refers to the function call, cartodb.createLayer(map, layerUrl), rather than a specific layer, as defined in your viz.json. I have always used custom layer selectors in cartodb.js, grabbing a reference to a particular layer from layers.getSublayer(0) in .on('done', function(layers) – John Powell May 19 '15 at 16:56
  • agree with @JohnBarça. Try setting var layer; then cartodb.createLayer(map, layerUrl).addTo(map).on('done', function(lyr) { layer = lyr }... May not be the entire issue, but a starting point – toms May 19 '15 at 20:59
  • I just updated the code above. Not sure if it is good practice, but I just put most of it into the on function. Mainly to avoid scope issues. The problem persists; when using the layer switcher I always get: Uncaught TypeError: a.onAdd is not a function – BritishSteel May 21 '15 at 15:18

Your Answer

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

Browse other questions tagged or ask your own question.