IGN API

The Viewer API aims to be a component which allows to programmatically create Viewers on a simple and customizable manner, so that it is reusable not only for new Viewers but also to update existing ones, providing technological standardization and significantly reducing redundant efforts.

The Viewer API aims to be a component which allows to programmatically create Viewers on a simple and customizable manner, so that it is reusable not only for new Viewers but also to update existing ones, providing technological standardization and significantly reducing redundant efforts.

Reference to the selector IGN_search for searching place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

Add control to get geojson feature collection related to the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

Features

The API component may be programmatically invoked with a simple JavaScript call involving only two code lines to get a preconfigured viewer with default options. In order to do that, a constructor function is provided which links an HTML DIV element of choice to the viewer, so that the developer chooses exactly where he wants the Viewer on his page and which size (width and height). The internal map object is also returned for detailed customization, if it is required. Whenever that function is called, the following features are present in a preconfigured viewer (by default):

Multilingual (i18n) behavior:

-

User browser language is automatically used. If the selected language is not available, English is used by default

-

Currently English and Spanish are available

-

All text strings are stored in separate text files. Adding another language is quick and easy, only another copy with the translated strings and language filename is required.

A form to add a custom vector layer to the map (in KML, GPX or GeoJSON formats) from an URL or from a file, both provided by the user

The following features are also provided but are not present by default, rather, they should be called to be used

A form to add a new WMS or WMTS service as a layer or tiled map from an URL provided by the user

A full table-of-contents (TOC): to manage both vector and service layers, with options to activate/deactivate them, remove them, change layer visualization order and choose which one should be used to get contextual info.

Getting contextual info from the selected layer by clicking on a feature (calling GetFeatureInfo operation for WMS layers and showing feature details for vector ones).

The map projection is “EPSG:4258”.

Usage

The IGN_API_CORE widget is used to load a map based on OpenLayers 3.

This widget is designed to offer two levels of configuration: default and advanced.

Default level includes next components

Zoom

Zoom to extent

Zoom box

Coordinates

Scale

Place name or address search

Switch among: Base map, Image map or Hybrid map

Tool Box (sometimes referenced as Menu Panel), where other components are included:

defaultExtension: check to load or unload to fit the full extent control. Possible values are true or false.

defaultZoomBox: check to load or unload to zoom rectangular box in the map. Possible values are true or false.

defaultSearching: check to load or unload the IGN_search widget as a control. Possible values are true or false.

defaultTools: check to load or unload the display tools control panel. Possible values are true or false. The default tools loaded are:

-

Tools: lineal and polygonal measurements.

-

Add vector layer: to load vectorial layers.

Default level API configuration needs

To include in the HTML the IGN_basic.js JavaScript file.

To define a HTML DIV for the map whose identifier matches with the identifier added in the invocation to the constructor widget method IGN_API_CORE.

To include the invocation to the API widget.

Two performed events have been created to define the callback function for asyncronous operations

completeVectorial: Only for vectors added with AddNewVector and AddNewVectorCluster functions. This event is triggered when the vectorial layers management is finished. See AddNewVector and AddNewVectorCluster function.

completeSearch: Only for place names or address searchs with SearchFeatures function. This event is triggered when the resultant geojson related to the selected candidate is got. See Search SearchFeatures function.

To get started, an example is shown describing how to use this API widget in an HTML document, please pay attention to the comments included in the example

Add a new WMS, Web Map Service, as a layer from an URL provided by the user

Add a new WMTS, Web Map Tile Service, as a tiled web map from an URL provided by the user

Maps table-of-contents (TOC): to manage both vector and service layers, with options to activate/deactivate them, remove them, change layer visualization order and choose which one should be used to get contextual info.

The functionalities are added to the tool box as new components. The way to add this new components is

To include in the HTML the IGN_middle.js JavaScript file.

To define a HTML DIV for the map whose identifier matches with the identifier added in the invocation to the constructor widget method IGN_API_CORE.

To define the selector pointing to the HTML DIV element that links the new component.

To invoke the AddNewComponent function.

To invoke the new constructor widget method, corresponding to the new functionalities.

RemoveZoomBoxControl

RemoveSearchControl

Remove control to include the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

RemoveInitExtensionControl

RemoveInitExtensionControl: function()

Remove initial zoom extension control from the map.

RemoverDisplayMenuPanel

RemoverDisplayMenuPanel: function()

Remove display menu panel control from the map.

GetZoomControl

GetZoomControl: function()

