JSDoc: Class: Map

Constructor

new Map(options)

Parameters:

Name Type Description

options

luxx.MapOptions

Map options.

Properties

Name	Type	Description
`callback`	function \| undefined	Function called when the objects are initialized.
`layerInfoCallback`	function \| undefined	Function called when an info layer is return.
`bgLayer`	string \| undefined	Identifier of background layer. Default to `basemap_2015_global`.
`bgLayerStyle`	string \| undefined	Style to apply to vector tile background layer.
`bgLayerStyleXYZ`	string \| undefined	XYZ layer to apply to vector tile background layer when printing. Ex: 'https://vectortiles.geoportail.lu/styles/roadmap/{z}/{x}/{y}.png'.
`bgSelector`	luxx.BgSelectorOptions \| undefined	Set the presence of a background selector control in the map. (not included by default).
`controls`	ol.Collection.<ol.control.Control> \| Array.<ol.control.Control> \| undefined	Controls initially added to the map. If not specified, `ol.control.defaults()` is used plus a `rotate control`.
`interactions`	ol.Collection.<ol.interaction.Interaction> \| Array.<ol.interaction.Interaction> \| undefined	Interactions initially added to the map. If not specified, `ol.interaction.defaults()` is used, plus a `dragRotate interaction`.
`features`	luxx.FeaturesOptions \| undefined	Set the presence of features to recenter on & to show markers for. (not included by default).
`layerManager`	luxx.LayerManagerOptions \| undefined	Set the presence of a layer manager control. (not included by default)
`layerOpacities`	Array.<number> \| undefined	Array of opacities for the layers.
`layerVisibilities`	Array.<boolean> \| undefined	Array of visibilities for the layers.
`layers`	Array.<(string\|number)> \| undefined	Array of overlay layer identifiers.
`zoomToExtent`	boolean \| undefined	Set the presence of a ZoomToExtent control in the map. (not included by default).
`mousePosition`	luxx.MousePositionOptions \| undefined	Set the presence of a mouse position control in the map. (not included by default).
`popupTarget`	Element \| string \| undefined	The container for map popups, either the element itself or the `id` of the element.
`popupClassPrefix`	string \| undefined	The css class of the element that contains each row
`position`	ol.Coordinate \| undefined	The initial position of the center for the map view. The coordinate system for the center is specified with the `positionSrs` option. If a center is defined in the view, then this parameter will override the center defined in the view.
`positionSrs`	string \| number \| undefined	The projection of the position coordinates. Default is `2169`.
`queryableLayers`	Array.<(string\|number)> \| undefined	Array of queryable layers.
`search`	luxx.SearchOption \| undefined	The search configuration.
`showLayerInfoPopup`	boolean \| undefined	If set to true, it displays the feature information in a popup or in popupTarget element.
`target`	Element \| string	The container for the map, either the element itself or the `id` of the element. Required.
`view`	ol.View \| undefined	The map's view.
`zoom`	number \| undefined	Zoom level used to calculate the initial resolution for the view. If zoom are defined here and in the view, this parameter will override the view one.

Source:

src/map.js, line 119

Example

// To render a map, the API needs to know the element where to display the map (target),
// the predefined background layer (bgLayer) to display,
// the predefined layers (layers),
// the starting zoom level (zoom),
// the central position of the map (position)
var map = new lux.Map({
target: 'map1',
bgLayer: 'basemap_2015_global',
zoom: 18,
position: [75977, 75099]
});

Extends

ol.Map

Methods

activateModifyDrawing(enabled)

Draw a polygon on the map.

Parameters:

Name	Type	Description
`enabled`	boolean	the callback function.

Source:

src/map.js, line 654

addBgSelector(target, bglayers, elementType)

It adds a simple background selector control into a specific html element.

Parameters:

Name	Type	Description
`target`	Element \| string	Dom element or id of the element to render bgSelector in.
`bglayers`	Array.<(string\|number)> \| undefined	Array of overlay layer identifiers. 'blank' acts as blank layer.
`elementType`	string \| undefined	The kind of element we want to create. values are 'select' or 'radio'.

Source:

src/map.js, line 1453

See:

addGeoJSON(url, opt_optionsopt) → {Promise}

It displays a GeoJSON file on the map.

Parameters:

Name Type Attributes Description

url

string

Url to the GeoJSON file.

opt_options

luxx.VectorOptions

Options.

Properties

Name	Type	Description
`onFeatureAdd`	function \| undefined	Callback function called when a feature is added.
`fit`	boolean \| undefined	True if map should fit to the vector. Default and undefined are true.
`reloadInterval`	number \| undefined	Interval after which to reload the vector layer (in seconds).
`style`	ol.StyleFunction \| undefined	The style function.
`name`	string \| undefined	The layer name.
`click`	boolean \| undefined	If set, the popup is displayed when clicking the feature.
`onClick`	function \| undefined	If set, and if click is true then the function is called with the feature as parameter.
`target`	Element \| string \| undefined	The container for the feature popup, either the element itself or the `id` of the element.

