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.
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. |
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. |
Usage | The IGN_API_CORE widget is used to load a map based on OpenLayers 3. |
GetMap | Reference to created instance of map based on OpenLayers 3. |
AddNewComponent | Create a new component in the Tool Box (Menu Control Panel). |
AddZoomControl | Add zoom control to the map, based on OpenLayers 3 ol.control.Zoom. |
AddInitExtensionControl | Add initial zoom extension control to the map, based on OpenLayers 3 ol.control.ZoomToExtent. |
AddZoomBoxControl | Add control to zoom rectangular box in teh map. |
AddSearchControl | 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 | Add control to display tool box components |
RemoveZoomControl | Remove zoom control from the map. |
RemoveZoomBoxControl | Remove control to zoom rectangular box in the map. |
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 | Remove initial zoom extension control from the map. |
RemoverDisplayMenuPanel | Remove display menu panel control from the map. |
GetZoomControl | Reference to zoom control instance based on OpenLayers 3. |
GetZoomBoxControl | Reference to zoom rectangular box control instance based on OpenLayers 3. |
GetSearchControl | 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 | 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 | Reference to initial extension control instance based on OpenLayers 3. |
GetDisplayMenuPanel | Reference to the display menu panel control (Tool box). |
AddNewVector | Add new vectorial layers. |
SearchFeatures | 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 | Draw and calculate the lineal distance between two points in the map. |
MeasureArea | Draw and calculate the area in the map. |
DisableMeasures | Disable the measure functionality over the map. |
DeleteSelection | Delete all measures and vectorial layers displayed over the map. |
SetCenter | Set center in the coordinate pointed by the mouse click event. |
DisableSetCenter | Disable the Set center functionality. |
SetStyleMeasure | Set new values (see input parameters) to perform a new style for measure geometries (line and area) and associated popups. |
SetStyleFeaturePopup | Set new values (see input parameters) to perform a new style for vectorial features popups. |
ShowPopup | Show popup with the information. |
RemovePopup | Remove popup. |
RemoveInfoPopups | Remove information of the popup. |
RemoveMeasurePopups | Remove measure of the popup. |
RemoveAllPopups | Remove all popups. |
RemoveAllOverlays | Remove all overlays. |
DeactivateInfoControl | Deactivate information control. |
DeactivateZoomBoxControl | Deactivate zoom box control. |
AddWMSLayers | Show WMS layers |
AddWMTSLayers | Show WMTS layers |
SetExtent | Set initial zoom extension. |
SetZoom | Add initial zoom. |
ActivateLayers | Activate Service Layers. |
DesactivateLayers | Desactivate Service Layers |
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):
- | 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. |
- | Map: Usually a background based on vector base cartography: http://www.ign.es/wmts/ign-base |
- | Image: usually a pure raster background with satellite imagery or orthoimagery: http://www.ign.es/wmts/pnoa-ma |
- | Hybrid:a mix of both, usually with the Map vector as background and imagery on top |
- | Additional toolbar containing linear and polygonal distance measure, a rubber for vector overlays and a center map tool |
- | 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 map projection is “EPSG:4258”.
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.
- | Tools: measure linear distance, measure area, clear vectorial and measure selection, centre on map. |
- | Add vector layer from URL or local file. The allowed formats are: KML, GPX or GeoJSON. |
- | Tools: lineal and polygonal measurements. |
- | Add vector layer: to load vectorial layers. |
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">--> <title>API Visualizador</title> </head> <body> <!-- To load necessary JavaScript libraries --> <script type="text/javascript" src="http://componentes.ign.es/PruebasNucleoVisualizador/IGN_basic.js"></script> <!-- To define HTML Div map --> <div id="map" class="map" style="height:700px"></div> <script type="text/javascript"> //Invocation to the IGN_API_CORE $( document ).ready( function () { // divIdMap must match with the HMTL Div map identifier // To create the map, all default control are activated. var apiMap = $('#map').IGN_API_CORE({ divIdMap: 'map' }); //Method to get map object reference var objMap = apiMap.IGN_API_CORE("GetMap"); }); </script> </body> </html>
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">--> <title>API Visualizador</title> </head> <body> <!-- To load necessary JavaScript libraries --> <script type="text/javascript" src="http://componentes.ign.es/PruebasNucleoVisualizador/IGN_basic.js"></script> <!-- To define HTML Div map --> <div id="map" class="map" style="height:700px"></div> <script type="text/javascript"> //Invocation to the IGN_API_CORE $( document ).ready( function () { //divIdMap must match with the HMTL Div map identifier // To create the map, all default control are activated. // To deactivate default controls: // var apiMap = $('#map').IGN_API_CORE({divIdMap: 'map', // defaultZoom: false, // defaultExtension: false, // defaultZoomBox: false, // defaultSearching: false, // defaultTools:false}); var apiMap = $('#map').IGN_API_CORE({ //completeVectorial:function(event,result){ //if (result.input.length>0) //alert(result.result + " " + result.input[0] + " " + result.input[1] + " " + result.input[2]); //else //alert(result.result);}, divIdMap: 'map', defaultZoom: true, defaultExtension: true, defaultZoomBox: true, defaultSearching: true, defaultTools: true }); //Methods to enable and to disable map default control and get references to these controls var zoomControl = apiMap.IGN_API_CORE("GetZoomControl"); apiMap.IGN_API_CORE("RemoveZoomControl"); apiMap.IGN_API_CORE("AddZoomControl"); var initExtControl = apiMap.IGN_API_CORE("GetInitExtensionControl"); apiMap.IGN_API_CORE("RemoveInitExtensionControl"); apiMap.IGN_API_CORE("AddInitExtensionControl"); var zoomBoxControl = apiMap.IGN_API_CORE("GetZoomBoxControl"); apiMap.IGN_API_CORE("RemoveZoomBoxControl"); apiMap.IGN_API_CORE("AddZoomBoxControl"); var buscControl = apiMap.IGN_API_CORE("GetSearchControl"); $(window).load(function() { var buscWidget = apiMap.IGN_API_CORE("GetSearchWidget"); }); apiMap.IGN_API_CORE("RemoveSearchControl"); apiMap.IGN_API_CORE("AddSearchControl"); var displayControl = apiMap.IGN_API_CORE("GetDisplayMenuPanel"); apiMap.IGN_API_CORE("RemoverDisplayMenuPanel"); apiMap.IGN_API_CORE("AddDisplayMenuPanel"); //Method to get map object reference var objMap = apiMap.IGN_API_CORE("GetMap"); // Add programmatically a new vectorial layer, the result is returned when the event "completeVectorial" is launched, // the management for the callback function is defined in the IGN_API_CORE widget creation apiMap.IGN_API_CORE("AddNewVector","EPSG:4326","http://componentes.ign.es/PruebasNucleoVisualizador/vectorial_examples/proximos.kml","KML"); // Add programmatically a new vectorial layer with clustering the vectors, the result is returned when the event "completeVectorial" is launched, // the management for the callback function is defined in the IGN_API_CORE widget creation apiMap.IGN_API_CORE("AddNewVectorCluster","EPSG:4326","http://www.ign.es/resources/concurso/delegacionesIGN.kml","KML","40",true); }); </script> </body> </html>
Advanced level configuration includes default level configuration and allows the users add more functionalities programmatically.
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- <meta charset="iso-8859-1">--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>IGN API</title> </head> <body> <!-- To load necessary JavaScript libraries --> <script type="text/javascript" src="http://componentes.ign.es/PruebasNucleoVisualizador/IGN_middle.js"></script> <!-- To define HTML Div map --> <div id="map" class="map" style="height:700px"></div> <script type="text/javascript"> $( document ).ready( function () { var apiMap = $('#map').IGN_API_CORE({ divIdMap: 'map', defaultZoom: true, defaultExtension: true, defaultZoomBox: true, defaultSearching: true, defaultTools: true }); //Method to get map object reference var objMap = apiMap.IGN_API_CORE("GetMap"); //Add new components to the tool box var newControlAddLayers = $('<div id="addNewLayers"></div>'); // Method "AddNewComponent" to add the new component with title "Introducir Mapas" apiMap.IGN_API_CORE("AddNewComponent",newControlAddLayers,"Introducir Mapas","Introducir_Mapas"); //Add new components to the tool box var newControlMapLayers = $('<div id="newMapLayers"></div>'); // Method "AddNewComponent" to add the new component with title "Mapas" apiMap.IGN_API_CORE("AddNewComponent",newControlMapLayers,"Mapas","Mapas"); //Launch IGN_Map_Layers widget invocation var managMapLay = newControlMapLayers.IGN_Map_Layers({map: objMap}); //Launch IGN_Service_Layers widget invocation var managLay = newControlAddLayers.IGN_Service_Layers({map: objMap}); }); </script> </body> </html>
AddNewComponent: function( newCompDiv, title, id )
Create a new component in the Tool Box (Menu Control Panel).
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.
The reference to the control for searching place names or address candidates, based on OpenLayers 3: “ol.control.Control”.
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:
$(window).load(function() { var buscWidget = apiMap.IGN_API_CORE("GetSearchWidget"); });
The reference to the selector IGN_search for searching place names or address candidates.
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.
var apiMap = $('#map').IGN_API_CORE({ completeVectorial:function(event,result){ if (result.input.length>0) alert(result.result + " " + result.input[0] + " " + result.input[1] + " " + result.input[2]); else alert(result.result);}, divIdMap: 'map', SRS:'4258', defaultZoom: true, defaultExtension: true, defaultZoomBox: true, defaultSearching: true, defaultTools:true });
returnValue: _ResultNewVector structure:
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.
var apiMap = $('#map').IGN_API_CORE({ completeSearch:function(event,result){ apiMap.IGN_API_CORE("DrawSearchFeature",result); }, divIdMap: 'map', SRS: '4258' defaultZoom: true, defaultExtension: true, defaultZoomBox: true, defaultSearching: false, defaultTools:true });
apiMap.IGN_API_CORE(“SearchFeatures”);
This method musn`t be used with default searching control activated. If user has fogotten put defaultSearching option to false, then this method performs it.
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.
Reference to created instance of map based on OpenLayers 3.
GetMap: function()
Create a new component in the Tool Box (Menu Control Panel).
AddNewComponent: function( newCompDiv, title, id )
Add zoom control to the map, based on OpenLayers 3 ol.control.Zoom.
AddZoomControl: function()
Add initial zoom extension control to the map, based on OpenLayers 3 ol.control.ZoomToExtent.
AddInitExtensionControl: function()
Add control to zoom rectangular box in teh map.
AddZoomBoxControl: 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.
AddSearchControl: function()
Add control to display tool box components
AddDisplayMenuPanel: function()
Remove zoom control from the map.
RemoveZoomControl: function()
Remove control to zoom rectangular box in the map.
RemoveZoomBoxControl: 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.
RemoveSearchControl: function()
Remove initial zoom extension control from the map.
RemoveInitExtensionControl: function()
Remove display menu panel control from the map.
RemoverDisplayMenuPanel: function()
Reference to zoom control instance based on OpenLayers 3.
GetZoomControl: function()
Reference to zoom rectangular box control instance based on OpenLayers 3.
GetZoomBoxControl: 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.
GetSearchControl: 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.
GetSearchWidget: function()
Reference to initial extension control instance based on OpenLayers 3.
GetInitExtensionControl: function()
Reference to the display menu panel control (Tool box).
GetDisplayMenuPanel: function()
Add new vectorial layers.
AddNewVector: function( projType, vectorIGN, vectorType, zoomLevel )
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.
SearchFeatures: function()
Draw and calculate the lineal distance between two points in the map.
MeasureLinearDistance: function()
Draw and calculate the area in the map.
MeasureArea: function()
Disable the measure functionality over the map.
DisableMeasures: function()
Delete all measures and vectorial layers displayed over the map.
DeleteSelection: function()
Set center in the coordinate pointed by the mouse click event.
SetCenter: function()
Disable the Set center functionality.
DisableSetCenter: function()
Set new values (see input parameters) to perform a new style for measure geometries (line and area) and associated popups.
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 vectorial features popups.
SetStyleFeaturePopup: function( popupBorderColor, popupFontColor, popupFontSize, popupfontFamily, popupWidth )
Show popup with the information.
ShowPopup:function ( popupType, popupPosition, popupInfo )
Remove popup.
RemovePopup:function( popupToRemove )
Remove information of the popup.
RemoveInfoPopups:function()
Remove measure of the popup.
RemoveMeasurePopups:function()
Remove all popups.
RemoveAllPopups:function()
Remove all overlays.
RemoveAllOverlays:function()
Deactivate information control.
DeactivateInfoControl: function()
Deactivate zoom box control.
DeactivateZoomBoxControl: function()
Show WMS layers
AddWMSLayers: function( wmsLayer )
Show WMTS layers
AddWMTSLayers: function( wmtsLayer )
Set initial zoom extension.
SetExtent: function( xmin, ymin, xmax, ymax )
Add initial zoom.
SetZoom: function( zoom )
Activate Service Layers.
ActivateLayers: function( layers )
Desactivate Service Layers
DesactivateLayers: function( layers )