Has anyone ever tried adding a CartoDB runtime layer to a leaflet using an Angular Directive or angular-leaflet-directive (Leaflet Javascript Library)?

I tried this, which does not throw errors but my layer doesn't show. Is this a digest cycle issue?

angular.module('cartoDbDirectives', []).directive('cdbRuntime', function(){

 return {
  restrict: "A",
  scope: false,
  replace: false,

  link: function(scope, elm, attrs, controller){

    var map = L.map("mapCanvas", {
      zoom: 9,
      minZoom: 8,
      maxZoom: 19,
      center: [38.98, -75.511667], 
      zoomControl: false,

    cartodb.createLayer(map, {
      user_name: 'czajk',
      type: 'cartodb',
      sublayers: [{
        sql: 'select crossing, the_geom_webmercator from crossings',
        interactivity: 'crossing'

2 Answers 2


I found that one way to do this is using the CartoDB Core API. Check this example: http://jsfiddle.net/eczajk1/ok0nseom/


It is really hard to diagnose your problem without trying to reproduce it. Do you mind assembling a simple jsfiddle so we can better assist you?

Using a hardcoded reference to an element is frowned upon in Angular. Try to use the element reference the directive receives as the second parameter instead:

var map = L.map(elm, {
  • Thanks for the help @PauloScardine. I haven't done this much, obviously.
    – eczajk
    Commented Dec 6, 2014 at 19:24

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.