Directives

mapboxgl

glBearing (Object)

var glBearing = {
   value: Number,
   eventData: Object
};

<mapboxgl gl-bearing="glBearing"></mapboxgl>

glCenter (LngLatLike or Object)

<mapboxgl gl-center="[-2, 41]"></mapboxgl>

<mapboxgl gl-style="{ lat: 41, lng: -2 }"></mapboxgl>

<mapboxgl gl-style="{ autodiscover: true }"></mapboxgl>

glClasses (Object)

var glClasses = {
   classes: Array<String>,
   options: StyleOptions
};

<mapboxgl gl-classes="glClasses"></mapboxgl>

glControls (Object)

var glControls = {
   navigation: {
      enabled: true | false,
      options: {} // Navigation control options --> https://www.mapbox.com/mapbox-gl-js/api/#Navigation
   },
   scale: {
      enabled: true | false,
      options: {} // Scale control options --> https://www.mapbox.com/mapbox-gl-js/api/#Scale
   },
   attribution: {
      enabled: true | false,
      options: {} // Attribution control options --> https://www.mapbox.com/mapbox-gl-js/api/#Attribution
   },
   geolocate: {
      enabled: true | false,
      options: {} // Geolocate control options --> https://www.mapbox.com/mapbox-gl-js/api/#Geolocate
   },
   geocoder: {
      enabled: true | false,
      options: {} // Geocoder control options --> https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md
   },
   directions: {
      enabled: true | false,
      options: {} // Directions control options --> https://github.com/mapbox/mapbox-gl-directions/blob/master/API.md#mapboxgldirections
   },
   draw: {
      enabled: true | false,
      options: {} // Draw control options -> https://github.com/mapbox/mapbox-gl-draw/blob/master/API.md#options
   }
};

// Custom Controls
function CustomControl (options) {
   this.options = this.options || {};
   
   angular.extend(this.options, options);
}

// Make custom control evented
CustomControl.prototype = new mapboxgl.Evented();

CustomControl.prototype.onAdd = function (map) {
   // ...

   // Fire an event
   this.fire('event1', { eventData: {} });
};

CustomControl.prototype.onRemove = function () {
   // ...
};

glControls.custom = [
   {
      constructor: CustomControl,
      name: 'CustomControl1',
      options: {}, // Custom control options
      events: ['event1', 'event2', 'event3'], // Custom control events
      listenInMap: true | false // If true, custom control events listen in mapbox gl map
   }
];

<mapboxgl gl-controls="glControls"></mapboxgl>

glFilter (Object or Array<Object>)

var glFilter = {
   layerId: 'layer1',
   filter: ['==', 'name', 'USA']
};

<mapboxgl gl-filter="glFilter"></mapboxgl>

glGeojson (Object) DEPRECATED

var glGeojson = {
   sources: [
      {
         id: String,
         type: 'vector' | 'raster' | 'geojson' | 'image' | 'video',
         data: URL String | GeoJSON,
         maxzoom: Number,
         buffer: Number,
         tolerance: Number,
         cluster: boolean,
         clusterRadius: Number,
         clusterMaxZoom: Number
      }
   ],
   layers: [
      {
         id: String,
         type: 'fill' | 'line' | 'symbol' | 'circle' | 'fill-extrusion' | 'raster' | 'background',
         metadata: Object,
         ref: String,
         source: String,
         source-layer: String,
         minzoom: Number,
         maxzoom: Number,
         filter: FilterObject,
         layout: LayoutObject,
         paint: PaintObject,
         paint.*: PaintObject,
         before: String,
         popup: {
            enabled: true | false,
            options: PopupOptionsObject,
            message: String
         }
      }
   ]
};

var glGeojson = {
   layers: [
      {
         // ...
         popup: {
            enabled: true,
            message: '<popup-directive></popup-directive>',
            getScope: function () {
               return $scope;
            }
         }
         // ...
      }
   ]
...
};

<mapboxgl gl-geojson="glGeojson"></mapboxgl>

glHandlers (Object)

var glHandlers = {
   scrollZoom: true | false,
   boxZoom: true | false,
   dragRotate: true | false,
   dragPan: true | false,
   keyboard: true | false,
   doubleClickZoom: true | false,
   touchZoomRotate: true | false
};

<mapboxgl gl-handlers="glHandlers"></mapboxgl>

glImage (Object or Array<Object>)

