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'

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

|improve this answer|||||

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, {
|improve this answer|||||
  • Thanks for the help @PauloScardine. I haven't done this much, obviously. – eczajk Dec 6 '14 at 19:24

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.