Options
All
  • Public
  • Public/Protected
  • All
Menu

ngeo

Index

Classes

Variables

Functions

Object literals

Variables

Let Action

Action: any

Const Downloader

Downloader: Downloader = class {/*** @ngInject* @param {import("ngeo/offline/Configuration.js").default} ngeoOfflineConfiguration* A service for customizing offline behaviour.*/constructor(ngeoOfflineConfiguration) {/*** @private* @type {import("ngeo/offline/Configuration.js").default}*/this.configuration_ = ngeoOfflineConfiguration;/*** @type {TilesDownloader}* @private*/this.tileDownloader_ = null;}cancel() {this.tileDownloader_.cancel();}/*** @param {import("./index.js").OfflineLayerMetadata} layerMetadata Layers metadata.* @param {Array<import("./index.js").OfflineTile>} queue Queue of tiles to download.*/queueLayerTiles_(layerMetadata, queue) {const source = /** @type {olSourceTileWMS|olSourceWMTS} */ (layerMetadata.source);const {map, extentByZoom} = layerMetadata;if (!source) {return;}console.assert(source instanceof olSourceTileWMS || source instanceof olSourceWMTS);const projection = map.getView().getProjection();const tileGrid = source.getTileGrid();const tileUrlFunction = source.getTileUrlFunction();console.assert(extentByZoom);for (const extentZoom of extentByZoom) {const z = extentZoom.zoom;const extent = extentZoom.extent;const queueByZ = [];let minX, minY, maxX, maxY;tileGrid.forEachTileCoord(extent, z, (coord) => {maxX = coord[1];maxY = coord[2];if (minX === undefined || minY === undefined) {minX = coord[1];minY = coord[2];}const url = tileUrlFunction(coord, DEVICE_PIXEL_RATIO, projection);console.assert(url);/*** @type {import("./index.js").OfflineTile}*/const tile = {coord, url, response: null};queueByZ.push(tile);});// @ts-ignoreconst centerTileCoord = [z, (minX + maxX) / 2, (minY + maxY) / 2];queueByZ.sort((a, b) => magnitude2(a.coord, centerTileCoord) - magnitude2(b.coord, centerTileCoord));queue.push(...queueByZ);}}/*** @param {import("ol/extent.js").Extent} extent The extent to download.* @param {import("ol/Map.js").default} map The map to work on.* @return {Promise} A promise resolving when save is finished.*/save(extent, map) {/*** @type {!Array<import("./index.js").OfflineLayerMetadata>}*/const layersMetadatas = this.configuration_.createLayerMetadatas(map, extent);/*** @type {!Array<import("./index.js").OfflinePersistentLayer>}*/const persistentLayers = [];const queue = [];const zooms = [];for (const layerItem of layersMetadatas) {if (layerItem.layerType === 'tile') {const tiles = [];this.queueLayerTiles_(layerItem, tiles);queue.push(...tiles);}persistentLayers.push({backgroundLayer: layerItem.backgroundLayer,layerType: layerItem.layerType,layerSerialization: layerItem.layerSerialization,key: this.configuration_.getLayerKey(layerItem),});layerItem.extentByZoom.forEach((obj) => {const zoom = obj.zoom;if (zooms.indexOf(zoom) < 0) {zooms.push(zoom);}});}/*** @type {import("./index.js").OfflinePersistentContent}*/const persistentObject = {extent: extent,layers: persistentLayers,zooms: zooms.sort((a, b) => (a < b ? -1 : 1))};const setOfflineContentPromise = this.configuration_.setItem('offline_content', persistentObject);const maxDownloads = this.configuration_.getMaxNumberOfParallelDownloads();this.tileDownloader_ = new TilesDownloader(queue, this.configuration_, maxDownloads);const tileDownloadPromise = this.tileDownloader_.download();const allPromise = Promise.all([setOfflineContentPromise, tileDownloadPromise]);const setHasOfflineData = () => this.configuration_.setHasOfflineData(true);allPromise.then(setHasOfflineData, setHasOfflineData);return allPromise;}}

Const EXCLUDE_PROPERTIES

EXCLUDE_PROPERTIES: string[] = ['boundedBy']

Const SerDes

SerDes: SerDes = class {/*** @param {Object} options The options*/constructor({gutter}) {/*** @private*/this.gutter_ = gutter;}/*** @private* @param {import("ol/Object.js").default} olObject An OL object* @return {Object} The serializable properties of the object*/createBaseObject_(olObject) {const properties = olObject.getProperties();const obj = {};for (const key in properties) {const value = properties[key];const typeOf = typeof value;if (typeOf === 'string' || typeOf === 'number') {obj[key] = value;}}return obj;}/*** @param {OlTilegridTileGrid} tilegrid .* @return {string} .*/serializeTilegrid(tilegrid) {const obj = {};obj['extent'] = tilegrid.getExtent();obj['minZoom'] = tilegrid.getMinZoom();obj['origin'] = tilegrid.getOrigin(0); // hackobj['resolutions'] = tilegrid.getResolutions();obj['tileSize'] = tilegrid.getTileSize(tilegrid.getMinZoom());return JSON.stringify(obj);}/*** @param {string} serialization .* @return {OlTilegridTileGrid} tilegrid*/deserializeTilegrid(serialization) {const options = /** @type {import ("ol/tilegrid/WMTS").Options} */ (JSON.parse(serialization));return new OlTilegridTileGrid(options);}/*** @param {OlTilegridWMTS} tilegrid .* @return {string|undefined} .*/serializeTilegridWMTS(tilegrid) {if (!tilegrid) {return undefined;}const obj = {};const resolutions = tilegrid.getResolutions();obj['extent'] = tilegrid.getExtent();obj['minZoom'] = tilegrid.getMinZoom();obj['matrixIds'] = tilegrid.getMatrixIds();obj['resolutions'] = resolutions;obj['origins'] = [];for (let z = 0; z < resolutions.length; ++z) {obj['origins'].push(tilegrid.getOrigin(z));}return JSON.stringify(obj);}/*** @param {string} serialization .* @return {OlTilegridWMTS} tilegrid .*/deserializeTilegridWMTS(serialization) {const options = /** @type {import ("ol/tilegrid/WMTS").Options} */ (JSON.parse(serialization));return new OlTilegridWMTS(options);}/*** @param {OlSourceTileWMS} source .* @return {string} .*/serializeSourceTileWMS(source) {const obj = this.createBaseObject_(source);obj['params'] = source.getParams();obj['urls'] = source.getUrls();obj['tileGrid'] = this.serializeTilegrid(source.getTileGrid());const projection = source.getProjection();if (projection) {obj['projection'] = olProj.get(source.getProjection()).getCode();}return JSON.stringify(obj);}/*** @param {string} serialization .* @param {function(import("ol/ImageTile.js").default, string)=} tileLoadFunction .* @return {OlSourceTileWMS} source .*/deserializeSourceTileWMS(serialization, tileLoadFunction) {const options = /** @type {import ("ol/source/TileWMS").Options} */ (JSON.parse(serialization));options.tileLoadFunction = tileLoadFunction;if (options.tileGrid) {options.tileGrid = this.deserializeTilegrid(/** @type{any} */ (options).tileGrid);}options.gutter = this.gutter_;return new OlSourceTileWMS(options);}/*** @param {OlSourceWMTS} source .* @return {string} .*/serializeSourceWMTS(source) {const obj = this.createBaseObject_(source);obj.dimensions = source.getDimensions();obj.format = source.getFormat();obj.urls = source.getUrls();obj.version = source.getVersion();obj.layer = source.getLayer();obj.style = source.getStyle();obj.matrixSet = source.getMatrixSet();// The OL getTileGrid method is expected to return a WMTS tilegrid so it is OK to cast here.const tileGridWMTS = /** @type {OlTilegridWMTS} */ (source.getTileGrid());obj.tileGrid = this.serializeTilegridWMTS(tileGridWMTS);obj.requestEncoding = source.getRequestEncoding();const projection = source.getProjection();if (projection) {obj.projection = olProj.get(source.getProjection()).getCode();}return JSON.stringify(obj);}/*** @param {string} serialization .* @param {function(import("ol/ImageTile.js").default, string)=} tileLoadFunction .* @return {OlSourceWMTS} .*/deserializeSourceWMTS(serialization, tileLoadFunction) {const options = /** @type {import("ol/source/WMTS").Options} */ (JSON.parse(serialization));options.tileLoadFunction = tileLoadFunction;if (options.tileGrid) {options.tileGrid = this.deserializeTilegridWMTS(/** @type{any} */(options).tileGrid);}return new OlSourceWMTS(options);}/*** @private* @param {number} number Some number which may be Infinity* @return {number} The same number or an arbitrary big number instead of Infinity*/makeInfinitySerializable_(number) {if (number === Infinity) {return 1000;}return number;}/*** @param {!import("ol/layer/Tile.js").default|import("ol/layer/Image").default} layer .* @param {import("ol/source/Source.js").default=} source .* @return {string} .*/serializeTileLayer(layer, source) {const obj = this.createBaseObject_(layer);obj.opacity = layer.getOpacity();obj.visible = layer.getVisible();obj.minResolution = layer.getMinResolution();obj.maxResolution = this.makeInfinitySerializable_(layer.getMaxResolution());obj.zIndex = layer.getZIndex();source = source || layer.getSource();if (source instanceof OlSourceTileWMS) {obj.source = this.serializeSourceTileWMS(source);obj.sourceType = 'tileWMS';} else if (source instanceof OlSourceWMTS) {obj.source = this.serializeSourceWMTS(source);obj.sourceType = 'WMTS';}return JSON.stringify(obj);}/*** @param {string} serialization .* @param {function(import("ol/ImageTile.js").default, string)=} tileLoadFunction .* @return {!import("ol/layer/Tile.js").default} .*/deserializeTileLayer(serialization, tileLoadFunction) {const options = /** @type import("ol/layer/Tile").Options */ (JSON.parse(serialization));const sourceType = options['sourceType'];if (sourceType === 'tileWMS') {options.source = this.deserializeSourceTileWMS(/** @type any */ (options).source, tileLoadFunction);} else if (sourceType === 'WMTS') {options.source = this.deserializeSourceWMTS(/** @type any */ (options).source, tileLoadFunction);}return new OlLayerTile(options);}}

Const Service

Service: Service = class {/*** This service watches the status of network connection.** Currently it watches every $http and $.ajax requests errors, if an error* occurs we wait 2 sec then we make an http request on the checker file.* If the checker responds that means we are online, otherwise we make a* 2nd request 2 sec later, if the 2nd requests failed that means we* are offline.** A timeout of 1 sec is set for the checker file, so if we have a bad* connection, we consider we are offline.** During offline mode we test every 2 sec if we are back online.** @ngInject* @param {!jQuery} $document Angular document service.* @param {angular.IWindowService} $window Angular window service.* @param {angular.ITimeoutService} $timeout Angular timeout service.* @param {angular.IScope} $rootScope The root scope.* @param {string} ngeoOfflineTestUrl Url of the test page.*/constructor($document, $window, $timeout, $rootScope, ngeoOfflineTestUrl) {/*** @private* @type {!jQuery}*/this.$document_ = $document;/*** @private* @type {!Window}*/this.$window_ = $window;/*** @private* @type {!angular.ITimeoutService}*/this.$timeout_ = $timeout;/*** @private* @type {angular.IScope}*/this.$rootScope_ = $rootScope;/*** @private* @type {string}*/this.ngeoOfflineTestUrl_ = ngeoOfflineTestUrl;/*** @private* @type {!number}*/this.count_ = 0;/*** @type {!boolean|undefined}* @private*/this.offline_;/*** @private* @type {angular.IPromise|undefined}*/this.promise_;this.initialize_();}initialize_() {this.offline_ = !this.$window_.navigator.onLine;// airplane mode, works offline(firefox)this.$window_.addEventListener('offline', () => {this.triggerChangeStatusEvent_(true);});// online event doesn't means we have a internet connection, that means we// have possiby one (connected to a router ...)this.$window_.addEventListener('online', () => {this.check(undefined);});// We catch every $.ajax request errors or (canceled request).if (this.$document_['ajaxError']) {this.$document_['ajaxError']((evt, jqxhr, settings, thrownError) => {// Filter out canceled requestsif (!/^(canceled|abort)$/.test(thrownError)) {this.check(2000);}});}}/*** Check fir network status** @param {number=} timeout Delay for timeout.*/check(timeout) {if (this.promise_) {this.$timeout_.cancel(this.promise_);this.promise_ = undefined;}if (timeout !== undefined) {this.count_++;this.promise_ = this.$timeout_(() => this.check(), timeout);return;}$.ajax({method: 'GET',url: this.ngeoOfflineTestUrl_,timeout: 1000,success: () => {this.count_ = 0;if (this.offline_) {this.triggerChangeStatusEvent_(false);}},error: () => {this.count_++;// We consider we are offline after 3 requests failedif (this.count_ > 2 && !this.offline_) {this.triggerChangeStatusEvent_(true);}}});}/*** @param {boolean} offline whether it's offline or not.* @private*/triggerChangeStatusEvent_(offline) {this.offline_ = offline;// this.$rootScope_.$broadcast('ngeoNetworkStatusChange', net.offline);this.$rootScope_.$digest();}/*** @return {boolean} True if we are disconnected.* @export*/isDisconnected() {return !!this.offline_;}}

Const TOLERANCE

TOLERANCE: number = 10

Click tolerance in pixel

Const exports

exports: IModule = angular.module('ngeoOfflineModule', [ngeoOfflineComponent.name,ngeoOfflineNetworkStatus.module.name,ngeoOfflineServiceManager.module.name,downloader.module.name,restorer.module.name,mode.module.name])
abstract
implements

{ngeox.OfflineOnTileDownload}

Const extractor

extractor: RegExp = new RegExp('[^/]*//[^/]+/(.*)')

Let modifierPressed

modifierPressed: any

Const name

name: "ngeoOfflineRestorer" = "ngeoOfflineRestorer"

Functions

AbstractAppController

  • AbstractAppController(config: {}, map: Map, $scope: IScope, $injector: IInjectorService): void
  • Application abstract controller.

    Used functionalities:

    • open_panel: When set, contains the name of the panel to open upon loading an application. Note: although this is a list, only one can be defined.
    ngdoc

    controller

    nginject

    Parameters

    • config: {}

      A part of the application config.

    • map: Map

      The map.

    • $scope: IScope

      Scope.

    • $injector: IInjectorService

      Main injector.

    Returns void

DMSCoordinatesFilter

  • DMSCoordinatesFilter(): {}
  • Format coordinates as DMS coordinates.

    Example without parameters:

     <p>{{[7.1234, 46.9876] | ngeoDMSCoordinates}}</p>
     <!-- will Become  7° 07' 24'' E 46° 59' 15'' N-->

    Example with defined fractionDigits and a template.

     <p>{{[7.1234, 46.9876] | ngeoDMSCoordinates:2:'[{y}; {x]'}}</p>
     <!-- will Become [46° 59' 15.36'' N; 7° 07' 24.24'' E] -->
    nginject
    ngdoc

    filter

    ngname

    ngeoDMSCoordinates

    Returns {}

    A function to format numbers into a DMS coordinates string.

DisclaimerController

  • DisclaimerController($element: JQuery<HTMLElement>, $sce: ISCEService, $timeout: ITimeoutService, gettextCatalog: gettextCatalog, ngeoDisclaimer: MessageDisclaimerService, ngeoEventHelper: EventHelper, ngeoLayerHelper: LayerHelper): void
  • Used metadata:

    • disclaimer: The disclaimer text for this element. For WMS and WMTS layers, layer groups and themes.
    nginject
    ngdoc

    controller

    ngname

    GmfDisclaimerController

    Parameters

    • $element: JQuery<HTMLElement>

      Element.

    • $sce: ISCEService

      Angular sce service.

    • $timeout: ITimeoutService

      Angular timeout service.

    • gettextCatalog: gettextCatalog

      Gettext catalog.

    • ngeoDisclaimer: MessageDisclaimerService

      Ngeo Disclaimer service.

    • ngeoEventHelper: EventHelper

      Ngeo Event Helper.

    • ngeoLayerHelper: LayerHelper

      Ngeo Layer Helper.

    Returns void

DurationFilter

  • DurationFilter(gettextCatalog: gettextCatalog): {}
  • A filter used to format a time duration in seconds into a more readable form. Only the two largest units will be shown.

    Examples: {{42 | ngeoDuration}} => 42 seconds {{132 | ngeoDuration}} => 2 minutes 12 seconds {{3910 | ngeoDuration}} => 1 hour 5 minutes -> Note: the remaining 10 seconds will be dropped

    nginject
    ngdoc

    filter

    ngname

    ngeoDuration

    Parameters

    • gettextCatalog: gettextCatalog

      Gettext catalog.

    Returns {}

    Function used to format a time duration in seconds into a string.

GeolocationDesktopComponent

  • GeolocationDesktopComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a "desktop geolocation" directive.

    Example:

     <button ngeo-desktop-geolocation=""
       ngeo-desktop-geolocation-map="ctrl.map"
       ngeo-desktop-geolocation-options="ctrl.desktopGeolocationOptions">
     </button>

    See our live example: ../examples/desktopgeolocation.html

    htmlattribute

    {import("ol/Map.js").default} gmf-geolocation-map The map.

    htmlattribute

    {DesktopGeolocationDirectiveOptions} gmf-geolocation-options The options.

    nginject
    ngdoc

    directive

    ngname

    ngeoDesktopGeolocation

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

NumberCoordinatesFilter

  • NumberCoordinatesFilter($filter: IFilterService): {}
  • Format a couple of numbers as number coordinates.

    Example without parameters:

     <p>{{[7.1234, 46.9876] | ngeoNumberCoordinates}}</p>
     <!-- will Become 7 47 -->

    Example with defined fractionDigits and template (en-US localization):

     <!-- With en-US localization -->
     <p>{{[7.1234, 46.9876] | ngeoNumberCoordinates:2:'co {x} E; {y} N'}}</p>
     <!-- will Become co 7.12 E; 46.99 N -->
     <br/>
     <!-- With en-US localization -->
     <p>{{[2600000, 1600000] | ngeoNumberCoordinates:0:'{x}, {y}'}}</p>
     <!-- will Become 2,600,000, 1,600,000 -->
     <br/>
     <!-- With fr-CH localization -->
     <p>{{[2600000, 1600000] | ngeoNumberCoordinates:0:'{x}, {y}'}}</p>
     <!-- will Become 2'600'000, 1'600'000 -->
    nginject
    ngdoc

    filter

    ngname

    ngeoNumberCoordinates

    Parameters

    • $filter: IFilterService

      Angular filter

    Returns {}

    A function to format numbers into coordinates string.

NumberFilter

  • NumberFilter($locale: ILocaleService): {}
  • A filter used to format a number with a precision, using the locale.

    Arguments:

    • opt_precision: The used precision, default is 3.

    Examples:

     {{0.1234 | ngeoNumber}} => 0.123
     {{1.234 | ngeoNumber}} => 1.23
     {{12.34 | ngeoNumber}} => 12.3
     {{123.4 | ngeoNumber}} => 123
     {{1234 | ngeoNumber}} => 1230
    nginject
    ngdoc

    filter

    ngname

    ngeoNumber

    Parameters

    • $locale: ILocaleService

      Angular locale

    Returns {}

    Function used to format number into a string.

PermalinkService

  • PermalinkService($q: IQService, $timeout: ITimeoutService, $rootScope: IScope, $injector: IInjectorService, ngeoDebounce: {}, gettextCatalog: gettextCatalog, ngeoEventHelper: EventHelper, ngeoStateManager: StatemanagerService, ngeoLocation: StatemanagerLocation): void
  • The Permalink service for GMF, which uses the ngeo.statemanager.Service to manage the GMF application state. Here's the list of states are are managed:

    • the map center and zoom level
    • the current background layer selected
    • whether to add a crosshair feature in the map or not
    • the dimensions value

    It can also be used to add different types of things in the map, such as features, external data sources, etc.

    This is made using parameters in the url, which can be static (i.e. parameters that always have the same name) or dynamic (i.e. parameters that have a static prefix but with a full name being dynamic).

    Here's a complete list of possible parameters and what they do. But first, a legend

    === Parameters [type] ===

    • [paramameter_name] (type) [parameter documentation]

    === Parameters (static) ===

    A static parameter always have the same name.

    • baselayer_ref - "string" The name of the base layer that should be set visible as default in the map. If none is set, then the default one in the loaded theme is set instead.

    • eds_n (string), eds_u (string) These parameters stand for:

      • eds_n: "External Data Sources Names"
      • eds_u: "External Data Sources Urls" These parameters define external WMS/WMTS data sources to add to the map upon initialization. Both values are comma-separated lists, eds_u containing the urls to the services and eds_n the layer names (separated by ;). Here's an example: &eds_n=a;b;c,d,e&eds_u=host1.com,host2.com,host3.com, which reads as:
      • host1.com - layers: a, b and c
      • host2.com - layers: d
      • host3.com - layers: e For these parameters to work properly, they must define the same number of elements, i.e. same number of names and urls.
    • map_crosshair (boolean) If this parameter set to true, then a crosshair marker will be added to the center of the map upon initialization. The marker will stay at this location.

    • map_tooltip (string) If set, then the text defined in this parameter will be added as a tooltip at center of the map upon initialization.

    • map_x (number), map_y (number) These two parameters define a coordinate the map view should be centered to upon initialization. The value must be in the map view projection.

    • map_zoom (number) Defines the zoom level the map view should be zoomed to upon initialitation.

    • rl_features (string) This parameter defines vector features to add to the map upon initializaiton. In addition, if the application includes the draw tool, the features added can be modified. The draw tool can also be used to add new features, which are automatically added in the url.

    • tree_groups (string) Defines the layer groups that should be added to the layer tree upon application initialization as a comma-separated list. For example: Layers,Filters,Externals

    • wfs_layer (string) If set, this parameter defines the name of a layer that supports WFS to use to fetch features and add them to the map upon initialization. The dynamic parameter wfs_[] is required to identify the features to fetch.

    • wfs_ngroups (number) If set, then wfs_layer represents the name of a group and this property defines how many layers are in it. Requires wfs_layer to be set.

    • wfs_show_features (boolean) If set to false or 0, then the features returned by the wfs_layer parameter will not be shown in the map.

    === Parameters (dynamic) ===

    Dynamic parameters have variable names, which is always composed of:

    • a static prefix
    • a variable suffix

    The same dynamic parameter can be set multiple times, with different suffix values as name.

    For example: &wfs_a=&wfs_b=.

    • wfs_ is the static prefix
    • the name used as reference for this dynamic parameter is wfs_[]
    • therefore, this example has 2 wfs_[] parameters set, with a and b being the variable suffix
    • dim_[] (string) Variable suffix: the name of a dimension Value: * Defines the value of a specific dimension to set upon loading the application. For example: &dim_time=2019-01-25T14:45:51.986Z. WMS data sources that support the dimension set will be initialized with its value.

    • tree_enable_[] (boolean) Variable suffix: the name of a layer group Value: whether the group should be enabled or not in the layer tree For example: &tree_enable_polygon=true&tree_enable_point=false means that the group polygon will be enabled in the layer tree, but not point.

    • tree_group_layers_[] (string) Variable suffix: the name of a layer group Value: a comma-separated list of layers within the group that should be enabled upon initialization. For example: &tree_group_layers_polygon=forest,lake means that only the layers forest and lake within the group polygon would be enabled upon initialization.

    • tree_opacity_[] (number) Variable suffix: the name of a layer group Value: Number between 0 (transparent) and 1 (opaque) Defines the opacity of a layer group upon initialization.

    • wfs_[] (string) Variable suffix: the name of an attribute Value: A comma-separated list of values for the attribute This parameter requires wfs_layer in order to work properly. If set, it defines the filters to build to fetch the features to add to the map. For example: &wfs_layer=fuel&wfs_osm_id=1420918679,441134960 the layer fuel will be fetched features with the attribute osm_id equal to 1420918679 or 441134960. If wfs_ngroups is set, then an index is added to after the prefix of the wfs_[] parameter, for example: wfs_ngroups=2&wfs_0_[]=&wfs_1_[]=

    === More documentation ===

    To have the whole possibilities offer by the permalink, these services should be instantiated: ngeoBackgroundLayerMgr, ngeoFeatureOverlayMgr, ngeoFeatureHelper, gmfPermalinkOptions, gmfThemes, gmfObjectEditingManager, gmfThemeManager, defaultTheme, gmfTreeManager, ngeoWfsPermalink, ngeoAutoProjection and ngeoFeatures.

    Used functionalities:

    • default_theme: Theme to use by default.
    nginject
    ngdoc

    service

    ngname

    gmfPermalink

    Parameters

    • $q: IQService

      The Angular $q service.

    • $timeout: ITimeoutService

      Angular timeout service.

    • $rootScope: IScope

      Angular rootScope.

    • $injector: IInjectorService

      Main injector.

    • ngeoDebounce: {}

      ngeo Debounce factory.

    • gettextCatalog: gettextCatalog

      Gettext service.

    • ngeoEventHelper: EventHelper

      Ngeo event helper service

    • ngeoStateManager: StatemanagerService

      The ngeo statemanager service.

    • ngeoLocation: StatemanagerLocation

      ngeo location service.

    Returns void

ScalifyFilter

  • ScalifyFilter($filter: IFilterService): {}
  • Format a number as a localized scale. For instance:

    • For 'fr-CH' the value 25000 will become '1 : 25 000'.
    • For 'en-US' the value 25000 will become '1 : 25,000'.

    Example:

     <p>{{25000 | ngeoScalify}}</p>
    nginject
    ngdoc

    filter

    ngname

    ngeoScalify

    Parameters

    • $filter: IFilterService

      Angular filter

    Returns {}

    A function to format number into a 'scale' string.

UnitPrefixFilter

  • UnitPrefixFilter($filter: IFilterService): {}
  • A filter used to format a number with the prefix and unit

    Arguments:

    • opt_unit: The unit to used, default is ''.
    • opt_type: (unit|square|binary) the type of units, default is 'unit'.
    • opt_precision: The used precision, default is 3.

    Examples:

     {{25000 | ngeoUnitPrefix}} => 25 k
     {{25000 | ngeoUnitPrefix:'m'}} => 25 km
     {{25000000 | ngeoUnitPrefix:'m²':'square'}} => 25 km²
     {{2048 | ngeoUnitPrefix:'o':'binary'}} => 2 Kio
    nginject
    ngdoc

    filter

    ngname

    ngeoUnitPrefix

    Parameters

    • $filter: IFilterService

      Angular filter

    Returns {}

    Function used to format number into a string.

WfsPermalinkService

  • WfsPermalinkService($http: IHttpService, ngeoPermalinkOgcserverUrl: string, ngeoQueryResult: {}, ngeoWfsPermalinkOptions: {}): void
  • WFS permalink service that can be used to load features with a WFS GetFeature request given query parameters.

    Resulting features are then highlighted and the map is zoomed to the nearest map extent.

    Configuration:

    ngeoWfsPermalinkOptions: wfsTypes: - featureType: label: - ...

    Parameters:

    • wfs_layer tells what layer will be queried
    • wfs_showFeatures (boolean) tells if the features should be highlighted and listed (when true) or if the map should only be recentered on the features (when false). Default is true.
    • other parameters will be considered as WFS attribute/values filters and must be of the form: wfs_<layer attribute name>=<a comma-separated list of values>

    Example: http://example.com?wfs_layer=parcels&wfs_city=Oslo&wfs_number=12,34,56 will load parcels #12, 34 and 56 of the city of Oslo.

    It is possible to define several groups of filtering parameters by:

    • adding a wfs_ngroups parameter telling how many groups are defined
    • prefixing all filtering parameters by the number of each group, starting at 0. For instance wfs_0_<layer attribute name>

    Example: http://example.com?wfs_layer=parcels&wfs_ngroups=2&wfs_0_city=Oslo&wfs_0_number=12,34,56&wfs_1_city=Paris&wfs_1_number=78,90 will load parcels #12, 34 and 56 of the city of Oslo as well as parcels #78 and 90 of the city of Paris.

    ngdoc

    service

    ngname

    ngeoWfsPermalink

    nginject

    Parameters

    • $http: IHttpService

      Angular $http service.

    • ngeoPermalinkOgcserverUrl: string

      Url to the WFS server

    • ngeoQueryResult: {}

      The ngeo query result service.

    • ngeoWfsPermalinkOptions: {}

      The options to configure the ngeo wfs permalink service with.

    Returns void

blobToDataUrl

  • blobToDataUrl(blob: Blob): Promise<string>

buttonComponent

  • buttonComponent($parse: IParseService): IDirective<IScope, JQLite, IAttributes, IController>
  • The ngeo-btn allows creating toggle buttons working with ng-model. It is typically used with Bootstrap buttons (btn).

    Example:

    <button ngeo-btn class="btn" ng-model="ctrl.interaction.active"></button>

    This example is about creating a Bootstrap button that can pressed/depressed to activate/deactivate an OpenLayers interaction.

    htmlattribute

    {*} ng-model Any property on the scope. Ideally a boolean.

    nginject
    ngdoc

    directive

    ngname

    ngeoBtn

    Parameters

    • $parse: IParseService

      Angular parse service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

buttonGroupComponent

  • buttonGroupComponent($parse: IParseService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides two directives: ngeo-btn-group and ngeo-btn.

    The ngeo-btn-group directive allows creating "toggle" groups. It works with the ngeo-btn directive.

    Example:

    <div ngeo-btn-group>
      <button ngeo-btn class="btn" ng-model="ctrl.drawPoint.active"></button>
      <button ngeo-btn class="btn" ng-model="ctrl.drawLine.active"></button>
    </div>

    In that example the ngeo-btn are combined together in a "toggle group", where activating a button will deactivate the others.

    One can use ng-model directive at the group level in order to know if a button is active.

    Example:

    <div ngeo-btn-group ngeo-btn-group-active="ctrl.drawToolActive">

    See our live example: ../examples/interactionbtngroup.html

    htmlattribute

    {*} ngeo-btn-group-active Any property of the scope. Tells whether at least one button of the group is active.

    nginject
    ngdoc

    directive

    ngname

    ngeoBtnGroup

    Parameters

    • $parse: IParseService

      Angular parse service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

colorPickerComponent

  • colorPickerComponent(ngeoColorpickerTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides the "ngeoColorpicker" directive, a widget for selecting a color among predefined ones.

    Example:

    <div ngeo-colorpicker="ctrl.colors">
    </div>
    nginject
    ngdoc

    directive

    ngname

    ngeoColorpicker

    Parameters

    • ngeoColorpickerTemplateUrl: string | {}

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

contextualDataComponent

  • contextualDataComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive responsible of displaying contextual data after a right click on the map.

    This directive doesn't require being rendered in a visible DOM element. It's usually added to the element where the map directive is also added.

    Example:

    <gmf-map gmf-map-map="mainCtrl.map"
        gmf-contextualdata
        gmf-contextualdata-map="::mainCtrl.map"
        gmf-contextualdata-projections="::[21781,4326]">

    The content of the popover is managed in a partial that must be defined using the gmfContextualdatacontentTemplateUrl value. See {@link import("gmf/contextualdatacontentDirective.js").default} for more details.

    One can also provide a gmf-contextualdata-callback attribute in order to do some additional computing on the coordinate or the values received for the raster service. The callback function is called with the coordinate of the clicked point and the response data from the server. It is intended to return an object of additional properties to add to the scope.

    See the ../examples/contribs/gmf/contextualdata.html example for a usage sample.

    htmlattribute

    {import("ol/Map.js").default} map The map.

    htmlattribute

    {Array} projections The list of projections.

    htmlattribute

    {Function} callback A function called after server (raster) data is received in case some additional computing is required. Optional.

    ngdoc

    directive

    ngname

    gmfContextualdata

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

contextualDataComponentContent

  • contextualDataComponentContent(gmfContextualdatacontentTemplateUrl: string): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive responsible of formatting the content of the popover for the contextual data directive.

    Its main purpose is to configure the template to be used. Integrators should ensure that the template values match the configuration of the contextual data directive.

    For each projection the following expressions can be used (replace xxxx by the relevant projection code:

    • {{coord_xxxx}},
    • {{coord_xxxx_eastern}},
    • {{coord_xxxx_northern}}

    Tip: one should use the ngeoNumberCoordinates and ngeoDMSCoordinates.

    The raster service is requested to query additional information. The integrators can also use {{xxxx}} where xxxx will be replaced by the name of the raster layers (for example 'srtm').

    See the ../examples/contribs/gmf/contextualdata.html example for a usage sample.

    nginject
    ngdoc

    directive

    ngname

    gmfContextualdatacontent

    Parameters

    • gmfContextualdatacontentTemplateUrl: string

      Url to template.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

controlComponent

  • controlComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive that can be used to add a control to the map using a DOM element.

    Example:

    <div ngeo-control="ctrl.control" ngeo-control-map="ctrl.map"></div>

    The expression passed to "ngeo-control" should evaluate to a control instance, and the expression passed to "ngeo-control-map" should evaluate to a map instance.

    See our live example: ../examples/control.html

    htmlattribute

    {import("ol/Map.js").default} ngeo-control-map The map.

    nginject
    ngdoc

    directive

    ngname

    ngeoControl

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

datePickerComponent

  • datePickerComponent(ngeoDatePickerTemplateUrl: string | {}, $timeout: ITimeoutService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive to select a single date or a range of dates. Requires jQuery UI for the 'datepicker' widget.

    nginject
    ngdoc

    directive

    ngname

    ngeoDatePicker

    Parameters

    • ngeoDatePickerTemplateUrl: string | {}
    • $timeout: ITimeoutService

      angular timeout service

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

dateTimeComponent

  • dateTimeComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A directive used to display a date or time picker

    Example:

     <input ngeo-datetimepicker
         ngeo-datetimepicker-options="{timepicker: false}"
    htmlattribute

    {Object} ngeo-datetimepicker-options The options.

    ngdoc

    directive

    ngname

    ngeoDatetimepicker

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawComponent

  • drawComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to draw vector features on a map. Example:

    <ngeo-drawfeature
        ngeo-btn-group
        class="btn-group"
        ngeo-drawfeature-active="ctrl.drawActive"
        ngeo-drawfeature-map="::ctrl.map">
      <a
        href
        translate
        ngeo-btn
        ngeo-drawpoint
        class="btn btn-default ngeo-drawfeature-point"
        ng-class="{active: dfCtrl.drawPoint.active}"
        ng-model="dfCtrl.drawPoint.active"></a>
      <a
        href
        translate
        ngeo-btn
        ngeo-measurelength
        class="btn btn-default ngeo-drawfeature-linestring"
        ng-class="{active: dfCtrl.measureLength.active}"
        ng-model="dfCtrl.measureLength.active"></a>
      <a
        href
        translate
        ngeo-btn
        ngeo-measurearea
        class="btn btn-default ngeo-drawfeature-polygon"
        ng-class="{active: dfCtrl.measureArea.active}"
        ng-model="dfCtrl.measureArea.active"></a>
      <a
        href
        translate
        ngeo-btn
        ngeo-measureazimut
        class="btn btn-default ngeo-drawfeature-circle"
        ng-class="{active: dfCtrl.measureAzimut.active}"
        ng-model="dfCtrl.measureAzimut.active"></a>
      <a
        href
        translate
        ngeo-btn
        ngeo-drawrectangle
        class="btn btn-default ngeo-drawfeature-rectangle"
        ng-class="{active: dfCtrl.drawRectangle.active}"
        ng-model="dfCtrl.drawRectangle.active"></a>
      <a
        href
        translate
        ngeo-btn
        ngeo-drawtext
        class="btn btn-default ngeo-drawfeature-text"
        ng-class="{active: dfCtrl.drawText.active}"
        ng-model="dfCtrl.drawText.active"></a>
    </ngeo-drawfeature>
    htmlattribute

    {boolean} ngeo-drawfeature-active Whether the directive is active or not.

    htmlattribute

    {!import("ol/Collection.js").default=} ngeo-drawfeature-features The features collection in which to push the drawn features. If none is provided, then the ngeoFeatures collection is used.

    htmlattribute

    {import("ol/Map.js").default} ngeo-drawfeature-map The map.

    htmlattribute

    {boolean} ngeo-drawfeature-showmeasure. Checks the checkbox in order to display the feature measurements as a label. Default to false.

    nginject
    ngdoc

    directive

    ngname

    ngeoDrawfeature

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawPointComponent

  • drawPointComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawpoint

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawRectangleComponent

  • drawRectangleComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawrectangle

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawTextComponent

  • drawTextComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawtext

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawinfDrawFeatureComponent

  • drawinfDrawFeatureComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to create, modify and delete vector features on a map with the addition of changing their style. Example:

    <gmf-drawfeature
        gmf-drawfeature-active="ctrl.drawFeatureActive"
        gmf-drawfeature-map="::ctrl.map">
    </gmf-drawfeature>
    htmlattribute

    {boolean} gmf-drawfeature-active Whether the directive is active or not.

    htmlattribute

    {import("ol/Map.js").default} gmf-drawfeature-map The map.

    nginject
    ngdoc

    directive

    ngname

    gmfDrawfeature

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

drawingDrawFeatureComponent

  • drawingDrawFeatureComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to set the style of a vector feature. The options depend on the type of geometry. Example:

    <gmf-featurestyle
        gmf-featurestyle-feature="ctrl.selectedFeature">
    </gmf-featurestyle>
    htmlattribute

    {import("ol/Feature.js").default} gmf-featurestyle-feature The feature.

    nginject
    ngdoc

    directive

    ngname

    gmfFeaturestyle

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

editingCreateFeatureComponent

  • editingCreateFeatureComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A directive used to draw vector features of a single geometry type using either a 'draw' or 'measure' interaction. Once a feature is finished being drawn, it is added to a collection of features.

    The geometry types supported are:

    • Point
    • LineString
    • Polygon

    Example:

    <a
      href
      translate
      ngeo-btn
      ngeo-createfeature
      ngeo-createfeature-active="ctrl.createPointActive"
      ngeo-createfeature-features="ctrl.features"
      ngeo-createfeature-geom-type="ctrl.pointGeomType"
      ngeo-createfeature-map="::ctrl.map"
      class="btn btn-default ngeo-createfeature-point"
      ng-class="{active: ctrl.createPointActive}"
      ng-model="ctrl.createPointActive">
    </a>
    htmlattribute

    {boolean} ngeo-createfeature-active Whether the directive is active or not.

    htmlattribute

    {import("ol/Collection.js").default} ngeo-createfeature-features The collection of features where to add those created by this directive.

    htmlattribute

    {string} ngeo-createfeature-geom-type Determines the type of geometry this directive should draw.

    htmlattribute

    {import("ol/Map.js").default} ngeo-createfeature-map The map.

    ngdoc

    directive

    ngname

    ngeoCreatefeature

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

editingCreateRegularPolygonFromClickComponent

  • editingCreateRegularPolygonFromClickComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A directive used to draw vector features of a single geometry type using either a 'draw' or 'measure' interaction. Once a feature is finished being drawn, it is added to a collection of features.

    The geometry types supported are:

    • Point
    • LineString
    • Polygon

    Example:

    <a
      href
      translate
      ngeo-btn
      ngeo-createregularpolygonfromclick
      ngeo-createregularpolygonfromclick-active="ctrl.active"
      ngeo-createregularpolygonfromclick-angle="::ctrl.angle"
      ngeo-createregularpolygonfromclick-features="ctrl.features"
      ngeo-createregularpolygonfromclick-map="::ctrl.map"
      ngeo-createregularpolygonfromclick-radius="::ctrl.radius"
      ngeo-createregularpolygonfromclick-sides="::ctrl.sides"
      class="btn btn-default ngeo-createregularpolygonfromclick"
      ng-class="{active: ctrl.active}"
      ng-model="ctrl.active">
    </a>
    htmlattribute

    {boolean} ngeo-createregularpolygonfromclick-active Whether the directive is active or not.

    htmlattribute

    {number|undefined} ngeo-createregularpolygonfromclick-angle Angle in radians. A value of 0 will have one of the shape's point facing up. Default value is 0.

    htmlattribute

    {import("ol/Collection.js").default} ngeo-createregularpolygonfromclick-features The collection of features where to add those created by this directive.

    htmlattribute

    {import("ol/Map.js").default} ngeo-createregularpolygonfromclick-map The map.

    htmlattribute

    {number} ngeo-createregularpolygonfromclick-radius Radius size in map units.

    htmlattribute

    {number|undefined} ngeo-createregularpolygonfromclick-sides The number of sides for the regular polygon. Default value is 3.

    ngdoc

    directive

    ngname

    ngeoCreateregularpolygonfromclick

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

editingEditFeatureComponent

  • editingEditFeatureComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to insert, modify and delete features from a single layer. It allows you to modify the geometry of the feature in addition to its attributes.

    In order to modify or delete a feature, you must click on the map at the location of the feature to select it first.

    In order to create a new feature, you use the "Draw" button and digitize the feature on the map.

    If no layers are editable the component will be hidden.

    Used metadata:

    • enumeratedAttributes: List of attribute names which have enumerated attribute values (for filters purpose). For WMS layers.
    • snappingConfig: The snapping configuration for the leaf. If set, the leaf's layer is considered to be "snappable", even if the config itself is empty. Example value: {'tolerance': 50, 'edge': false} For WMS layers.

    Example:

    <gmf-editfeature
        gmf-editfeature-dirty="ctrl.dirty"
        gmf-editfeature-editabletreectrl="::ctrl.treeCtrl"
        gmf-editfeature-map="::ctrl.map"
        gmf-editfeature-state="efsCtrl.state"
        gmf-editfeature-tolerance="::ctrl.tolerance"
        gmf-editfeature-vector="::ctrl.vectorLayer">
        gmf-editfeature-closeaftersave="::ctrl.closeaftersave">
    </gmf-editfeature>
    htmlattribute

    {boolean} gmf-editfeature-dirty Flag that is toggled as soon as the feature changes, i.e. if any of its properties change, which includes the geometry.

    htmlattribute

    {import("ngeo/layertree/Controller.js").LayertreeController} gmf-editfeature-editabletreectrl A reference to the editable Layertree controller, which contains a a reference to the node and WMS layer.

    htmlattribute

    {import("ol/Map.js").default} gmf-editfeature-map The map.

    htmlattribute

    {string} gmf-editfeature-state The state property shared with the gmf-editfeatureselector directive. For more info, see in that directive.

    htmlattribute

    {number|undefined} gmf-editfeatureselector-tolerance The buffer in pixels to use when making queries to get the features.

    htmlattribute

    {import("ol/layer/Vector.js").default} gmf-editfeature-vector The vector layer in which to draw the vector features.

    htmlattribute

    {boolean} gmf-editfeatureselector-closeaftersave If true, immediately return to the main edit panel after save. Default is false.

    ngdoc

    directive

    ngname

    gmfEditfeature

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

editingExportFeaturesComponent

  • editingExportFeaturesComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to export vector features in different types of format. To configure which formats to use, define the ngeoExportFeatureFormats value, as such:

    app.module.value('ngeoExportFeatureFormats', [
        ngeo.misc.FeatureHelper.FormatType.KML,
        ngeo.misc.FeatureHelper.FormatType.GPX
    ]);

    Example:

    <button
      ngeo-exportfeatures
      ngeo-exportfeatures-features="ctrl.features"
      class="btn btn-link">Export</button>
    htmlattribute

    {import("ol/Collection.js").default.<import("ol/Feature.js").default>} ngeo-exportfeatures-features The features to export

    nginject
    ngdoc

    directive

    ngname

    ngeoExportfeatures

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

extentToRectangle

  • extentToRectangle(extent: number[]): number[][]
  • Takes an import("ol/extent.js").Extent and return an Array of ol.Coordinate representing a rectangle polygon.

    Parameters

    • extent: number[]

      The extent.

    Returns number[][]

    The Array of coordinate of the rectangle.

geolocationMobileComponent

  • geolocationMobileComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a "mobile geolocation" directive.

    Example:

     <button ngeo-mobile-geolocation
       ngeo-mobile-geolocation-map="ctrl.map"
       ngeo-mobile-geolocation-options="ctrl.mobileGeolocationOptions">
     </button>

    See our live example: ../examples/mobilegeolocation.html

    htmlattribute

    {import("ol/Map.js").default} ngeo-mobile-geolocation-map The map.

    htmlattribute

    {MobileGeolocationDirectiveOptions} ngeo-mobile-geolocation-options The options.

    nginject
    ngdoc

    directive

    ngname

    ngeoMobileGeolocation

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

gmfLayertreeComponent

  • gmfLayertreeComponent(ngeoLayertreeTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides the "ngeoLayertree" directive, a directive for creating layer trees in application.

    The directive assumes that tree nodes that are not leaves have a "children" property referencing an array of child nodes.

    Example:

     <div ngeo-layertree="ctrl.tree"
       ngeo-layertree-map="ctrl.map"
       ngeo-layertree-nodelayer="ctrl.getLayer(node)"
       ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)">
     </div>

    The "ngeo-layertree", "ngeo-layertree-map" and "ngeo-layertree-nodelayer" attributes are mandatory attributes.

    • "ngeo-layertree" specifies an expression providing the tree. The directive watches that expression, making it possible to retrieve the tree data through Ajax.

    • "ngeo-layertree-map" specifies an expression providing the OpenLayers map. The directive doesn't watch that expression.

    • The "ngeo-layertree-nodelayer" specifies an expression providing the layer for a given node. In most cases that expression will be function call with "node" as the argument to the function call. E.g. "ngeo-layertree-nodelayer="ctrl.getLayer(node)".

    • The "ngeo-layertree-listeners" specifies an expression providing a function to bind scope events to customs functions. You'll must set the listener on the "treeScope" and probably use "treeCtrl" as context. E.g. "ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)".

    The directive comes with a default template. That template assumes that tree nodes that are not leaves have a "children" property referencing an array of child nodes. It also assumes that nodes have a "name" property.

    By default the directive uses "layertree.html" as its templateUrl. This can be changed by redefining the "ngeoLayertreeTemplateUrl" value (using app.module.value('ngeoLayertreeTemplateUrl', 'path/layertree.html'), or by adding an "ngeo-layertree-templateurl" attribute to the element.

    Example:

     <div ngeo-layertree="ctrl.tree"
       ngeo-layertree-templateurl="path/to/layertree.html"
       ngeo-layertree-map="ctrl.map"
       ngeo-layertree-nodelayer="ctrl.getLayer(node)"
       ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)"
     </div>

    The directive has its own scope, but it is not an isolate scope. That scope has a "layertreeCtrl" property which is a reference to the directive's controller: "layertreeCtrl". You can refer to that property in a custom template for example.

    See our live example: ../examples/layertree.html

    htmlattribute

    {Object} ngeo-layertree One theme (JSON).

    htmlattribute

    {string} ngeo-layertree-templateurl The template URL.

    htmlattribute

    {import("ol/Map.js").default} ngeo-layertree-map The map.

    htmlattribute

    {string} ngeo-layertree-nodelayer Expression that will be parsed to be a {@link Function} that return a {@link import("ol/layer/Layer.js").default} with the argument: { 'node': {@link Object}|undefined, 'depth': {@link number} }

    htmlattribute

    {string} ngeo-layertree-nodelayerexpr Expression that will be parsed to be a {@link ngeo-layertree-nodelayer}.

    htmlattribute

    {string} ngeo-layertree-listeners Expression that will be parsed to be a {@link Function} with the argument: { 'treeScope': !{@link angular.IScope}, 'treeCtrl': {@link import("ngeo/layertree/Controller.js").LayertreeController} }

    htmlattribute

    {string} ngeo-layertree-listenersexpr Expression that will be parsed to be a {@link ngeo-layertree-listeners}.

    nginject
    ngdoc

    directive

    ngname

    ngeoLayertree

    Parameters

    • ngeoLayertreeTemplateUrl: string | {}

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

gmfMapComponent

  • gmfMapComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A "map" directive for a GeoMapFish application.

    Example:

     <gmf-map gmf-map-map="mainCtrl.map"></gmf-map>
    htmlattribute

    {import("ol/Map.js").default} gmf-map-map The map.

    htmlattribute

    {boolean|undefined} gmf-map-manage-resize Whether to update the size of the map on browser window resize.

    htmlattribute

    {boolean|undefined} gmf-map-resize-transition The duration (milliseconds) of the animation that may occur on the div containing the map. Used to smoothly resize the map while the animation is in progress.

    nginject
    ngdoc

    directive

    ngname

    gmfMap

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

Const httpInterceptor

  • httpInterceptor($q: IQService, ngeoDebounce: {}, ngeoNetworkStatus: Service): IHttpInterceptor
  • nginject

    Parameters

    • $q: IQService

      The Angular $q service.

    • ngeoDebounce: {}

      ngeo debounce service.

    • ngeoNetworkStatus: Service

      ngeo network status service.

    Returns IHttpInterceptor

    the interceptor

interactionDecoration

  • interactionDecoration(interaction: Interaction): void
  • Provides a function that adds an "active" property (using Object.defineProperty) to an interaction, making it possible to use ngModel to activate/deactivate interactions.

    Example:

     <input type="checkbox" ngModel="interaction.active" />

    Parameters

    • interaction: Interaction

      Interaction to decorate.

    Returns void

layerDecoration

  • layerDecoration(layer: BaseLayer): void
  • Provides a function that adds properties (using Object.defineProperty) to the layer, making it possible to control layer properties with ngModel.

    Example:

     <input type="checkbox" ngModel="layer.visible" />

    Parameters

    • layer: BaseLayer

      Layer to decorate.

    Returns void

layerLoading

  • layerLoading(layer: BaseLayer, $scope: IScope): void
  • Provides a function that adds a 'loading 'property (using Object.defineProperty) to an ol.layer.Group or a layer with an ol.source.Tile or an ol.source.Image source. This property is true when the layer is loading and false otherwise.

    Example:

     <span ng-if="layer.loading">please wait</span>

    Parameters

    • layer: BaseLayer

      layer.

    • $scope: IScope

      Scope.

    Returns void

layertreeTimeSliderComponent

  • layertreeTimeSliderComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive to select a single date or a range of dates with a slider Example:

     <gmf-time-slider
         gmf-time-slider-time="{
           maxValue: '2013-12-31T00:00:00Z',
           minValue: '2006-01-01T00:00:00Z',
           mode: 'range'}"
         gmf-time-slider-on-date-selected="ctrl.onDateSelected(time)">
     </gmf-time-slider>
    htmlattribute

    {import('ngeo/datasource/OGC.js').TimeProperty} gmf-time-slider-time parameter for initialization.

    htmlattribute

    {function()} gmf-time-slider-on-date-selected Expression evaluated after date(s) changed

    nginject
    ngdoc

    directive

    ngname

    gmfTimeSlider

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

magnitude2

  • magnitude2(a: number[], b: number[]): number
  • Parameters

    • a: number[]

      Some coordinates.

    • b: number[]

      Some other coordinates.

    Returns number

    The squared magnitude.

mapComponent

  • mapComponent($window: IWindowService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive used to insert a user-defined OpenLayers map in the DOM. The directive does not create an isolate scope.

    Examples:

    Simple:

     <div ngeo-map="ctrl.map"></div>

    Manage window resizing:

     <div
       ngeo-map="ctrl.map"
       ngeo-map-manage-resize="ctrl.manageResize"
       ngeo-map-resize-transition="ctrl.resizeTransition">
     </div>

    See our live examples: ../examples/permalink.html ../examples/simple.html

    htmlattribute

    {import("ol/Map.js").default} ngeo-map The map.

    ngdoc

    directive

    ngname

    ngeoMap

    nginject

    Parameters

    • $window: IWindowService

      The Angular $window service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

mapResenterComponent

  • mapResenterComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides the "ngeoRecenter" directive, a widget for recentering a map to a specific extent (by using ngeo-extent) or a specific zoom level (by using ngeo-zoom).

    Example:

     <div ngeo-recenter ngeo-recenter-map="::ctrl.map">
       <a href="#" ngeo-extent="[-1898084, 4676723, 3972279, 8590299]">A</a>
       <a href="#" ngeo-extent="[727681, 5784754, 1094579, 6029353]">B</a>
       <a href="#" ngeo-zoom="1">Zoom to level 1</a>
     </div>

    Or with a select:

     <select ngeo-recenter ngeo-recenter-map="::ctrl.map">
       <option ngeo-extent="[-1898084, 4676723, 3972279, 8590299]">A</option>
       <option ngeo-extent="[727681, 5784754, 1094579, 6029353]">B</option>
     </select>

    See our live example: ../examples/recenter.html

    htmlattribute

    {import("ol/Map.js").default} ngeo-recenter-map The map.

    ngdoc

    directive

    ngname

    ngeoRecenter

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

mapResizeComponent

  • mapResizeComponent($window: IWindowService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive that resizes the map in an animation loop during 1 second when the value of "state" changes. This is especially useful when changing the size of other elements with a transition leads to a change of the map size.

    Example:

     <div ng-class="ctrl.open ? 'open' : 'close' ngeo-resizemap="ctrl.map"
       ngeo-resizemap-state="open">
     <div>
     <input type="checkbox" ng-model="ctrl.open" />

    See our live example: ../examples/animation.html

    nginject
    ngdoc

    directive

    ngname

    ngeoResizemap

    Parameters

    • $window: IWindowService

      Angular window service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

Const mapScaleselectorComponent

  • mapScaleselectorComponent(ngeoScaleselectorTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides the "ngeoScaleselector" directive, a widget for selecting map scales.

    Example:

    <div ngeo-scaleselector="ctrl.scales" ngeo-scaleselector-map="ctrl.map">
    </div>

    The expression passed to the ngeo-scaleselector attribute should return an array of this form:

    [20000, 10000, 5000, 2500]

    That directive's partial uses Bootstrap's dropdown and dropdown-menu classes, and data-toggle="dropdown", so it is meant to be used with Bootstrap's "dropdown" jQuery plugin.

    You can pass options to configure the behaviors of this element. Options is a {@link ScaleselectorOptions} object.

    Example:

    <div ngeo-scaleselector="ctrl.scales"
      ngeo-scaleselector-map="ctrl.map"
      ngeo-scaleselector-options="ctrl.scaleSelectorOptions">
    </div>

    By default the directive uses "scaleselector.html" as its templateUrl. This can be changed by redefining the "ngeoScaleselectorTemplateUrl" value.

    The directive has its own scope, but it is not isolate scope. That scope includes a reference to the directive's controller: the "scaleselectorCtrl" scope property.

    The directive doesn't create any watcher. In particular the object including the scales information is now watched.

    See our live example: ../examples/scaleselector.html

    htmlattribute

    {!Array.} ngeo-scaleselector The available scales.

    htmlattribute

    {import("ol/Map.js").default} ngeo-scaleselector-map The map.

    htmlattribute

    {ScaleselectorOptions} ngeo-scaleselector-options Optional. The configuration options.

    nginject
    ngdoc

    directive

    ngname

    ngeoScaleselector

    Parameters

    • ngeoScaleselectorTemplateUrl: string | {}

      Template URL for the directive.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

measureAreaComponent

  • measureAreaComponent($compile: ICompileService, gettextCatalog: gettextCatalog, $filter: IFilterService, $injector: IInjectorService): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawpoint

    Parameters

    • $compile: ICompileService

      Angular compile service.

    • gettextCatalog: gettextCatalog

      Gettext service.

    • $filter: IFilterService

      Angular filter

    • $injector: IInjectorService

      Main injector.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

measureAzimutComponent

  • measureAzimutComponent($compile: ICompileService, gettextCatalog: gettextCatalog, $filter: IFilterService, $injector: IInjectorService): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawpoint

    Parameters

    • $compile: ICompileService

      Angular compile service.

    • gettextCatalog: gettextCatalog

      Gettext catalog.

    • $filter: IFilterService

      Angular filter

    • $injector: IInjectorService

      Main injector.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

measureLengthComponent

  • measureLengthComponent($compile: ICompileService, gettextCatalog: gettextCatalog, $filter: IFilterService, $injector: IInjectorService): IDirective<IScope, JQLite, IAttributes, IController>
  • nginject
    ngdoc

    directive

    ngname

    ngeoDrawpoint

    Parameters

    • $compile: ICompileService

      Angular compile service.

    • gettextCatalog: gettextCatalog

      Gettext catalog.

    • $filter: IFilterService

      Angular filter.

    • $injector: IInjectorService

      Main injector.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

messagePopopComponent

  • messagePopopComponent(ngeoPopupTemplateUrl: string): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive used to show a popup over the page with a title and content.

    Things to know about this directive:

    • This directive is intended to be used along with the popup service.

    • By default the directive uses "popup.html" as its templateUrl. This can be changed by redefining the "ngeoPopupTemplateUrl" value.

    • The directive doesn't create any scope but relies on its parent scope. Properties like 'content', 'title' or 'open' come from the parent scope.

    nginject
    ngdoc

    directive

    ngname

    ngeoPopup

    Parameters

    • ngeoPopupTemplateUrl: string

      URL to popup template.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

messagePopoverAnchorComponent

  • messagePopoverAnchorComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • ngdoc

    directive

    nginject
    ngname

    ngeoPopoverAnchor

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object

messagePopoverComponent

  • messagePopoverComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive used to display a Bootstrap popover.

    anchor 1
    • action 1:
    ngdoc

    directive

    nginject
    ngname

    ngeoPopover

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

messagePopoverContentComponent

  • messagePopoverContentComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • ngdoc

    directive

    nginject
    ngname

    ngeoPopoverContent

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object

mobileMeasureAreaComponent

  • mobileMeasureAreaComponent(gmfMobileMeasureAreaTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive to do a area measure on the mobile devices.

    Example:

     <div gmf-mobile-measurearea
       gmf-mobile-measurearea-active="ctrl.measureAreaActive"
       gmf-mobile-measurearea-map="::ctrl.map">
     </div>
    htmlattribute

    {boolean} gmf-mobile-measurearea-active Used to active or deactivate the component.

    htmlattribute

    {number=} gmf-mobile-measurearea-precision the number of significant digits to display.

    htmlattribute

    {import("ol/Map.js").default} gmf-mobile-measurearea-map The map.

    htmlattribute

    {import("ol/style/Style.js").StyleLike=} gmf-mobile-measurearea-sketchstyle A style for the measure area.

    nginject
    ngdoc

    directive

    ngname

    gmfMobileMeasureArea

    Parameters

    • gmfMobileMeasureAreaTemplateUrl: string | {}

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

mobileMeasureLenthComponent

  • mobileMeasureLenthComponent(gmfMobileMeasureLengthTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive to do a length measure on the mobile devices.

    Example:

     <div gmf-mobile-measurelength
       gmf-mobile-measurelength-active="ctrl.measureLengthActive"
       gmf-mobile-measurelength-map="::ctrl.map">
     </div>
    htmlattribute

    {boolean} gmf-mobile-measurelength-active Used to active or deactivate the component.

    htmlattribute

    {number=} gmf-mobile-measurelength-precision the number of significant digits to display.

    htmlattribute

    {import("ol/Map.js").default} gmf-mobile-measurelength-map The map.

    htmlattribute

    {import("ol/style/Style.js").StyleLike=} gmf-mobile-measurelength-sketchstyle A style for the measure length.

    nginject
    ngdoc

    directive

    ngname

    gmfMobileMeasureLength

    Parameters

    • gmfMobileMeasureLengthTemplateUrl: string | {}

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

mobileMeasurePointComponent

  • mobileMeasurePointComponent(gmfMobileMeasurePointTemplateUrl: string | {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive to do a point (coordinate and elevation) measure on the mobile devices.

    Example:

     <div gmf-mobile-measurepoint
       gmf-mobile-measurepoint-active="ctrl.measurePointActive"
       gmf-mobile-measurepoint-layersconfig="::ctrl.measurePointLayers"
       gmf-mobile-measurepoint-map="::ctrl.map">
     </div>

    Where ctrl.measurePointLayers is an object like this:

     this.measurePointLayers = [
       {name: 'srtm', unit: 'm', decimals: 2},
       {name: 'wind', {unit: 'km/h'},
       {name: 'humidity'}
     ];
    htmlattribute

    {boolean} gmf-mobile-measurepoint-active Used to active or deactivate the component.

    htmlattribute

    {number=} gmf-mobile-measurepoint-coordinatedecimals number of decimal to display for the coordinate.

    htmlattribute

    {Array} gmf-mobile-measurepoint-layersconfig Raster elevation layers to get information under the point and its configuaration.

    htmlattribute

    {import("ol/Map.js").default} gmf-mobile-measurepoint-map The map.

    htmlattribute

    {import("ol/style/Style.js").StyleLike=} gmf-mobile-measurepoint-sketchstyle A style for the measure point.

    nginject
    ngdoc

    directive

    ngname

    gmfMobileMeasurePoint

    Parameters

    • gmfMobileMeasurePointTemplateUrl: string | {}

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

mobileNavigationBackComponent

  • mobileNavigationBackComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A directive to be used in conjunction with {@link import("gmf/mobile/navigation.js").default.component}. The directive can be set on a slide element of {@link import("gmf/mobile/navigation.js").default.component} with an expression. When the value of the expression changes and becomes true, the navigation returns to the previous slide, if the slide is currently active.

    Example:

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

mobileNavigationBackOnClickComponent

  • mobileNavigationBackOnClickComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • A directive to be used in conjunction with {@link import("gmf/mobile/navigation.js").default.component}. The directive can be set on a slide element of {@link import("gmf/mobile/navigation.js").default.component}. When the element is clicked, the navigation returns to the previous slide if the slide is currently active.

    Example:

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

mobileNavigationComponent

  • mobileNavigationComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • An "gmf-mobile-nav" directive defining the behavior of a tree-structured menu.

    The directive is to be placed on a nav element, with the following structure:

    When an element slides in the directive changes the text in the header.

    nginject

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

ngeoOfflineTemplateUrl

  • ngeoOfflineTemplateUrl($element: JQuery<HTMLElement>, $attrs: IAttributes, ngeoOfflineTemplateUrl: {}): string
  • nginject

    Parameters

    • $element: JQuery<HTMLElement>

      Element.

    • $attrs: IAttributes

      Attributes.

    • ngeoOfflineTemplateUrl: {}

      Template function.

    Returns string

    Template URL.

objectEditingGetWMSFeatureComponent

  • objectEditingGetWMSFeatureComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • When activated, this directive registers clicks on an OL3 map and use the clicked coordinate to fetch a feature using the ObjectEditing query service. A feature returned is pushed to a collection.

    Example:

    <gmf-objecteditinggetwmsfeature
        gmf-objecteditinggetwmsfeature-active="ctrl.active"
        gmf-objecteditinggetwmsfeature-features="ctrl.features"
        gmf-objecteditinggetwmsfeature-layerinfo="ctrl.layerInfo"
        gmf-objecteditinggetwmsfeature-map="::ctrl.map">
    </gmf-objecteditinggetwmsfeature>
    htmlattribute

    {boolean} gmf-objecteditinggetwmsfeature-active Whether the directive is active or not.

    htmlattribute

    {import("ol/Collection.js").default} gmf-objecteditinggetwmsfeature-features The collection of features where to add those created by this directive.

    htmlattribute

    {import('gmf/objectediting/toolsComponent.js').ObjectEditingQueryableLayerInfo} gmf-objecteditinggetwmsfeature-layerinfo Queryable layer info.

    htmlattribute

    {import("ol/Map.js").default} gmf-objecteditinggetwmsfeature-map The map.

    nginject
    ngdoc

    directive

    ngname

    gmfObjecteditinggetwmsfeature

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

objectEditingToolsComponent

  • objectEditingToolsComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Directive used to edit the geometry of a single feature using advanced tools.

    Example:

    <gmf-objecteditingtools
        gmf-objecteditingtools-active="ctrl.objectEditingActive"
        gmf-objecteditingtools-copyfromactive="ctrl.objectEditingCopyFromActive"
        gmf-objecteditingtools-deletefromactive="ctrl.objectEditingDeleteFromActive"
        gmf-objecteditingtools-feature="ctrl.objectEditingFeature"
        gmf-objecteditingtools-geomtype="ctrl.objectEditingGeomType"
        gmf-objecteditingtools-map="::ctrl.map"
        gmf-objecteditingtools-process="::ctrl.process"
        gmf-objecteditingtools-queryablelayerinfo="::ctrl.queryableLayerInfo"
        gmf-objecteditingtools-requireslayer="ctrl.requiresLayer"
        gmf-objecteditingtools-sketchfeatures="::ctrl.sketchFeatures">
    </gmf-objecteditingtools>
    htmlattribute

    {boolean} gmf-objecteditingtools-active Whether the directive is active or not.

    htmlattribute

    {boolean} gmf-objecteditingtools-copyfromactive Whether the 'Copy from' tool is active or not.

    htmlattribute

    {boolean} gmf-objecteditingtools-deletefromactive Whether the 'Delete from' tool is active or not.

    htmlattribute

    {import("ol/Feature.js").default} gmf-objecteditingtools-feature The feature to edit.

    htmlattribute

    {string} gmf-objecteditingtools-geomtype The geometry type.

    htmlattribute

    {import("ol/Map.js").default} gmf-objecteditingtools-map The map.

    htmlattribute

    {string} gmf-objectediting-process Determines the behavior to adopt when sketch features are added.

    htmlattribute

    {ObjectEditingQueryableLayerInfo} gmf-objectediting-queryablelayerinfo Queryable layer information.

    htmlattribute

    {boolean} gmf-objectediting-requireslayer Flag that determines if the currently active tool requires a queryable layer or not.

    htmlattribute

    {import("ol/Collection.js").default.<import("ol/Feature.js").default>} gmf-objectediting-sketchfeatures Collection of temporary features being drawn by the tools.

    nginject
    ngdoc

    directive

    ngname

    gmfObjecteditingtools

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

profileDarwLineComponent

  • profileDarwLineComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Simple directive that can be put on any element. The directive listen on clicks events to allow/disallow to draw one line (and only one) on the map. Typically used to draw the line that will serve the gmf.Profile.

    Example:

     <gmf-drawprofileline
       gmf-drawprofileline-active="mainCtrl.drawProfileActive"
       gmf-drawprofileline-map="mainCtrl.map"
       gmf-drawprofileline-line="mainCtrl.line"
     </gmf-drawprofileline>
    htmlattribute

    {import("ol/Map.js").default} gmf-drawprofileline-map The map.

    htmlattribute

    {import("ol/geom/LineString.js").default} gmf-drawprofileline-line The variable to connect with the drawn line.

    htmlattribute

    {boolean=} gmf-drawprofileline-active Active the component.

    htmlattribute

    {import("ol/style/Style.js").default=} gmf-drawprofileline-style Optional style for the drawn line.

    ngdoc

    directive

    ngname

    gmfDrawprofileline

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

profileElevationComponent

  • profileElevationComponent(ngeoDebounce: {}): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive used to insert an elevation profile chart in the DOM.

    Example:

     <div ngeo-profile="ctrl.profileData"
       ngeo-profile-options="ctrl.profileOptions"
       ngeo-profile-pois="ctrl.profilePois">
     </div>

    Where ctrl.profileOptions is of type {@link ProfileOptions}; ctrl.profileData and ctrl.profilePois are arrays which will be processed by distanceExtractor {function(Object): number}, linesConfiguration {Object.<string, LineConfiguration>} {@link LineConfiguration} and {@link PoiExtractor}.

    See our live example: ../examples/profile.html

    htmlattribute

    {?Object} ngeo-profile The profile data.

    htmlattribute

    {ProfileOptions} ngeo-profile-options The options.

    htmlattribute

    {?Array} ngeo-profile-pois The data for POIs.

    htmlattribute

    {*} ngeo-profile-highlight Any property on the scope which evaluated value may correspond to distance from origin.

    nginject
    ngdoc

    directive

    ngname

    ngeoProfile

    Parameters

    • ngeoDebounce: {}

      ngeo Debounce factory.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

querable

  • querable(def: {}): boolean
  • Parameters

    • def: {}

      Overlay definition.

    Returns boolean

    Is the overlay queryable.

queryBboxComponent

  • queryBboxComponent($rootScope: IScope, ngeoMapQuerent: MapQuerent, ngeoQueryKeyboard: QueryKeyboard): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a "bbox query" directive.

    This directive is responsible of binding a map and the ngeo query service together. While active, drawing a bbox while CTRL or the 'meta' key is pressed issues a request to the query service.

    This directive doesn't require to be rendered in a visible DOM element, but it could be used with a ngeo-btn to manage the activation of the directive. See below an example without any use of UI:

    Example:

     <span
       ngeo-bbox-query=""
       ngeo-bbox-query-map="::ctrl.map"
       ngeo-bbox-query-limit="50"
       ngeo-bbox-query-active="ctrl.queryActive">
       ngeo-bbox-query-autoclear="ctrl.queryAutoClear">
     </span>

    See the live example: ../examples/bboxquery.html

    nginject
    ngdoc

    directive

    ngname

    ngeoBboxQuery

    Parameters

    • $rootScope: IScope

      The root scope.

    • ngeoMapQuerent: MapQuerent

      The ngeo map querent service.

    • ngeoQueryKeyboard: QueryKeyboard

      The ngeo query keyboard service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

queryMapComponent

  • queryMapComponent(ngeoMapQuerent: MapQuerent, ngeoQueryKeyboard: QueryKeyboard, $injector: IInjectorService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a "map query" directive.

    This directive is responsible of binding a map and the ngeo query service together. While active, clicks made on the map are listened by the directive and a request gets issued to the query service.

    This directive doesn't require to be rendered in a visible DOM element, but it could be used with a ngeo-btn to manage the activation of the directive. See below an example without any use of UI:

    Example:

     <span
       ngeo-map-query=""
       ngeo-map-query-map="::ctrl.map"
       ngeo-map-query-active="ctrl.queryActive"
       ngeo-map-query-autoclear="ctrl.queryAutoClear">
     </span>

    See our live example: ../examples/mapquery.html

    nginject
    ngdoc

    directive

    ngname

    ngeoMapQuery

    Parameters

    • ngeoMapQuerent: MapQuerent

      The ngeo map querent service.

    • ngeoQueryKeyboard: QueryKeyboard

      The ngeo query keyboard service.

    • $injector: IInjectorService

      Main injector.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The Directive Definition Object.

rasterComponent

  • rasterComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provide a directive that set a value each 500ms with the elevation under the mouse cursor position on the map. The value must come from the elevation service of a c2cgeoportal server. The server's URL must be defined as config value of the application.

    Example:

     <span gmf-elevation
           gmf-elevation-active="elevationActive"
           gmf-elevation-elevation="elevationValue"
           gmf-elevation-layer="mainCtrl.elevationLayer"
           gmf-elevation-layersconfig="::mainCtrl.elevationLayersConfig"
           gmf-elevation-map="::mainCtrl.map">
           {{elevationValue}}
     </span>

    For value in meter elevationLayersConfig can be an empty object, complex example:

     elevationLayersConfig = {
         '<layer>': {
             'filter': 'ngeoUnitPrefix',
             'args': ['m²', 'square'],
             'postfix': '<notice>',
             'separator': ''
         }
     };
    htmlattribute

    {boolean} gmf-elevation-active A boolean to set active or deactivate the component.

    htmlattribute

    {number} gmf-elevation-elevation The value to set with the elevation value.

    htmlattribute

    {string} gmf-elevation-layer Elevation layer to use.

    htmlattribute

    {Object.<string, LayerConfig>} gmf-elevation-layersconfig Elevation layer configurations.

    htmlattribute

    {import("ol/Map.js").default} gmf-elevation-map The map.

    ngdoc

    directive

    ngname

    gmfElevation

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

sortableComponent

  • sortableComponent($timeout: ITimeoutService): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides a directive that allows drag-and-dropping DOM items between them. It also changes the order of elements in the given array.

    It is typically used together with ng-repeat, for example for re-ordering layers in a map.

    Example:

    <ul ngeo-sortable="ctrl.layers"
        ngeo-sortable-options="{handleClassName: 'ngeo-sortable-handle'}">
      <li ng-repeat="layer in ctrl.layers">
        <span class="ngeo-sortable-handle">handle</span>{{layer.get('name')}}
      </li>
    </ul>

    The value of the "ngeo-sortable" attribute is an expression which evaluates to an array (an array of layers in the above example). This is the array that is re-ordered after a drag-and-drop.

    The element with the class "ngeo-sortable-handle" is the "drag handle". It is required.

    This directives uses $watchCollection to watch the "sortable" array. So if some outside code adds/removes elements to/from the "sortable" array, the "ngeoSortable" directive will pick it up.

    See our live example: ../examples/layerorder.html

    htmlattribute

    {Array.<import("ol/layer/Base.js").default>} ngeo-sortable The layers to sort.

    htmlattribute

    {!miscSortableOptions} ngeo-sortable-options The options.

    htmlattribute

    {Function(JQuery, Array)?} ngeo-sortable-callback Callback function called after the move end. The Function will be called with the element and the sort array as arguments.

    htmlattribute

    {Object?} ngeo-sortable-callback-ctx Context to apply at the call of the callback function.

    nginject
    ngdoc

    directive

    ngname

    ngeoSortable

    Parameters

    • $timeout: ITimeoutService

      Angular timeout service.

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    The directive specs.

trustHtmlAutoFilter

  • trustHtmlAutoFilter($sce: ISCEService, ngeoStringToHtmlReplacements: {}[]): {}
  • A filter to mark a value as trusted HTML, with the addition of automatically converting any string that matches the StringToHtmlReplacements list to HTML.

    Usage:

    If you use it, you don't require the "ngSanitize".

    nginject
    ngdoc

    filter

    ngname

    ngeoTrustHtmlAuto

    Parameters

    • $sce: ISCEService

      Angular sce service.

    • ngeoStringToHtmlReplacements: {}[]

    Returns {}

    The filter function.

trustHtmlFilter

  • trustHtmlFilter($sce: ISCEService): {}
  • A filter to mark a value as trusted HTML.

    Usage:

    If you use it, you don't require the "ngSanitize".

    nginject
    ngdoc

    filter

    ngname

    ngeoTrustHtml

    Parameters

    • $sce: ISCEService

      Angular sce service.

    Returns {}

    The filter function.

Object literals

Const authenticationComponent

authenticationComponent: object

An "authentication" component for a GeoMapFish application. With the use of the "authentication" service, it features a complete interface for the user to be able to login, logout, change or reset his or her password. The gmfUser angular value is also used to keep track of the user information. When empty, that means that the user isn't connected yet.

While not logged in, the "login" form is shown, which allows the user to either log in or ask for a password reset.

Once logged in, the "logout" form is shown, which allows the user to either log out or change his or her password.

Example:

 <gmf-authentication
   gmf-authentication-info-message="mainCtrl.loginInfoMessage"
   gmf-authentication-allow-password-change="::true">
 </gmf-authentication>
htmlattribute

{boolean} gmf-authentication-allow-password-reset Whether to show the password forgotten link. Default to true.

htmlattribute

{boolean|function} gmf-authentication-allow-password-change Whether to show the change password button. Default to true. You can also specify a PasswordValidator Object to add constraint on user's new password.

htmlattribute

{PasswordValidator} gmf-authentication-password-validator A PasswordValidator Object to add constraint on user's new password. The gmf-authentication-allow-password-change. To use it you must also allow the user to change its password.

htmlattribute

{boolean} gmf-authentication-force-password-change Force the user to change its password. Default to false. If you set it to true, you should also allow the user to change its password. Don't add this option alone, use it in a dedicated authentication component, in a ngeo-modal, directly in your index.html (see example 2.)

htmlattribute

{string} gmf-authentication-info-message Message to show above the authentication form.

Example 2:

<ngeo-modal
    ngeo-modal-closable="false"
    ng-model="mainCtrl.userMustChangeItsPassword">
  <div class="modal-header ui-draggable-handle">
    <h4 class="modal-title">
      {{'You must change your password' | translate}}
    </h4>
  </div>
  <div class="modal-body">
    <gmf-authentication
      gmf-authentication-force-password-change="::true">
    </gmf-authentication>
  </div>
</ngeo-modal>
ngdoc

component

ngname

gmfAuthentication

controller

controller: string = "GmfAuthenticationController"

templateUrl

templateUrl: gmfAuthenticationTemplateUrl = gmfAuthenticationTemplateUrl

bindings

bindings: object

allowPasswordChange

allowPasswordChange: string = "<?gmfAuthenticationAllowPasswordChange"

allowPasswordReset

allowPasswordReset: string = "<?gmfAuthenticationAllowPasswordReset"

forcePasswordChange

forcePasswordChange: string = "<?gmfAuthenticationForcePasswordChange"

infoMessage

infoMessage: string = "=?gmfAuthenticationInfoMessage"

passwordValidator

passwordValidator: string = "<?gmfAuthenticationPasswordValidator"

Const backgroundlayerselectorComponent

backgroundlayerselectorComponent: object

Provide a "background layer selector" component.

Example:

 <gmf-backgroundlayerselector
   gmf-backgroundlayerselector-map="::ctrl.map"
   gmf-backgroundlayer-opacity-options="::ctrl.bgOpacityOptions"
   gmf-backgroundlayerselector-select="onBackgroundSelected()">
 </gmf-backgroundlayerselector>

Used metadata:

  • thumbnail: The URL used for the icon.

Used functionalities:

  • default_basemap: Base maps to use by default.
htmlattribute

{import("ol/Map.js").default=} gmf-backgroundlayerselector-map The map.

htmlattribute

{string} gmf-backgroundlayer-opacity-options The opacity slider options.

htmlattribute

{Function} gmf-backgroundlayerselector-select Function called when a layer was selected by the user.

ngdoc

component

ngname

gmfBackgroundlayerselector

controller

controller: string = "GmfBackgroundlayerselectorController as ctrl"

templateUrl

templateUrl: gmfBackgroundlayerselectorTemplateUrl = gmfBackgroundlayerselectorTemplateUrl

bindings

bindings: object

map

map: string = "=gmfBackgroundlayerselectorMap"

opacityOptions

opacityOptions: string = "=gmfBackgroundlayerOpacityOptions"

select

select: string = "&?gmfBackgroundlayerselectorSelect"

Const disclaimerComponent

disclaimerComponent: object

Provide a "disclaimer" component for GeoMapFish that is bound to the layers added and removed from a map.

Example:

 <gmf-disclaimer
   gmf-disclaimer-map="::ctrl.map">
 </gmf-disclaimer>

You can also display the disclaimer messages in popups or use them in another context. The example below show you how to display the disclaimer messages in a ngeo-modal window (external case).

Example:

 <gmf-disclaimer
   gmf-disclaimer-map="::ctrl.map"
   gmf-disclaimer-external="::true"
   gmf-disclaimer-external-msg="disclaimerMsg"
   gmf-disclaimer-external-visibility="disclaimerVisibility">
 </gmf-disclaimer>
 <ngeo-modal ng-model="disclaimerVisibility">
  <div class="modal-header ui-draggable-handle">
    <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
  </div>
  <div class="modal-body">
    <div ng-bind-html="disclaimerMsg"></div>
  </div>
</ngeo-modal>
htmlattribute

{boolean?} gmf-disclaimer-layer-visibility Only display the disclaimer if the layer is visible. Defaults to true.

htmlattribute

{boolean} gmf-disclaimer-popup Whether to show the disclaimer messages in popups or not. Defaults to false.

htmlattribute

{boolean?} gmf-disclaimer-external Whether to use disclaimer messages elsewhere or not. Default to false. If true, you should use the gmf-disclaimer-external-msg and the gmf-disclaimer-external-visibility too.

htmlattribute

{boolean?} gmf-disclaimer-external-visibility variable that will be set to true if the disclaimers contain a new message. To uses it, you must set the gmf-disclaimer-external to true.

htmlattribute

{string?} gmf-disclaimer-external-msg variable that will contains the disclaimer messages. To uses it, you must set the gmf-disclaimer-external to true.

htmlattribute

{import("ol/Map.js").default=} gmf-disclaimer-map The map.

ngdoc

component

ngname

gmfDisclaimer

controller

controller: DisclaimerController = DisclaimerController

bindings

bindings: object

external

external: string = "<?gmfDisclaimerExternal"

layerVisibility

layerVisibility: string = "<?gmfDisclaimerLayerVisibility"

map

map: string = "=gmfDisclaimerMap"

msg

msg: string = "=?gmfDisclaimerExternalMsg"

popup

popup: string = "<?gmfDisclaimerPopup"

visibility

visibility: string = "=?gmfDisclaimerExternalVisibility"

Const editingAttributeComponent

editingAttributeComponent: object

Component used to render the attributes of a feature into a form. Example:

<ngeo-attributes
  ngeo-attributes-attributes="::ctrl.attributes"
  ngeo-attributes-disabled="ctrl.attributesDisabled"
  ngeo-attributes-feature="::ctrl.feature">
</ngeo-attributes>
htmlattribute

{Array.<import('ngeo/format/Attribute.js').Attribute>} ngeo-attributes-attributes The list of attributes to use.

htmlattribute

{boolean} ngeo-attributes-disabled Whether the fieldset should be disabled or not.

htmlattribute

{import("ol/Feature.js").default} ngeo-attributes-feature The feature.

ngdoc

component

ngname

ngeoAttributes

controller

controller: string = "ngeoAttributesController as attrCtrl"

templateUrl

templateUrl: ngeoAttributesTemplateUrl = ngeoAttributesTemplateUrl

bindings

bindings: object

attributes

attributes: string = "=ngeoAttributesAttributes"

disabled

disabled: string = "<ngeoAttributesDisabled"

feature

feature: string = "=ngeoAttributesFeature"

require

require: object

form

form: string = "^"

Const floorSelectorComponent

floorSelectorComponent: object

Provide a floor selector component. Note that it is not limited to floors, but allows selecting a dimension value from any list of values with labels.

Example:

 <gmf-floorselector class="gmf-floorselector ol-unselectable ol-control"
   value="mainCtrl.dimensions.FLOOR">
 </gmf-floorselector>

With the injected value gmfFloors with:

 [
   {value: 'value1', label: 'label1'},
   {value: 'value2', label: 'label2'},
   ...
 ];
htmlattribute

{string} value Current floor value.

ngdoc

component

ngname

gmfFloorselector

controller

controller: Controller = Controller

templateUrl

templateUrl: gmfFloorselectorTemplateUrl = gmfFloorselectorTemplateUrl

bindings

bindings: object

value

value: string = "="

Const gridComponent

gridComponent: object

A grid component for displaying tabular data. The columns of the grid are sortable, rows can be selected with a single click (also in combination with SHIFT and CTRL/Meta).

Example:

<ngeo-grid
  ngeo-grid-configuration="::ctrl.gridConfiguration"
</ngeo-grid>
htmlattribute

{import("ngeo/grid/Config.js").default} ngeo-grid-configuration The configuration to use.

ngdoc

component

ngname

ngeoGrid

controller

controller: Controller = Controller

templateUrl

templateUrl: ngeoGridTemplateUrl = ngeoGridTemplateUrl

bindings

bindings: object

configuration

configuration: string = "=ngeoGridConfiguration"

Const layertreeComponent

layertreeComponent: object

This component creates a layertree based on the c2cgeoportal JSON themes source and a {@link import("ngeo/layertreeComponent.js").default}. The controller used by this component defines some functions for each node that are created by a default template. This default template can be overridden by setting the value 'gmf.layertreeTemplateUrl' but you will have to adapt the ngeoLayertreeTemplateUrl value too (to define the children's nodes template path).

Example:

 <gmf-layertree
   gmf-layertree-dimensions="ctrl.dimensions"
   gmf-layertree-map="ctrl.map">
 </gmf-layertree>

You can add an attribute 'gmf-layertree-openlinksinnewwindow="::true"' to open metadata URLs in a new window. By default, and in the default template, links will be opened in a popup (The window.openIframePopup function must be available !)

Used metadata:

  • isChecked: if 'false' the layer visibility will be set to false.
  • iconUrl: layer icon full URL.
  • legendRule: WMS rule used to get a layer icon.
  • `isLegendExpanded: if 'true' the legend is expanded by default.
  • metadataUrl: Display a popup with the content of the given URL if possible also open a new window.
  • exclusiveGroup: Whether the group contains children that have to be mutually exclusive, meaning that only one child may be ON at any time.
  • legend: Display the legend of this layer. For WMS and WMTS layers.
  • legendImage: The URL to the image used as a legend in the layer tree. For WMS and WMTS layers.
  • maxResolution: The max resolution where the layer is visible. For WMS layers. On WMTS layers it will have an effect on the node in the layertree but not on the layertree directly.
  • minResolution: The min resolution where the layer is visible. For WMS layers. On WMTS layers it will have an effect on the node in the layertree but not on the layer directly.
  • ogcServer: The corresponding OGC server for a WMTS layer. For WMTS layers.
  • opacity: Layer opacity. 1.0 means fully visible, 0 means invisible, For WMS and WMTS layers.
  • timeAttribute: The name of the time attribute. For WMS(-T) layers.
  • wmsLayers: A corresponding WMS layer for WMTS layers. Used to query the WMTS layers and to print them. (See also printLayers and queryLayers metadata for more granularity). For WMTS Layers.
  • printLayers: A WMS layer that will be used instead of the WMTS layers in the print.
  • queryLayers: The WMS layers used as references to query the WMTS layers. For WMTS layers.
  • isExpanded: Whether the layer group is expanded by default. For layer groups (only).
htmlattribute

{import("ol/Map.js").default} gmf-layertree-map The map.

htmlattribute

{Object<string, string>|undefined} gmf-layertree-dimensions Global dimensions object.

htmlattribute

{boolean|undefined} gmf-layertree-openlinksinnewwindow if true, open metadataURLs in a new window. Otherwise open them in a popup.

ngdoc

component

ngname

gmfLayertreeComponent

controller

controller: string = "GmfLayertreeController as gmfLayertreeCtrl"

template

template: gmfLayertreeTemplate = gmfLayertreeTemplate

bindings

bindings: object

dimensions

dimensions: string = "=?gmfLayertreeDimensions"

isExpanded

isExpanded: string = "<?gmfLayertreeIsexpanded"

map

map: string = "=gmfLayertreeMap"

openLinksInNewWindow

openLinksInNewWindow: string = "<?gmfLayertreeOpenlinksinnewwindow"

Const lidarprofileComponent

lidarprofileComponent: object

Provide a component that display a lidar profile panel. You can have only one lidarprofile in your page.

Example:

 <gmf-lidarprofile
   gmf-lidarprofile-active="ctrl.profileActive"
   gmf-lidarprofile-line="ctrl.profileLine">
 </gmf-lidarprofile>
ngdoc

component

ngname

gmfLidarprofile

controller

controller: string = "GmfLidarprofileController"

templateUrl

templateUrl: gmfLidarprofileTemplateUrl = gmfLidarprofileTemplateUrl

bindings

bindings: object

active

active: string = "=gmfLidarprofileActive"

line

line: string = "=gmfLidarprofileLine"

Const lidarprofilePanelComponent

lidarprofilePanelComponent: object

Provide a component that display a lidar profile panel. You can have only one lidarprofile in your page.

Example:

 <gmf-lidarprofile-panel
   gmf-lidarprofile-panel-active="ctrl.profileActive"
   gmf-lidarprofile-panel-map="::ctrl.map"
   gmf-lidarprofile-panel-line="ctrl.profileLine">
 </gmf-lidarprofile-panel>

You must also have a pytreeLidarprofileJsonUrl constant defined like: module.constant('pytreeLidarprofileJsonUrl', 'https://sample.com/pytree/');

ngdoc

component

ngname

gmfLidarprofilePanel

controller

controller: string = "gmfLidarprofilePanelController"

templateUrl

templateUrl: gmfLidarprofilePanelTemplateUrl = gmfLidarprofilePanelTemplateUrl

bindings

bindings: object

active

active: string = "=gmfLidarprofilePanelActive"

line

line: string = "=gmfLidarprofilePanelLine"

map

map: string = "<gmfLidarprofilePanelMap"

Const mapMousepositionComponent

mapMousepositionComponent: object

Provide a component to display the mouse position coordinates depending on the chosen projection. The component also provides a projection picker to choose how the coordinates are displayed. service.

Example:

htmlattribute

{import("ol/Map.js").default} gmf-mouseposition-map The map.

htmlattribute

{Array.} gmf-mouseposition-projection The list of the projections.

ngdoc

component

ngname

gmfMouseposition

controller

controller: string = "gmfMousepositionController as ctrl"

templateUrl

templateUrl: gmfMapMousepositionTemplateUrl = gmfMapMousepositionTemplateUrl

bindings

bindings: object

map

map: string = "<gmfMousepositionMap"

projections

projections: string = "<gmfMousepositionProjections"

Const messageModalComponent

messageModalComponent: object

Provides the "ngeoModal" component.

This component shows a Bootstrap modal when the ngModel expression evaluates to true, and it hides it when the ngModel expression evaluates to false.

The components also changes the ngModel value when the user manually closes the modal.

This component is based on Bootstrap's modal classes and associated jQuery plugin.

<ngeo-modal ng-model="modalShown">
  <div class="modal-header ui-draggable-handle">
    <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
    <h4 class="modal-title">The Title</h4>
  </div>
  <div class="modal-body">Some content</div>
</ngeo-modal>

Note: for z-indexing purpose, the modal DOM element is automatically moved to document body element.

See our live example: ../examples/modal.html

htmlattribute

{string} ngeo-draggable-handle The jquery selector that define the element that can starts the dragging sequence. Defaults to .ui-draggable-handle.

htmlattribute

{boolean} ngeo-modal-resizable Whether the modal can be resized or not. Defaults to false.

htmlattribute

{boolean} ngeo-modal-closable Whether the modal can be closed by clicking outside it or by hiting the escape keyboard key. Defaults to true.

ngdoc

component

ngname

ngeoModal

controller

controller: string = "ngeoModalController"

template

template: string = `<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content"><ng-transclude></ng-transclude></div></div></div>`

transclude

transclude: true = true

bindings

bindings: object

closable

closable: string = "<ngeoModalClosable"

draggableHandle

draggableHandle: string = "=?ngeodraggableHandle"

resizable

resizable: string = "<ngeoModalResizable"

require

require: object

ngModel

ngModel: string = "ngModel"

Const ngeoMessageDisplaywindowComponent

ngeoMessageDisplaywindowComponent: object

The ngeo-displaywindow component is an alternative to the ngeo.message.Popup. What they have in common:

  • support title
  • support url to be shown in an iframe
  • support plain HTML content
  • support sizing, i.e. height and width.
  • support being opened/closed

The differences with the ngeo.message.Popup are:

  • it supports being dragged
  • it supports being resized
  • support angularjs template content

Example:

htmlattribute

{boolean=} ngeo-displaywindow-clear-on-close Whether to clear the content on close or not.

htmlattribute

{string=} ngeo-displaywindow-content The html content. If not provided, you must provide an url.

htmlattribute

{string=} ngeo-displaywindow-content-template AngularJS template. It gets compiled during runtime with the supplied scope (ngeo-displaywindow-content-scope).

htmlattribute

{angular.IScope=} ngeo-displaywindow-content-scope Scope used for ngeo-displaywindow-content-template.

htmlattribute

{boolean=} ngeo-displaywindow-desktop If true, the window is draggable and resizable. If not set, you must set manually both parameter.

htmlattribute

{boolean=} ngeo-displaywindow-draggable Whether the window is draggable or not.

htmlattribute

{string=} ngeo-displaywindow-draggable-containment The zone (CSS selector) where the window is authorized to be dragged.

htmlattribute

{string=} ngeo-displaywindow-height The default height of the window.

htmlattribute

{boolean=} ngeo-displaywindow-open Whether the window is open or not.

htmlattribute

{string=} ngeo-displaywindow-title The html title of the window.

htmlattribute

{string=} ngeo-displaywindow-url The URL to open in an iframe, in the window. The content attribute must not be provided.

htmlattribute

{string=} ngeo-displaywindow-width The default width of the window.

ngdoc

component

ngname

ngeoDisplaywindow

controller

controller: Controller = Controller

templateUrl

templateUrl: ngeoMessageDisplaywindowTemplateUrl = ngeoMessageDisplaywindowTemplateUrl

bindings

bindings: object

clearOnClose

clearOnClose: string = "<?"

content

content: string = "=?"

contentScope

contentScope: string = "<?"

contentTemplate

contentTemplate: string = "=?"

desktop

desktop: string = "<?"

draggable

draggable: string = "<?"

draggableContainment

draggableContainment: string = "<?"

height

height: string = "=?"

open

open: string = "=?"

resizable

resizable: string = "<?"

title

title: string = "=?"

url

url: string = "=?"

width

width: string = "=?"

Const objecteditingComponent

objecteditingComponent: object

Component used to edit the geometry of a single feature using advanced tools. The geometry must be Multi.

Example:

<gmf-objectediting
    gmf-objectediting-active="ctrl.objectEditingActive"
    gmf-objectediting-feature="ctrl.objectEditingFeature"
    gmf-objectediting-geomtype="ctrl.objectEditingGeomType"
    gmf-objectediting-layernodeid="ctrl.objectEditingLayerNodeId"
    gmf-objectediting-map="::ctrl.map"
    gmf-objectediting-sketchfeatures="::ctrl.sketchFeatures">
</gmf-objectediting>
htmlattribute

{boolean} gmf-objectediting-active Whether the component is active or not.

htmlattribute

{import("ol/Feature.js").default} gmf-objectediting-feature The feature to edit.

htmlattribute

{string} gmf-objectediting-geomtype The geometry type.

htmlattribute

{number} gmf-objectediting-layernodeid The GMF layer node id.

htmlattribute

{import("ol/Map.js").default} gmf-objectediting-map The map.

htmlattribute

{import("ol/Collection.js").default.<import("ol/Feature.js").default>} gmf-objectediting-sketchfeatures Collection of temporary features being drawn by the tools.

ngdoc

component

ngname

gmfObjectediting

controller

controller: string = "GmfObjecteditingController as oeCtrl"

templateUrl

templateUrl: gmfObjecteditingTemplateUrl = gmfObjecteditingTemplateUrl

bindings

bindings: object

active

active: string = "=gmfObjecteditingActive"

feature

feature: string = "<gmfObjecteditingFeature"

geomType

geomType: string = "<gmfObjecteditingGeomtype"

layerNodeId

layerNodeId: string = "<gmfObjecteditingLayernodeid"

map

map: string = "<gmfObjecteditingMap"

sketchFeatures

sketchFeatures: string = "<gmfObjecteditingSketchfeatures"

Const olscControls3dComponent

olscControls3dComponent: object

Provides the "ngeoOlcsControls3d" component, a widget for controlling the 3D camera.

Example:

<ngeo-olcs-controls3d ng-if="$ctrl.manager && $ctrl.manager.is3dEnabled()">
</ngeo-olcs-controls3d>

By default the directive uses "controls3d.html" as its templateUrl. This can be changed by redefining the "ngeoOlcsControls3dTemplateUrl" value.

See our live example: ../examples/simple3d.html

htmlattribute

{olcs.contrib.Manager} ngeo-olcs-manager The OL-Cesium manager.

ngdoc

component

ngname

ngeoOlcsControls3d

controller

controller: Controller = Controller

templateUrl

templateUrl: ngeoOlcsControls3dTemplateUrlInjectable = ngeoOlcsControls3dTemplateUrlInjectable

bindings

bindings: object

maxTilt

maxTilt: string = "<?"

minTilt

minTilt: string = "<?"

ol3dm

ol3dm: string = "<?"

Const permalinkShareComponent

permalinkShareComponent: object

Component to display a shortened permalink and share it by email Example:

 <gmf-share
   gmf-share-email="true">
 </gmf-share>
htmlattribute

{boolean} gmf-share-email Enable emailing capability.

controller

controller: string = "GmfShareController"

templateUrl

templateUrl: gmfPermalinkShareTemplateUrl = gmfPermalinkShareTemplateUrl

bindings

bindings: object

enableEmail

enableEmail: string = "<gmfShareEmail"

Const printComponent

printComponent: object

Provide a component that display a print panel. This panel is populated with a form corresponding to the capabilities delivered by a GMF print v3 server. If you want to use another template for your print panel, you can see the available layout information in the 'PrintLayoutInfo' classes.

Simple example:

 <gmf-print
   gmf-print-map="::mainCtrl.map"
   gmf-print-active="printActive"
   gmf-print-rotatemask="::true">
 </gmf-print>

Example with user defined attribute:

 <gmf-print
   gmf-print-map="::mainCtrl.map"
   gmf-print-active="printActive"
   gmf-print-rotatemask="::true"
   gmf-print-hiddenattributes="::['name']"
   gmf-print-attributes-out="::attributes">
   <div ng-repeat="attribute in ::attributes">
     <div ng-if="attribute.name == 'name'">
       <input ng-model="attribute.value" placeholder="name" />
     </div>
   </div>
 </gmf-print>

Note: The 'print' and 'cancel' functions can also be called via globals events 'gmfStartPrint' and 'gmfCancelPrint'.

Used metadata:

  • hiDPILegendImages: The URLs to the hi DPI images used as a legend in the layer tree. For WMS and WMTS layers.
  • printNativeAngle: Whether the print should rotate the symbols. For layer groups (only).
htmlattribute

{import("ol/Map.js").default} gmf-print-map The map.

htmlattribute

{boolean} gmf-print-active A boolean that informs if the panel is open or not.

htmlattribute

{boolean} gmf-print-rotatemask Optional. True to apply rotation on the mask instead of the map. By default, the map rotates.

htmlattribute

{Object.<string, string|number|boolean>} gmf-print-fieldvalues optional. Key, value object to define default value in each of your print panel field. The key refers to the property's name of the field. Example: {'comments': 'demo', 'legend': false}. Doesn't work for the dpi and the scale. Server's values are used in priority.

htmlattribute

{Array.} gmf-print-hiddenattributes The list of attributes that should be hidden.

ngdoc

component

ngname

gmfPrint

controller

controller: string = "GmfPrintController"

templateUrl

templateUrl: gmfPrintTemplateUrl = gmfPrintTemplateUrl

transclude

transclude: boolean = true

bindings

bindings: object

active

active: string = "=gmfPrintActive"

attributesOut

attributesOut: string = "=?gmfPrintAttributesOut"

fieldValues

fieldValues: string = "<?gmfPrintFieldvalues"

hiddenAttributeNames

hiddenAttributeNames: string = "<?gmfPrintHiddenattributes"

map

map: string = "<gmfPrintMap"

rotateMask

rotateMask: string = "<?gmfPrintRotatemask"

Const profileComponent

profileComponent: object

Provide a component that display a profile panel. This profile use the given LineString geometry to request the c2cgeoportal profile.json service. The raster used in the request are the keys of the 'linesconfiguration' object. The 'map' attribute is optional and are only used to display on the map the information that concern the hovered point (in the profile and on the map) of the line. This profile relies on the ngeo.profile (d3) and ngeo.ProfileComponent.

Example:

 <gmf-profile
   gmf-profile-active="ctrl.profileActive"
   gmf-profile-line="ctrl.profileLine"
   gmf-profile-map="::ctrl.map"
   gmf-profile-linesconfiguration="::ctrl.profileLinesconfiguration">
 </gmf-profile>
htmlattribute

{boolean} gmf-profile-active Active the component.

htmlattribute

{import("ol/geom/LineString.js").default} gmf-profile-line The linestring geometry to use to draw the profile.

htmlattribute

{import("ol/Map.js").default?} gmf-profile-map An optional map.

htmlattribute

{Object.<string, ProfileLineConfiguration>} gmf-profile-linesconfiguration The configuration of the lines. Each keys will be used to request elevation layers.

htmlattribute

{import("ol/style/Style.js").default?} gmf-profile-hoverpointstyle Optional style for the 'on Hover' point on the line.

htmlattribute

{number?} gmf-profile-numberofpoints Optional maximum limit of points to request. Default to 100.

htmlattribute

{Object.<string, *>?} gmf-profile-options Optional options object like {@link import('ngeo/profile/elevationComponent.js').ProfileOptions} but without any mandatory value. Will be passed to the ngeo profile component. Providing 'linesConfiguration', 'distanceExtractor', hoverCallback, outCallback or i18n will override native gmf profile values.

ngdoc

component

ngname

gmfProfile

controller

controller: string = "GmfProfileController as ctrl"

templateUrl

templateUrl: gmfProfileTemplateUrl = gmfProfileTemplateUrl

bindings

bindings: object

active

active: string = "=gmfProfileActive"

getHoverPointStyleFn

getHoverPointStyleFn: string = "&?gmfProfileHoverpointstyle"

getLinesConfigurationFn

getLinesConfigurationFn: string = "&gmfProfileLinesconfiguration"

getMapFn

getMapFn: string = "&?gmfProfileMap"

getNbPointsFn

getNbPointsFn: string = "&?gmfProfileNumberofpoints"

getOptionsFn

getOptionsFn: string = "&?gmfProfileOptions"

line

line: string = "=gmfProfileLine"

Const queryGridComponent

queryGridComponent: object

Provides a component to display results of the {@link import("ngeo/queryResult.js").default} in a grid and shows related features on the map using the {@link import("ngeo/map/FeatureOverlayMgr.js").FeatureOverlayMgr}.

You can override the default component's template by setting the value gmfDisplayquerygridTemplateUrl.

Features displayed on the map use a default style but you can override these styles by passing ol.style.Style objects as attributes of this component.

Note: the following ng-class need to be present in the interface element to display the footer when the grid is active (initially there should be the code for the profile tool):

Example:

 <gmf-displayquerygrid
   gmf-displayquerygrid-map="ctrl.map"
   gmf-displayquerygrid-featuresstyle="ctrl.styleForAllFeatures"
   gmf-displayquerygrid-selectedfeaturestyle="ctrl.styleForTheCurrentFeature">
 </gmf-displayquerygrid>
htmlattribute

{boolean} gmf-displayquerygrid-active The active state of the component.

htmlattribute

{import("ol/style/Style.js").default} gmf-displayquerygrid-featuresstyle A style object for all features from the result of the query.

htmlattribute

{import("ol/style/Style.js").default} gmf-displayquerygrid-selectedfeaturestyle A style object for the currently selected features.

htmlattribute

{import("ol/Map.js").default} gmf-displayquerygrid-map The map.

htmlattribute

{boolean?} gmf-displayquerygrid-removeemptycolumns Optional. Should empty columns be hidden? Default: false.

htmlattribute

{number?} gmf-displayquerygrid-maxrecenterzoom Optional. Maximum zoom-level to use when zooming to selected features.

htmlattribute

{GridMergeTabs?} gmf-displayquerygrid-gridmergetabs Optional. Configuration to merge grids with the same attributes into a single grid.

ngdoc

component

ngname

gmfDisplayquerygrid

controller

controller: string = "GmfDisplayquerygridController as ctrl"

templateUrl

templateUrl: gmfDisplayquerygridTemplateUrl = gmfDisplayquerygridTemplateUrl

bindings

bindings: object

active

active: string = "=?gmfDisplayquerygridActive"

featuresStyleFn

featuresStyleFn: string = "&gmfDisplayquerygridFeaturesstyle"

getMapFn

getMapFn: string = "&gmfDisplayquerygridMap"

maxRecenterZoomFn

maxRecenterZoomFn: string = "&?gmfDisplayquerygridMaxrecenterzoom"

maxResultsFn

maxResultsFn: string = "&?gmfDisplayquerygridMaxresults"

mergeTabs

mergeTabs: string = "<?gmfDisplayquerygridMergetabs"

removeEmptyColumnsFn

removeEmptyColumnsFn: string = "&?gmfDisplayquerygridRemoveemptycolumns"

selectedFeatureStyleFn

selectedFeatureStyleFn: string = "&gmfDisplayquerygridSelectedfeaturestyle"

Const queryWindowComponent

queryWindowComponent: object

Provide a component to display results of the {@link import("ngeo/queryResult.js").default} and shows related features on the map using the {@link import("ngeo/map/FeatureOverlayMgr.js").FeatureOverlayMgr}.

You can override the default component's template by setting the value gmfDisplayquerywindowTemplateUrl.

Features displayed on the map use a default style but you can override these styles by passing ol.style.Style objects as attributes of this component.

Example:

 <gmf-displayquerywindow
   gmf-displayquerywindow-featuresstyle="ctrl.styleForAllFeatures"
   gmf-displayquerywindow-selectedfeaturestyle="ctrl.styleForTheCurrentFeature">
 </gmf-displayquerywindow>
htmlattribute

{import("ol/style/Style.js").default} gmf-displayquerywindow-featuresstyle A style object for all features from the result of the query.

htmlattribute

{import("ol/style/Style.js").default} selectedfeaturestyle A style object for the current displayed feature.

htmlattribute

{boolean=} defaultcollapsed If the query result window is collapsed.

htmlattribute

{boolean} desktop If the component is used in the desktop application.

htmlattribute

{boolean} showunqueriedlayers If also layers, that have not been queried for the last query, should be shown in the filter.

ngdoc

component

ngname

gmfDisplayquerywindow

controller

controller: string = "GmfDisplayquerywindowController as ctrl"

templateUrl

templateUrl: gmfDisplayquerywindowTemplateUrl = gmfDisplayquerywindowTemplateUrl

bindings

bindings: object

defaultCollapsedFn

defaultCollapsedFn: string = "&?gmfDisplayquerywindowDefaultcollapsed"

desktop

desktop: string = "=gmfDisplayquerywindowDesktop"

draggableContainment

draggableContainment: string = "<?gmfDisplayquerywindowDraggableContainment"

featuresStyleFn

featuresStyleFn: string = "&gmfDisplayquerywindowFeaturesstyle"

selectedFeatureStyleFn

selectedFeatureStyleFn: string = "&gmfDisplayquerywindowSelectedfeaturestyle"

showUnqueriedLayers

showUnqueriedLayers: string = "=gmfDisplayquerywindowShowunqueriedlayers"

Const rasterWidgetComponent

rasterWidgetComponent: object

Provides a component which encapsulates the elevation component (see above) in a button with dropdown menu to be included in a application directly.

Example:

htmlattribute

{import("ol/Map.js").default} gmf-elevationwidget-map The map.

htmlattribute

{Array.} gmf-elevationwidget-layers The list of layers.

htmlattribute

{boolean} gmf-elevationwidget-active Whether to activate the elevation component.

ngdoc

component

ngname

gmfElevationwidget

controller

controller: string = "gmfElevationwidgetController as ctrl"

templateUrl

templateUrl: gmfElevationwidgetTemplateUrl = gmfElevationwidgetTemplateUrl

bindings

bindings: object

active

active: string = "<gmfElevationwidgetActive"

layers

layers: string = "<gmfElevationwidgetLayers"

layersconfig

layersconfig: string = "=gmfElevationwidgetLayersconfig"

map

map: string = "<gmfElevationwidgetMap"

Const routingFeatureComponent

routingFeatureComponent: object

Provides a text input and draw interaction to allow a user to create and modify a ol.Feature (point geometry).

The text input is provided by {@link import("ngeo/nominatimInputComponent.js").default} and includes Nominatim search.

Example:

<ngeo-routing-feature
    ngeo-routing-feature-map="ctrl.map"
    ngeo-routing-feature-feature="ctrl.feature"
    ngeo-routing-feature-fill-color="#6BE62E"
    ngeo-routing-feature-stroke-color="#4CB01E"
    ngeo-routing-feature-on-change="ctrl.handleChange">

Is used in in the partial of {@link import("ngeo/routingComponent.js").default}.

See the ../examples/routing.html example for a usage sample.

htmlattribute

{import("ol/Map.js").default} ngeo-routing-feature-map The map.

htmlattribute

{import("ol/Feature.js").default} ngeo-routing-feature-feature The feature.

htmlattribute

{string} ngeo-routing-feature-fill-color The marker fill color.

htmlattribute

{string} ngeo-routing-feature-stroke-color The marker stroke color.

htmlattribute

{function(import("ol/Feature.js").default)} ngeo-routing-feature-on-change Event fired when feature changes.

ngdoc

directive

ngname

ngeoRoutingFeature

controller

controller: Controller = Controller

templateUrl

templateUrl: ngeoRoutingFeatureTemplateUrl = ngeoRoutingFeatureTemplateUrl

bindings

bindings: object

feature

feature: string = "=ngeoRoutingFeatureFeature"

fillColor

fillColor: string = "<?ngeoRoutingFeatureFillColor"

map

map: string = "<ngeoRoutingFeatureMap"

onChange

onChange: string = "=?ngeoRoutingFeatureOnChange"

strokeColor

strokeColor: string = "<?ngeoRoutingFeatureStrokeColor"

Const routingNominatimInputComponent

routingNominatimInputComponent: object

Input form field which provides Nominatim typeahead lookup using {@link import("ngeo/routing/NominatimService.js").default}.

Example:

<ngeo-nominatim-input
    ngeo-nominatim-input-value="ctrl.label"
    ngeo-nominatim-input-placeholder="type to search"
    ngeo-nominatim-input-on-select="ctrl.onSelect">

Is used in in the partial of {@link import("ngeo/routingFeatureComponent.js").default}.

See the ../examples/routing.html example to see it in action.

htmlattribute

{function(import('ngeo/routing/NominatimService').NominatimSearchResult)} ngeo-nominatim-input-on-select Event fired when user selects a new suggestion.

htmlattribute

{string} ngeo-nominatim-input-value Value of input field, will be set to the label of the search result.

htmlattribute

{string} ngeo-nominatim-input-placeholder Placeholder text, when field is empty.

ngdoc

directive

ngname

ngeoNominatimInput

controller

controller: Controller = Controller

templateUrl

templateUrl: ngeoRoutingNominatimInputComponentTemplateUrl = ngeoRoutingNominatimInputComponentTemplateUrl

bindings

bindings: object

inputValue

inputValue: string = "=?ngeoNominatimInputValue"

onSelect

onSelect: string = "=?ngeoNominatimInputOnSelect"

placeholder

placeholder: string = "@?ngeoNominatimInputPlaceholder"

Const searchComponent

  • searchComponent(): IDirective<IScope, JQLite, IAttributes, IController>
  • Provides the "ngeoSearch" directive, which uses Twitter's typeahead component to change an input text into a search field.

    Example:

     <input type="text"
       ngeo-search="ctrl.typeaheadOptions"
       ngeo-search-datasets="ctrl.typeaheadDatasets"
       ngeo-search-listeners="crtl.typeaheadListeners">

    See our live example: ../examples/search.html

    htmlattribute

    {Twitter.Typeahead.Options} ngeo-search The options.

    htmlattribute

    {Array.<Twitter.Typeahead.Dataset>} ngeo-search-datasets The sources datasets.

    htmlattribute

    {SearchDirectiveListeners} ngeo-search-listeners The listeners.

    nginject
    ngdoc

    directive

    ngname

    ngeoSearch

    Returns IDirective<IScope, JQLite, IAttributes, IController>

    Directive Definition Object.

controller

controller: string = "gmfSearchController"

templateUrl

templateUrl: gmfSearchTemplateUrl = gmfSearchTemplateUrl

bindings

bindings: object

additionalListeners

additionalListeners: string = "<gmfSearchListeners"

clearButton

clearButton: string = "=?gmfSearchClearbutton"

colorChooser

colorChooser: string = "<?gmfSearchColorchooser"

coordinatesProjections

coordinatesProjections: string = "<?gmfSearchCoordinatesprojections"

datasources

datasources: string = "<gmfSearchDatasources"

delay

delay: string = "<?gmfSearchDelay"

featuresStyles

featuresStyles: string = "<?gmfSearchStyles"

inputValue

inputValue: string = "=?gmfSearchInputValue"

map

map: string = "<gmfSearchMap"

maxZoom

maxZoom: string = "<?gmfSearchMaxzoom"

onInitCallback

onInitCallback: string = "<?gmfSearchOnInit"

placeholder

placeholder: string = "@?gmfSearchPlaceholder"

searchActionCallback

searchActionCallback: string = "&?gmfSearchAction"

typeaheadOptions

typeaheadOptions: string = "<?gmfSearchOptions"

Const themeSelectorComponent

themeSelectorComponent: object

Note that this component works with the {@link import("gmf/layertree/TreeManager.js").LayertreeTreeManager}. Setting the theme will update the "tree" object of this {@link import("gmf/layertree/TreeManager.js").LayertreeTreeManager}.

Example:

 <a href class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown">
     <span class="fa fa-grid"></span>
     <span ng-if="mainCtrl.gmfThemeManager.modeFlush">
       <span translate>Theme:</span>
       <b ng-if="!mainCtrl.gmfThemeManager.getThemeName()" translate>Loading...</b>
       <b ng-if="mainCtrl.gmfThemeManager.getThemeName()">
         {{mainCtrl.gmfThemeManager.getThemeName()|translate}}
       </b>
     </span>
     <span ng-if="!mainCtrl.gmfThemeManager.modeFlush">
       <b ng-if="!mainCtrl.gmfThemeManager.themeName" translate>Themes</b>
     </span>
 </a>
 <gmf-themeselector class="dropdown-menu"

gmf-themeselector-currenttheme="mainCtrl.theme" gmf-themeselector-filter="::mainCtrl.filter">

The theme selector can operate in a 'flush' (as above) or 'add' mode. For more information about these modes, refer to the documentation of {@link import("gmf/layertree/TreeManager.js").LayertreeTreeManager}.

To use the 'add' mode just add the constants:

gmfTreeManagerModeFlush: false

htmlattribute

{Function} gmf-themeselector-filter The themes filter.

controller

controller: string = "gmfThemeselectorController"

templateUrl

templateUrl: gmfThemeSelectorTemplateUrl = gmfThemeSelectorTemplateUrl

bindings

bindings: object

filter

filter: string = "<gmfThemeselectorFilter"

Generated using TypeDoc