Source:

src/map.js, line 2109

Returns:

The vector layer promise.

Type: Promise

addGPX(url, opt_optionsopt) → {Promise}

It displays a GPX file on the map.

Parameters:

Name Type Attributes Description

url

string

Url to the GPX file.

opt_options

luxx.VectorOptions

Options.

Properties

Name	Type	Description
`onFeatureAdd`	function \| undefined	Callback function called when a feature is added.
`fit`	boolean \| undefined	True if map should fit to the vector. Default and undefined are true.
`reloadInterval`	number \| undefined	Interval after which to reload the vector layer (in seconds).
`style`	ol.StyleFunction \| undefined	The style function.
`name`	string \| undefined	The layer name.
`click`	boolean \| undefined	If set, the popup is displayed when clicking the feature.
`onClick`	function \| undefined	If set, and if click is true then the function is called with the feature as parameter.
`target`	Element \| string \| undefined	The container for the feature popup, either the element itself or the `id` of the element.

Source:

src/map.js, line 2042

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/index.html#example4

Returns:

The vector layer promise.

Type: Promise

addKML(url, opt_optionsopt) → {Promise}

It displays a KML file on the map.

Parameters:

Name Type Attributes Description

url

string

Url to the KML file.

opt_options

luxx.VectorOptions

Options.

Properties

Name	Type	Description
`onFeatureAdd`	function \| undefined	Callback function called when a feature is added.
`fit`	boolean \| undefined	True if map should fit to the vector. Default and undefined are true.
`reloadInterval`	number \| undefined	Interval after which to reload the vector layer (in seconds).
`style`	ol.StyleFunction \| undefined	The style function.
`name`	string \| undefined	The layer name.
`click`	boolean \| undefined	If set, the popup is displayed when clicking the feature.
`onClick`	function \| undefined	If set, and if click is true then the function is called with the feature as parameter.
`target`	Element \| string \| undefined	The container for the feature popup, either the element itself or the `id` of the element.

Source:

src/map.js, line 2097

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/index.html#example4

Returns:

The vector layer promise.

Type: Promise

addLayer(layer)

Adds the given layer to the top of this map. If you want to add a layer elsewhere in the stack, use getLayers() and the methods available on ol.Collection.

Parameters:

Name	Type	Description
`layer`	ol.layer.Base	Layer.

Source:

src/map.js, line 707

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/iterate_layers_api.html

addLayerById(layer, opt_opacityopt, opt_visibilityopt)

Adds the given layer to the top of this map. If you want to add a layer elsewhere in the stack, use getLayers() and the methods available on ol.Collection.

Parameters:

Name	Type	Attributes	Description
`layer`	string \| number		The layer id.
`opt_opacity`	number	<optional>	The layer opacity. Default is 1.
`opt_visibility`	boolean	<optional>	The layer visibility. Default is true.

Source:

src/map.js, line 1416

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/iterate_layers_api.html

addMyMapLayer(options) → {Promise}

It loads a MyMaps layer.

Parameters:

Name Type Description

options

luxx.MyMapOptions

The options.

Properties

