Ejemplos

La API se encuentra disponible en la URL: https://componentes.cnig.es/api-core/.

El núcleo o CORE de la API cuenta con una serie de controles básicos. Este núcleo se extiende mediante diferentes plugins.

Disponemos de una galería de ejemplos en: https://plataforma.idee.es/resources/GaleriaEjemplos_APICNIG/.

API REST

A continuación se muestran algunos ejemplos construidos con la API REST:

• Ejemplo 1: Visualizador básico con controles y opciones

  https://componentes.cnig.es/api-core/?controls=scale,scaleline,panzoombar,panzoom,location,getfeatureinfo,rotate,backgroundlayers&center=-118114.81174504594,4397718.761898104&zoom=6&projection=EPSG:3857*m

  Parámetros:

  • Controles: panzoom, scale, scaleline, panzoombar, location, getfeatureinfo, rotate, backgroundlayers
  • Opciones:
    • center=-118114.81174504594,4397718.761898104
    • zoom=6
    • projection=EPSG:3857*m

• Ejemplo 2: Visualizador con controles, opciones, plugins y capas

  https://componentes.cnig.es/api-core/?controls=scale,scaleline,panzoombar,panzoom,location,getfeatureinfo,rotate,backgroundlayers&center=-118114.81174504594,4397718.761898104&zoom=6&projection=EPSG:3857*m&plugins=vectors,measurebar,overviewmap&layers=WMTS*http://wmts-mapa-lidar.idee.es/lidar*EL.GridCoverageDSM*GoogleMapsCompatible*Modelo%20Digital%20de%20Superficies%20LiDAR*true*image/png*true*true*true,WMTS*https://www.ign.es/wmts/ign-base?*IGNBaseTodo*GoogleMapsCompatible*IGNBaseTodo*false*image/png*true*true*true,WMS*Limite%20administrativo*http://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeBoundary*true*false**1.1.1*true*true*true,WMS*Unidad%20administrativa*http://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeUnit*true*true**1.3.0*true*true*true,KML*Delegaciones*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false*false*true&sharemap=https://componentes.cnig.es/api-core/*BR

  Parámetros:

  • Controles: panzoom, scale, scaleline, panzoombar, location, getfeatureinfo, rotate, backgroundlayers
  • Opciones:
    • center=-118114.81174504594,4397718.761898104
    • zoom=6
    • projection=EPSG:3857*m
  • Plugins: vectors, measurebar, overviewmap y sharemap (sharemap=https://componentes.cnig.es/api-core/*BR).
  • Capas:

    • WMTS*http://wmts-mapa-lidar.idee.es/lidar*EL.GridCoverageDSM*GoogleMapsCompatible*Modelo%20Digital%20de%20Superficies%20LiDAR*true*image/png*true*true*true

    • WMTS*https://www.ign.es/wmts/ign-base?*IGNBaseTodo*GoogleMapsCompatible*IGNBaseTodo*false*image/png*true*true*true

    • WMS*Limite%20administrativo*http://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeBoundary*true*false**1.1.1*true*true*true

    • WMS*Unidad%20administrativa*http://www.ign.es/wms-inspire/unidades-administrativas?*AU.AdministrativeUnit*true*true**1.3.0*true*true*true

    • KML*Delegaciones*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false*false*true

• Ejemplo 3: Parametrización Visualizadores (Visores externos que usan la API-CNIG para la construcción de sus mapas).

Podemos acceder, por ejemplo, al visor Iberpix sin especificar parámetros: https://www.ign.es/iberpix/visor

Aunque si el usuario necesita especificar unos valores específicos sobre el nivel de zoom, SRS, centro o capas a mostrar en el mapa lo podrá hacer mediante la parametrización en visualizadores. Ejemplo:

https://www.ign.es/iberpix/visor/?zoom=14&srs=EPSG:4326&center=-7.1,38.68&layers=WMS*Limite*https://www.ign.es/wms-inspire/unidades-administrativas*AU.AdministrativeBoundary*true*false**1.3.0*true*true*true

En caso de no indicar parámetros se tomará los valores por defecto definidos dentro del mismo visor.

Más información.

API JavaScript

A continuación se muestran algunos ejemplos construidos con la API JavaScript:

• Ejemplo 1: Visualizador básico con opciones y plugins

  • Plugins:
    • BackImgLayer: new M.plugin.BackImgLayer({...});
    • ShareMap: M.plugin.ShareMap({...});
  • Opciones:
    • zoom:5
    • maxZoom:20
    • minZoom:4
    • center:[-467062.8225, 4683459.6216]

• Ejemplo 2: Visualizador con controles, opciones, plugins y capas KML, WMTS y WMS

  • Plugins:
    • IGNsearchLocator: new M.plugin.IGNSearchLocator({...});
    • Attributions: new M.plugin.attributions({...});
    • ShareMap: M.plugin.ShareMap({...});
    • XYLocator: M.plugin.XYLocator({...})
    • ZoomExtent: M.plugin.ZoomExtent()
    • MouseSRS: M.plugin.MouseSRS({...})
    • TOC: M.plugin.TOC({...})
  • Controles: panzoom,scale, scaleline
  • Capas:
    • WMS: new M.layer.WMS({...});
    • WMTS: new M.layer.WMTS({...});
    • KML: new M.layer.KML({...});

• Ejemplo 3: Visualizador en Geográficas: contiene controles, plugins, capas y características específicas del mapa.