Reference to zoom control instance based on OpenLayers 3.

Returns

The reference to the zoom control based on OpenLayers 3: “ol.control.Zoom”.

GetZoomBoxControl

GetZoomBoxControl: function()

Reference to zoom rectangular box control instance based on OpenLayers 3.

Returns

The reference to the zoom rectangular box control.

GetSearchControl

GetSearchControl: function()

Reference to the control for searching place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

Returns

The reference to the control for searching place names or address candidates, based on OpenLayers 3: “ol.control.Control”.

GetSearchWidget

GetSearchWidget: function()

Reference to the selector IGN_search for searching place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates. Important: It`s necessary to load all windows content before to get the reference, so the way to call the funtion shall be:

Returns

The reference to the selector IGN_search for searching place names or address candidates.

GetInitExtensionControl

GetInitExtensionControl: function()

Reference to initial extension control instance based on OpenLayers 3.

Returns

The reference to the initial extension control based on OpenLayers 3: “ol.control.ZoomToExte”.

GetDisplayMenuPanel

GetDisplayMenuPanel: function()

Reference to the display menu panel control (Tool box).

Returns

The reference to the display menu panel control instance based on OpenLayers 3: “ol.control.Control”.

AddNewVector

AddNewVector: function(

projType,

vectorIGN,

vectorType,

zoomLevel

)

Add new vectorial layers. This is an asyncronous operation, the result is sent when the completeVectorial event is triggered. The user can define the callback function in the IGN_API_CORE widget creation.

Returns

returnValue: _ResultNewVector structure:

returnValue.result: “Error”, “Valid” or “Repeated”.

returnValue.input: input parameters.

SearchFeatures

SearchFeatures: function()

Add control to get geojson feature collection related to the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates. This is an asyncronous operation, the result is sent when the completeSeacrh event is triggered. The user can define the callback function in the IGN_API_CORE widget creation.

Add initial zoom extension control to the map, based on OpenLayers 3 ol.control.ZoomToExtent.

AddZoomBoxControl: function()

Add control to zoom rectangular box in teh map.

AddSearchControl: function()

Add control to include the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

AddDisplayMenuPanel: function()

Add control to display tool box components

RemoveZoomControl: function()

Remove zoom control from the map.

RemoveZoomBoxControl: function()

Remove control to zoom rectangular box in the map.

RemoveSearchControl: function()

Remove control to include the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

RemoveInitExtensionControl: function()

Remove initial zoom extension control from the map.

RemoverDisplayMenuPanel: function()

Remove display menu panel control from the map.

GetZoomControl: function()

Reference to zoom control instance based on OpenLayers 3.

GetZoomBoxControl: function()

Reference to zoom rectangular box control instance based on OpenLayers 3.

GetSearchControl: function()

Reference to the control for searching place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

GetSearchWidget: function()

Reference to the selector IGN_search for searching place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

GetInitExtensionControl: function()

Reference to initial extension control instance based on OpenLayers 3.

GetDisplayMenuPanel: function()

Reference to the display menu panel control (Tool box).

AddNewVector: function(

projType,

vectorIGN,

vectorType,

zoomLevel

)

Add new vectorial layers.

SearchFeatures: function()

Add control to get geojson feature collection related to the search place names or address candidates from IDEE and CartoCiudad services using autocomplete functionality, and select one of them from the list of candidates.

MeasureLinearDistance: function()

Draw and calculate the lineal distance between two points in the map.

MeasureArea: function()

Draw and calculate the area in the map.

DisableMeasures: function()

Disable the measure functionality over the map.

DeleteSelection: function()

Delete all measures and vectorial layers displayed over the map.

SetCenter: function()

Set center in the coordinate pointed by the mouse click event.

DisableSetCenter: function()

Disable the Set center functionality.

SetStyleMeasure: function(

geomBorderColor,

geomFillColor,

geomLineDash,

geomBorderWidth,

pointerRadius,

pointerBorderColor,

pointerFillColor,

geomEndBorderColor,

geomEndFillColor,

geomEndBorderWidth,

popupBorderColor,

popupFontColor,

popupFontSize,

popupfontFamily,

popupWidth

)

Set new values (see input parameters) to perform a new style for measure geometries (line and area) and associated popups.

SetStyleFeaturePopup: function(

popupBorderColor,

popupFontColor,

popupFontSize,

popupfontFamily,

popupWidth

)

Set new values (see input parameters) to perform a new style for vectorial features popups.