Home
La API CNIG es una herramienta que permite integrar de una forma muy sencilla un visualizador de mapas interactivo en cualquier página web y configurarlo consumiendo servicios web WMS, WFS, ficheros KML, etc. Además, provee la capacidad de añadir una gran cantidad de herramientas y controles.
Para adaptarse a las necesidades de los usuarios y ser mucho más flexible, la API CNIG cuenta con dos APIs. De esta manera, es el propio usuario el que selecciona la que más se adapta a las necesidades que necesite cubrir:
-
Una API REST muy sencilla y documentada que permite incluir un visualizador interactivo en cualquier página web sin necesidad de disponer de conocimientos específicos en programación ni de SIG (Sistemas de Información Geográfica).
-
Una API JavaScript que permite crear desde visualizadores de mapas básicos hasta otros de mayor complejidad.
La API CNIG se presenta como una solución gratuita para la incorporación de clientes de mapas interactivos en nuestras páginas web muy fácilmente.
A continuación mostramos un ejemplo base completo de la explotación de la API JavaScript. Este ejemplo puede verse funcionando en el siguiente enlace.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="cnig" content="yes">
<title>Visor base</title>
<!-- Estilo de la API -->
<link type="text/css" rel="stylesheet" href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css">
<!-- Estilos de los plugins añadidos -->
<link href="https://componentes.cnig.es/api-core/plugins/ignsearch/ignsearch.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.css" rel="stylesheet" />
<link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Contenedor principal del mapa -->
<div id="mapjs" class="m-container"></div>
<!-- Ficheros javascript de la API -->
<script type="text/javascript" src="https://componentes.cnig.es/api-core/vendor/browser-polyfill.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
<!-- Ficheros javascript de los plugins añadidos-->
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/ignsearch/ignsearch.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.js"></script>
<script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.js"></script>
<script type="text/javascript">
// Configuración del mapa
const mapjs = M.map({
container: 'mapjs', //id del contenedor del mapa
controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers', 'getfeatureinfo'],
zoom: 5,
maxZoom: 20,
minZoom: 4,
center: [-467062.8225, 4683459.6216],
});
// Configuración de las capas
const layerinicial = new M.layer.WMS({
url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
name: 'AU.AdministrativeBoundary',
legend: 'Limite administrativo',
tiled: false,
}, {});
const layerUA = new M.layer.WMS({
url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
name: 'AU.AdministrativeUnit',
legend: 'Unidad administrativa',
tiled: false
}, {});
const ocupacionSuelo = new M.layer.WMTS({
url: 'https://wmts-mapa-lidar.idee.es/lidar',
name: 'EL.GridCoverageDSM',
legend: 'Modelo Digital de Superficies LiDAR',
matrixSet: 'GoogleMapsCompatible',
visibility: false,
}, {});
const kml = new M.layer.KML('KML*Delegaciones IGN*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false*false*true');
mapjs.addLayers([ocupacionSuelo, layerinicial, layerUA, kml]);
// Configuración de los plugins
const mp = new M.plugin.IGNSearch({
servicesToSearch: 'gn',
maxResults: 10,
isCollapsed: false,
noProcess: 'municipio,poblacion',
countryCode: 'es',
reverse: true,
});
const mp2 = new M.plugin.Attributions({
mode: 1,
scale: 10000,
});
const mp3 = new M.plugin.ShareMap({
baseUrl: 'https://componentes.cnig.es/api-core/',
position: 'BR',
});
const mp4 = new M.plugin.XYLocator({
position: 'TL',
});
const mp6 = new M.plugin.ZoomExtent();
const mp7 = new M.plugin.MouseSRS({
srs: 'EPSG:4326',
label: 'WGS84',
precision: 6,
geoDecimalDigits: 4,
utmDecimalDigits: 2,
});
const mp8 = new M.plugin.TOC({
collapsed: false,
});
mapjs.addPlugin(mp);
mapjs.addPlugin(mp2);
mapjs.addPlugin(mp3);
mapjs.addPlugin(mp4);
mapjs.addPlugin(mp6);
mapjs.addPlugin(mp7);
mapjs.addPlugin(mp8);
</script>
</body>
</html>