Click tolerance in pixel
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.A part of the application config.
The map.
Scope.
Main injector.
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] -->A function to format numbers into a DMS coordinates string.
Used metadata:
disclaimer: The disclaimer text for this element.
For WMS and WMTS layers, layer groups and themes.Element.
Angular sce service.
Angular timeout service.
Gettext catalog.
Ngeo Disclaimer service.
Ngeo Event Helper.
Ngeo Layer Helper.
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
Gettext catalog.
Function used to format a time duration in seconds into a string.
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
The Directive Definition Object.
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 -->Angular filter
A function to format numbers into coordinates string.
A filter used to format a number with a precision, using the locale.
Arguments:
Examples:
{{0.1234 | ngeoNumber}} => 0.123
{{1.234 | ngeoNumber}} => 1.23
{{12.34 | ngeoNumber}} => 12.3
{{123.4 | ngeoNumber}} => 123
{{1234 | ngeoNumber}} => 1230Angular locale
Function used to format number into a string.
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:
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_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: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
initialization. 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:
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 prefixwfs_[]wfs_[] parameters set, with a
and b being the variable suffixdim_[] (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.The Angular $q service.
Angular timeout service.
Angular rootScope.
Main injector.
ngeo Debounce factory.
Gettext service.
Ngeo event helper service
The ngeo statemanager service.
ngeo location service.
Format a number as a localized scale. For instance:
Example:
<p>{{25000 | ngeoScalify}}</p>Angular filter
A function to format number into a 'scale' string.
A filter used to format a number with the prefix and unit
Arguments:
Examples:
{{25000 | ngeoUnitPrefix}} => 25 k
{{25000 | ngeoUnitPrefix:'m'}} => 25 km
{{25000000 | ngeoUnitPrefix:'m²':'square'}} => 25 km²
{{2048 | ngeoUnitPrefix:'o':'binary'}} => 2 KioAngular filter
Function used to format number into a string.
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:
Parameters:
wfs_layer tells what layer will be queriedwfs_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.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:
wfs_ngroups parameter telling how many groups are definedwfs_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.
Angular $http service.
Url to the WFS server
The ngeo query result service.
The options to configure the ngeo wfs permalink service with.
A blob
data URL
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.
Angular parse service.
The directive specs.
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
Angular parse service.
The directive specs.
Provides the "ngeoColorpicker" directive, a widget for selecting a color among predefined ones.
Example:
<div ngeo-colorpicker="ctrl.colors">
</div>Directive Definition Object.
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.
The directive specs.
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:
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.
Url to template.
The Directive Definition Object.
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
The directive specs.
Provide a directive to select a single date or a range of dates. Requires jQuery UI for the 'datepicker' widget.
angular timeout service
The directive specs.
A directive used to display a date or time picker
Example:
<input ngeo-datetimepicker
ngeo-datetimepicker-options="{timepicker: false}"The directive specs.
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>The directive specs.
The directive specs.
The directive specs.
The directive specs.
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>The directive specs.
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>The directive specs.
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:
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>The directive specs.
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:
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>The directive specs.
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>The directive specs.
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>The directive specs.
Takes an import("ol/extent.js").Extent and return an Array of ol.Coordinate representing a rectangle polygon.
The extent.
The Array of coordinate of the rectangle.
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
The Directive Definition Object.
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
The Directive Definition Object.
A "map" directive for a GeoMapFish application.
Example:
<gmf-map gmf-map-map="mainCtrl.map"></gmf-map>The Directive Definition Object.
The Angular $q service.
ngeo debounce service.
ngeo network status service.
the interceptor
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" />Interaction to decorate.
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" />Layer to decorate.
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>layer.
Scope.
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>The directive specs.
Some coordinates.
Some other coordinates.
The squared magnitude.
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
The Angular $window service.
Directive Definition Object.
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
Directive Definition Object.
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
Angular window service.
The directive specs.
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
Template URL for the directive.
Directive Definition Object.
Angular compile service.
Gettext service.
Angular filter
Main injector.
The directive specs.
Angular compile service.
Gettext catalog.
Angular filter
Main injector.
The directive specs.
Angular compile service.
Gettext catalog.
Angular filter.
Main injector.
The directive specs.
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.
URL to popup template.
Directive Definition Object.
The Directive Definition Object
Provides a directive used to display a Bootstrap popover.
The Directive Definition Object.
The Directive Definition Object
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>The Directive Definition Object.
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>The Directive Definition Object.
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'}
];The Directive Definition Object.
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:
The Directive Definition Object.
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:
The Directive Definition Object.
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.
The Directive Definition Object.
Element.
Attributes.
Template function.
Template URL.
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>The directive specs.
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>The directive specs.
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>Directive Definition Object.
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
ngeo Debounce factory.
Directive Definition Object.
Overlay definition.
Is the overlay queryable.
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
The root scope.
The ngeo map querent service.
The ngeo query keyboard service.
The Directive Definition Object.
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
The ngeo map querent service.
The ngeo query keyboard service.
Main injector.
The Directive Definition Object.
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': ''
}
};Directive Definition Object.
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
Angular timeout service.
The directive specs.
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".
Angular sce service.
The filter function.
A filter to mark a value as trusted HTML.
Usage:
If you use it, you don't require the "ngSanitize".
Angular sce service.
The filter function.
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>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.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">×</button>
</div>
<div class="modal-body">
<div ng-bind-html="disclaimerMsg"></div>
</div>
</ngeo-modal>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>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'},
...
];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>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.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: [Experimental] Whether the layer group is expanded by default. For layer groups (only).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>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/');
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:
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">×</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
The ngeo-displaywindow component is an alternative to the ngeo.message.Popup.
What they have in common:
The differences with the ngeo.message.Popup are:
Example:
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>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
Component to display a shortened permalink and share it by email Example:
<gmf-share
gmf-share-email="true">
</gmf-share>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:
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>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>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>Provides a component which encapsulates the elevation component (see above) in a button with dropdown menu to be included in a application directly.
Example:
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.
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.
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
Directive Definition 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
Generated using TypeDoc