var glImage = {
   url: String,
   coordinates: Array<LngLatLike>,
   layer: {
      layout: Layout, // Optional --> https://www.mapbox.com/mapbox-gl-style-spec/#types-layout
      paint: Paint, // Optional --> https://www.mapbox.com/mapbox-gl-style-spec/#types-paint
   }
};

<mapboxgl gl-image="glImage"></mapboxgl>

glInteractive (Boolean)

<mapboxgl gl-interactive="false"></mapboxgl>

glLayers (Object or Array<Object>)

var glLayers = {
   id: String,
   type: 'fill' | 'line' | 'symbol' | 'circle' | 'fill-extrusion' | 'raster' | 'background',
   metadata: Object,
   ref: String,
   source: String,
   source-layer: String,
   minzoom: Number,
   maxzoom: Number,
   filter: FilterObject,
   layout: LayoutObject,
   paint: PaintObject,
   paint.*: PaintObject,
   before: String,
   popup: {
      enabled: true | false,
      onClick: {
         coordinates: LngLatLike || 'center' (It takes the feature coordinates),
         options: {}, // Popup options --> https://www.mapbox.com/mapbox-gl-js/api/#Popup
         message: String,
         getScope: Function, // Default $rootScope
         onClose: function (event, popupClosed) {
            // ...
         }
      }
   },
   animation: {
      enabled: true | false,
      animationData: Object,
      animationFunction: function (map, layerId, animationData, timestamp) {
         // ...
      }
   }
};

<mapboxgl gl-layers="glLayers"></mapboxgl>

glLights (Object)

var glLights = {
   options: {
      anchor: 'map' | 'viewport',
      position: Array<Number>,
      color: Color, // Color -> https://www.mapbox.com/mapbox-gl-style-spec/#types-color
      intensity: Number
   },
   lightOptions: Object
};

<mapboxgl gl-lights="glLights"></mapboxgl>

glMarkers (Object or Array<Object>)

var glMarkers = {
   coordinates: LngLatLike,
   element: DOMElement,
   options: {}, // Optional --> https://www.mapbox.com/mapbox-gl-js/api/#Marker
   popup: {
      enabled: true | false,
      options: {}, // Popup options --> https://www.mapbox.com/mapbox-gl-js/api/#Popup
      message: String,
      getScope: Function, // Default $rootScope
      onClose: function (event, popupClosed) {
         // ...
      }
   }
};

<mapboxgl gl-markers="glMarkers"></mapboxgl>

glMaxBounds (LngLatBoundsLike)

var glMaxBounds = [
   [-73.9876, 40.7661], // Southwest coordinates
   [-73.9397, 40.8002] // Northeast coordinates
];

<mapboxgl gl-max-bounds="glMaxBounds"></mapboxgl>

glMaxZoom (Number)

<mapboxgl gl-max-zoom="17"></mapboxgl>

glMinZoom (Number)

<mapboxgl gl-min-zoom="2"></mapboxgl>

glPitch (Object)

var glPitch = {
   value: Number,
   eventData: Object
};

<mapboxgl gl-pitch="glPitch"></mapboxgl>

glPopups (Object or Array<Object>)

var glPopups = {
   coordinates: LngLatLike,
   message: String,
   options: {}, // Optional --> https://www.mapbox.com/mapbox-gl-js/api/#Popup
   getScope: Function, // Default $rootScope
   onClose: function (event, popupClosed) {
      // ...
   }
};

<mapboxgl gl-popups="glPopups"></mapboxgl>

glSources (Object or Array<Object>)

var glSources = {
   id: String,
   type: 'vector' | 'raster' | 'geojson' | 'image' | 'video',
   data: URL String | GeoJSON,
   maxzoom: Number,
   buffer: Number,
   tolerance: Number,
   cluster: boolean,
   clusterRadius: Number,
   clusterMaxZoom: Number
};

// Animation by Feature

glSources = {
   //...
   data: {
      type: 'FeatureCollection',
      features: [
         {
            //...
            animation: {
               enabled: true || false,
               animationData: Object, // Object with everything you want
               animationFunction: function (map, sourceId, featureId, feature, animationData, deltaTime, end) {
                  //...
                  // end -> function to indicate the end of animation
               }
            }
            //...
         }
      ]
   }
   //...
};

<mapboxgl gl-sources="glSources"></mapboxgl>

glStyle (String)

<mapboxgl gl-style="'mapbox://styles/mapbox/streets-v9'"></mapboxgl>

glZoom (Object)

var glZoom = {
   value: Number,
   eventData: Object
};

<mapboxgl gl-zoom="glZoom"></mapboxgl>