Name	Type	Description
`layerVisibility`	boolean	The layer visibility. Default is visible. Required.
`fitToExtent`	boolean	Fit to the mymaps extent. Default value is true. Required.
`mapId`	string \| undefined	The map identifier.
`mapIds`	Array.<string> \| undefined	An array of map identifiers.
`name`	string	The name of the mymaps layer. Required.
`profileTarget`	string \| undefined	The id of the element in which to put the profile (without #). Optional. It is recommended to set the display style to none at first. The display will then be set to block adequately.
`onload`	function \| undefined	The function called once the map is loaded. Optional.
`onClick`	function \| undefined	If set, the function is called when clicking on the object and the popup is not displayed.
`showPopup`	boolean \| undefined	If true, the popup is displayed on click. Default is True.

Source:

src/map.js, line 2317

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/index.html#example8.

Returns:

Promise of the mymaps object.

Type: Promise

Example

var map8 = new lux.Map({
target: 'map8',
bgLayer: 'topo_bw_jpeg',
zoom: 12,
position: [76825, 75133]
});
map8.addMyMapLayer({
 mapId: '0416ef680fbe4cdaa2d8009262d1127c'
});

addSearch(target, dataSetsopt, onSelectopt)

It adds the search control into an html element.

Parameters:

Name	Type	Attributes	Default	Description
`target`	Element \| string			Dom element or id of the element to render search widget in.
`dataSets`	Array.<string>	<optional>	['Adresse'	Array of layer used as search sources.
`onSelect`	function	<optional>		Optional function called when result is selected.

Source:

src/map.js, line 1741

See:

https://apiv3.geoportail.lu/proj/1.0/build/apidoc/examples/index.html#example6

createVectorLayer(style) → {ol.layer.Vector}

Create a new empty vector layer.

Parameters:

Name	Type	Description
`style`	ol.style.Style \| Array.<ol.style.Style> \| ol.StyleFunction \| undefined	The style to apply to the layer.

Source:

src/map.js, line 575

Returns:

The created layer.

Type: ol.layer.Vector

destroyMap()

Destroy the map.

Source:

src/map.js, line 2710

disableDrawTool()

Disable the current drawing tool.

Source:

src/map.js, line 669

enableDrawLine(onDrawEnd)

Draw a polygon on the map.

Parameters:

Name	Type	Description
`onDrawEnd`	function \| undefined	the callback function.
`queryLayer.`	boolean \| undefined

Source:

src/map.js, line 644

enableDrawPoint(onDrawEnd)

Draw a point on the map.

Parameters:

Name	Type	Description
`onDrawEnd`	function \| undefined	the callback function.

Source:

src/map.js, line 623

enableDrawPolygon(onDrawEnd)

Draw a polygon on the map.

Parameters:

Name	Type	Description
`onDrawEnd`	function \| undefined	the callback function.

Source:

src/map.js, line 633

enableQueryOnClick()

Enable query layer after clicking on the map.

Parameters:

Name	Type	Description
`queryOnClick.`	boolean

Source:

src/map.js, line 593

enableQueryOnDrawEnd()

Enable query layer after finishing to draw on the map.

Parameters:

Name	Type	Description
`queryOnDrawEnd.`	boolean

Source:

src/map.js, line 613

enableShowSelectedFeature()

If set to true, then it allows to display the clicked feature.

Parameters:

Name	Type	Description
`showSelectedFeature.`	boolean

Source:

src/map.js, line 603

exportGeoJSON(fArray, opt_optionsopt, exportMeasuresopt) → {string}

Transforms features into geojson

Parameters:

Name	Type	Attributes	Description
`fArray`	Array.<ol.Feature>		features array.
`opt_options`	olx.format.GeoJSONOptions	<optional>	Options.
`exportMeasures`	boolean	<optional>	True if length and area should be added to attributes.

Source:

src/map.js, line 2729

Returns:

The geojson string.

Type: string

fit(extent, opt_options)

Fit the map to an extent. The default extent is content of a vector layer.

Parameters:

Name	Type	Description
`extent`	ol.Extent \| undefined	The extent to fit on. Default is the one of the drawing layer.
`opt_options`	object \| undefined	Options.

Source:

src/map.js, line 2752

getDrawingLayer() → {ol.layer.Vector}

Get the layer containing drawn features.

Source:

src/map.js, line 964

Returns:

The show layer.

Type: ol.layer.Vector

getGeometryArea(geometry, srs) → {number}

Get the area of a geometry in square meters.

Parameters:

Name	Type	Description
`geometry`	ol.geom.Geometry	The geometry the get the area.
`srs`	string	the geometry's srs. Default is EPSG:3857.

Source:

src/map.js, line 1071

Returns:

The spherical area (in square meters).

Type: number

getGeometryLength(geometry, srs) → {number}

Get the length of a geometry in meters.

Parameters:

Name	Type	Description
`geometry`	ol.geom.Geometry	The geometry the get the area.
`srs`	string	the geometry's srs. Default is EPSG:3857.

Source:

src/map.js, line 1093

Returns:

The spherical length (in meters).

Type: number

getMapReadyPromise() → {Promise}

Get the promise to have a map in a ready state.

Source:

src/map.js, line 719

Returns:

Promise of a configured map.

Type: Promise

getPrintSpec()

Get the print spec.

Source:

src/map.js, line 838

getShowLayer() → {ol.layer.Vector}

Get the layer containing highlighted features.

Source:

src/map.js, line 954

Returns:

The show layer.

Type: ol.layer.Vector

print(nameopt, layoutopt, scaleopt, firstPagesUrlsopt, callbackopt)

Prints the current map.

Parameters:

Name	Type	Attributes	Description
`name`	string	<optional>	The title of the map.
`layout`	string	<optional>	The layout of the map. Default is A4 landscape or A4 portrait depending on the map size. Available values are : A4 landscape, A4 portrait, A3 landscape, A3 portrait, A2 landscape, A2 portrait, A1 landscape, A1 portrait, A0 landscape, A0 portrait
`scale`	number	<optional>	The scale to use.
`firstPagesUrls`	Array.<Object>	<optional>	An array containing urls and type of pages that will be introduced at the beginning of the pdf. Only html and pdf are supported. [{'url': 'http://url1', 'html'},{'url': 'http://url2' 'pdf'}]
`callback`	function	<optional>	Optional callback function.

Source:

src/map.js, line 742

Example

map.print();

removeDrawings()

Remove the drawings.

Source:

src/map.js, line 973

setCenter(coordinate, zoom, positionSrs)

Set the center of the current view in EPSG:2169.

Parameters:

Name	Type	Description
`coordinate`	ol.Coordinate	The coordinate of the center.
`zoom`	number \| undefined	The zoom numer.
`positionSrs`	string \| number \| undefined	The projection of the position coordinates. Default is `2169`.

Source:

src/map.js, line 2695

setLanguage(lang)

Parameters:

Name	Type	Description
`lang`	string	Set the language.

Source:

src/map.js, line 992

setLayerInfoCb(layerInfoCb)

Set the information callback function.

Parameters:

Name	Type	Description
`layerInfoCb`	function \| undefined	The callback function.

Source:

src/map.js, line 1059

setPopupTarget(optPopupTarget, optPopupClass)

Sets the popup target or undefined to let the api create popup.

Parameters:

Name	Type	Description
`optPopupTarget`	Element \| string \| undefined	The container for map popups, either the element itself or the `id` of the element. Undefined lets the popup be created by the api.
`optPopupClass`	string \| undefined	The css class of the row.

Source:

src/map.js, line 1119

setQueryableLayers(queryableLayers)

Set the queryable layers. If undefined then use the default value from metadata.

Parameters:

Name	Type	Description
`queryableLayers`	Array.<(string\|number)> \| undefined	An array of queryable layers

Source:

src/map.js, line 1038

setShowlayerStyle(style)

Parameters:

Name	Type	Description
`style`	ol.style.Style \| Array.<ol.style.Style> \| ol.StyleFunction \| null \| undefined	The style of the show layer.

Source:

src/map.js, line 2528

showFeatures(layer, ids, opt_clicknullable, opt_target, isShowMarker, maxZoom)

Parameters:

Name	Type	Attributes	Description
`layer`	string \| number		The layer identifier
`ids`	Array.<(string\|number)>		Array of features identifiers
`opt_click`	boolean	<nullable>	True if click is needed to show popup
`opt_target`	Element \| string \| undefined		Element to render popup content in
`isShowMarker`	boolean \| undefined		True if a marker has to be displayed.
`maxZoom`	number \| undefined		The maximum zoom to fit.

Source:

src/map.js, line 1632

showLayerInfoPopup(show)

Show a marker on the map at the given location.

Parameters:

Name	Type	Description
`show`	boolean	Set to true will allow to display the feature information popup when clicking on an object.

Source:

src/map.js, line 1049

showMarker(opt_optionsopt) → {ol.Overlay}

Show a marker on the map at the given location.

Parameters:

Name Type Attributes Description

opt_options

luxx.MarkerOptions

Config options

Properties

Name	Type	Description
`id`	number \| string \| undefined	Set the overlay id. The overlay id can be used with the ol.Map#getOverlayById method.
`noPopupOnTransparency`	boolean \| undefined	Allow to deactivate popup when clicking on a transparent part of the marker. This property is experimental. The marker should come from the same source as the page, or the image server has to set the following header Access-Control-Allow-Origin "*"
`position`	ol.Coordinate \| undefined	Position of the marker. If not set, the marker is displayed at the center of the map.
`positionSrs`	string \| number \| undefined	The projection of the position coordinates. Default is `2169`.
`autoCenter`	boolean \| undefined	Tells whether the map should be recentered to the marker position.
`iconURL`	string \| undefined	URL to an image. Defaults to `//openlayers.org/en/master/examples/data/icon.png`.
`positioning`	string \| undefined	Positioning of the icon. See `//openlayers.org/en/latest/apidoc/ol.html#.OverlayPositioning`
`html`	string \| undefined	If set, HTML code or simple text that will be displayed when clicking on the marker.
`click`	boolean \| undefined	If set, the popup is displayed when clicking the marker.
`target`	Element \| string	The container for the marker popup, either the element itself or the `id` of the element. Required.
`onClick`	function \| undefined	If set, the function is called when clicking on the marker.

Source:

src/map.js, line 1134

Returns:

The overlay containing the marker or null if the marker target is not conform.

Type: ol.Overlay

showPopup(position, title, content) → {ol.Overlay}

It shows a popup.

Parameters:

Name	Type	Description
`position`	ol.Coordinate	The position of the popup.
`title`	string	The popup title.
`content`	string	The popup content.

Source:

src/map.js, line 2277

Returns:

The popup overlay.

Type: ol.Overlay