Configuración
Para configurar un mapa dentro de una página web, es necesario editar su código html de la siguiente manera:
- Declaración de la aplicación como HTML5 utilizando
<!DOCTYPE html>
. - Creación de un
<div>
denominado"map"
, en el que se visualizará el mapa. - Definición de las opciones del mapa, dentro de la variable
iderioja_config
. - Inclusión del
<script>
de la API js IDErioja.
Para la representación de la información almacenada en la Base de Datos Geográfica del Gobierno de La Rioja, IDErioja dispone de unos ficheros de configuración predeterminados denominados "Consultas", en los que se almacenan las referencias de los datos que se quieren representar, su simbología y atributos, así como su orden de presentación (opción: consulta).
Si se prefiere utilizar la API para la representación de datos geográficos propios o de terceros en lugar de los almacenados en IDErioja, la API dispone de funciones que permiten añadir al mapa datos de otras procedencias.
Código de ejemplo
Se presenta a continuación el código del fichero html para la representación de la consulta de IDErioja "4d4b792f6469754163366644435862454d7a314e47773d3d", correspondiente a las Estaciones de Medición de La Rioja.
<!DOCTYPE html>
<html>
<head lang="es">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Ejemplo de configuración API IDErioja</title>
<style>
body, html{
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
#map{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
var iderioja_config = {
"consulta": "4d4b792f6469754163366644435862454d7a314e47773d3d"
// Estaciones de medición
}
</script>
<script src="https://apigeo.larioja.org/v1/iderioja.js"></script>
</html>
Salida gráfica
Opciones
Opción | Tipo | Valor def. | Descripción |
---|---|---|---|
capa_geojson | array | (no) | Array de archivos GeoJSON con capas geográficas a visualizar. |
capa_gpx | array | (no) | Array de archivos GPX (GPS) con puntos, recorridos y rutas a visualizar. |
capa_kml | array | (no) | Array de archivos KML con capas geográficas a visualizar. |
cluster_markers | [0,1] | 0 | Simbolización agrupada y dinámica de elementos puntuales y símbolos |
consulta | texto | (no) | Especifica la consulta de IDErioja que se quiere utilizar |
escala | [0,1] | 0 | Muestra una barra con la escala gráfica del mapa |
estilo_hover | parámetros | Define la simbolización que se emplea para resaltar un elemento | |
fondo_base | texto | "iderioja-base" | Especifica el fondo cartográfico o mapa base que se utilizará en el visor |
ids | array | (no) | Elementos a representar entre los incluidos en una consulta IDErioja |
init_lat | coordenada | 40.4169473 | Latitud del centrado inicial del mapa en coordenadas geográficas |
init_lng | coordenada | -3.7035285 | Longitud del centrado inicial del mapa en coordenadas geográficas |
leyenda | [0,1] | 0 | Muestra un botón leyenda de las capas utilizadas en una consulta IDErioja |
localizacion | [0,1] | 0 | Ofrece un botón que muestra la localización geográfica del dispositivo |
minimapa | [0,1] | 0 | Muestra un mapa guía en la parte inferior derecha del mapa principal |
popup | [0,1,2] | 1 | Define cómo se visualizan los atributos de un elemento seleccionado |
selector_capas | [0,1,2] | 0 | Configura la oferta y apariencia del selector de capas |
tag_mapa | div | "map" | Establece el nombre del <div> en el que incrustará el mapa |
zoom_inicial | [0-19] | 10 | Nivel de zoom inicial con el que se representará el mapa |
Métodos
Método | Descripción |
---|---|
crea_boton | Añade un botón dentro del mapa que al pulsarlo ejecuta la función que se le pasa como parámetro. |
captura_zoom | Inserta el valor del zoom actual en el ID del elemento de DOM que se indique. |
ir_a_coordenada | Sitúa el mapa en la coordenada y el nivel de zoom especificados. |
ir_a_elemento | Sitúa el mapa en el ID del elemento indicado con el nivel de zoom seleccionado. Se abren las propiedades del elemento. |
ir_a_todo | Centra el mapa para que todos los elementos aparezcan, ajustando también el nivel de zoom. |
zoom_mas | Acerca el mapa. |
zoom_menos | Aleja el mapa. |
carga_fondo | Carga un fondo en formato tile server. |
carga_fondo_wmts | Carga un fondo en formato WMTS. |
carga_capa_notiled_wms | Carga una capa WMTS sin tilear. |
carga_capa_geojson | Carga una capa en formato GeoJSON. |
carga_capa_kml | Carga una capa en formato KML. |
carga_capa_gpx | Carga una capa en formato GPX. |
eliminaCapasMapa | Suprime todas las capas del mapa. |
eliminaCapasBaseMapa | Suprime las capas del tipo BaseLayer. |
setFiltroProp | Muestra en el mapa solamente los elementos que coincidan con el valor del atributo seleccionado. |
unsetFiltroProp | Elimina los filtros creados con setfiltroProp . |
setFiltroIDS | Muestra en el mapa solamente los elementos que coincidan con los identificadores (IDs) seleccionados. |
unsetFiltroIDs | Elimina los filtros creados con setfiltroIDs . |
setFiltroBD | Muestra en el mapa solamente los elementos que coincidan con los campos que queremos filtrar. |
unsetFiltroBD | Elimina los filtros creados con setfiltroBD . |
abreModal | Abre un iFrame centrado en la patalla, por encima del mapa. |
Componentes
La API js IDErioja incorpora funcionalidades de las siguientes librerías y plugins de software abierto:
- Leafletjs v 0.7.7: Librería JavaScript open-source para la visualización de mapas interactivos.
- Leaflet.markercluster: Permite añadir a Leafletjs funcionalidades para el clustering dinámico de símbolos.
- leaflet.TileLayer.WMTS: Incorpora la posibilidad de añadir capas a partir de servicios WMTS.
- Leaflet.NonTiledLayer: Soporta peticiones a servicios WMS no tileados.
- leaflet-locatecontrol: Añade controles para la geolocalización del dispositivo.
- Leaflet.geojsonCSS: Permite aprovechar para la simbolización las posibilidades del formato Geojson CSS.
- leaflet-omnivore: Soporte de formatos CSV, GPX, KML, WKT, TopoJSON y Encoded Polylines. Incluye corslite.
- Leaflet.EasyButton: Ofrece la posiblidad de añadir botones en Leaflet de una forma sencilla.
- Leaflet-MiniMap: Control que permite añadir en una esquina un minimapa con funciones pan y zoom.
- Leaflet.fullscreen: Plugin para mostrar la visualización a pantalla completa (HTML5).
- leaflet-sidebar: Añade la posibilidad de configurar persianas laterales adaptativas (responsives).
Otras librerías JavaScript: