MAPEA Javascript - Manual de desarrollador

MODELO DE OBJETO MAPEA SIGCMAPEA
Manual de Integración
Versión: 100
Queda prohibido cualquier tipo de explotación y, en particular, la reproducción,
distribución, comunicación pública y/o transformación, total o parcial, por cualquier
medio, de este documento sin el previo consentimiento expreso y por escrito de la
Junta de Andalucía.

MAPEA
Consejería de Hacienda
y Administración Pública
HOJA DE CONTROL
Organismo Consejería de Hacienda y Administración Pública
Proyecto MODELO DE OBJETO MAPEA SIGCMAPEA
Entregable Manual de Integración
Autor
Aprobado por UPSH Fecha Aprobación 04/11/14
Nº Total de
Páginas
74
REGISTRO DE CAMBIOS
Versió
n
Causa del Cambio
Responsable
del Cambio
Fecha del
Cambio
0100 Versión inicial Guadaltel 22/08/14
CONTROL DE DISTRIBUCIÓN
Nombre y Apellidos
Consejería de Hacienda y Administración Pública / CHAP
Página 2 de 74

MAPEA
ÍNDICE
1 Introducción....................................................................................................................5
2 Primeros pasos................................................................................................................8
2.1 Construyendo el mapa.............................................................................................8
2.2 Proxy........................................................................................................................9
3 Métodos disponibles......................................................................................................13
3.1 Descripción del Servicio.........................................................................................13
3.2 Definición del Servicio............................................................................................13
3.2.1 Constructor.....................................................................................................13
3.2.2 addControls.....................................................................................................19
3.2.3 addlayers........................................................................................................19
3.2.4 addWmcfiles...................................................................................................20
3.2.5 getOlmap........................................................................................................20
3.2.6 getVersion.......................................................................................................21
3.2.7 setBbox...........................................................................................................21
3.2.8 setCenter........................................................................................................22
3.2.9 addGetfeatureinfo...........................................................................................23
3.2.10 setZoom........................................................................................................24
3.2.11 setTicket.......................................................................................................24
3.2.12 addLabel.......................................................................................................24
3.2.13 addEventHandler..........................................................................................25
3.2.14 removeEventHandler....................................................................................26
3.2.15 setTheme......................................................................................................26
3.2.16 addGeosearchByLocation..............................................................................27
3.2.17 addPrinter.....................................................................................................28
3.2.18 getServiceType..............................................................................................29
3.2.19 getRoadType.................................................................................................31
3.2.20 getLocalityFromProv......................................................................................32
3.2.21 searchStreet..................................................................................................33
3.2.22 searchStreetLocProv......................................................................................34
3.2.23 searchLocality...............................................................................................36
3.2.24 searchOrganizationalUnit..............................................................................37
Página 3 de 74

MAPEA
3.2.25 searchService................................................................................................38
3.2.26 searchRoad...................................................................................................40
3.2.27 autocompletarDireccion................................................................................41
3.2.28 buscarCallejero.............................................................................................42
3.2.29 geosearch.....................................................................................................44
3.3 Otras Consideraciones............................................................................................46
4 EJEMPLO COMPLETO......................................................................................................47
5 Desarrollo con Mapea Javascript...................................................................................50
5.1 Estructura del API...................................................................................................50
5.2 Configuración base.................................................................................................52
5.3 Compresión de ficheros javascript..........................................................................54
5.4 Mapea mobile.........................................................................................................55
6 Desarrollo de estilos para Mapea..................................................................................56
6.1 Establecer el directorio del estilo............................................................................56
6.2 Estilo de Mapea......................................................................................................57
6.3 Estilo jQuery UI.......................................................................................................60
7 ANEXO...........................................................................................................................62
7.1 Capa Geosearch.....................................................................................................62
7.1.1 Ejemplos de uso..............................................................................................62
7.1.2 API...................................................................................................................64
Página 4 de 74

MAPEA
1 Introducción
¿Qué es Open Layers?
El incremento en los últimos años de Sistemas de Información que trabajan con
datos espaciales o vinculados al territorio ha hecho que aumente también la
necesidad de incorporar visualizadores de mapas en dichos sistemas.
Para dar respuesta a dichas necesidades, han ido surgiendo diversos estándares
relacionados con la difusión de información espacial, en sus distintas
modalidades, así como diferentes componentes tecnológicos con los que
construir clientes que la consuman.
Entre estos componentes cabe destacar, por su trayectoria y estabilidad, la
librería de código abierto para la construcción de visualizadores web de
información espacial OpenLayers (OL)[1]
.
OL está formado por una serie de librerías javascript que, importadas en nuestras
páginas web, nos dan acceso a una serie de objetos y métodos con los que crear
visualizadores de mapas dinámicos.
¿Qué es Mapea?
OL está orientado a usuarios que sepan programar en javascript. Es probable que
una persona que esté construyendo una página web y necesite incluir un mapa
en la misma no tenga los conocimientos necesarios para ello.
Para dar respuesta a esos usuarios, desde el proyecto SIG Corporativo de la Junta
de Andalucía se desarrolló Mapea.
Mapea es un servicio que genera al vuelo el código javascript Open Layers del
visualizador de mapas que se necesite, para lo cual sólo hay que proporcionarle
una serie de parámetros. De esta manera, aunque el usuario necesita poseer de
cierto conocimiento acerca de los estándares de información espacial que entran
en juego, basta con incluir una llamada a Mapea en su página web para que
tenga un visualizador de mapas dinámico sin necesidad de programar nada.
Esta modalidad de uso de Mapea se conoce como Mapea REST.
Así por ejemplo, el siguiente código html, incluido en una página web:
<iframe
src="http://www.juntadeandalucia.es/servicios/mapas/mapea/Componente/
templateMapeaOL.jsp?
layers=WMS*OCA10_2010*http://www.ideandalucia.es/wms/ortofoto2010?
*OCA10_2010*false*true&controls=panzoombar,navtoolbar&center=204711,4
048342&zoom=7"></iframe>
Incrustaría en la misma un visualizador de mapas completamente funcional como
puede apreciarse en la siguiente imagen:
Página 5 de 74

MAPEA
Mapea javascript
Para muchos casos, Mapea REST cubre por completo las necesidades del usuario.
Pero su facilidad de uso surge a costa de ciertas restricciones tecnológicas, que
pueden no hacerlo apto para todas las situaciones.
Concretamente, el uso del elemento html iframe para la inclusión del
visualizador que genera Mapea REST, impide que los elementos del visualizador
puedan comunicarse con los elementos de la página web que están “fuera” del
iframe.
Si el usuario necesita esto último, tendrá que programar su visualizador y la
lógica que necesite mediante javascript.
Siendo una opción entonces programar directamente mediante OpenLayers,
surge Mapea javascript, para ofrecer otra alternativa con las siguientes
características:
– Métodos de construcción del visualizador más sencillos, parecidos a los
parámetros de construcción de Mapea REST. La idea es que el usuario no
necesite poseer conocimientos avanzados de javascript si lo que quiere es
construir un visualizador de mapas con funcionalidad y herramientas
similares a las disponibles en la versión REST de Mapea.
– Proporcionar una serie de métodos de integración con los Servicios Web
del Callejero Digital de Andalucía, como la geocodificación de direcciones
postales, o la obtención de los municipios de una provincia, por ejemplo.
– El usuario puede en cualquier momento acceder al mapa OpenLayers
subyacente, de manera que siempre pueda, si así lo desea, acceder a toda
la potencia de OL, de modo que pueda beneficiarse de las características
Página 6 de 74

MAPEA
de Mapea javascript sin que esto le imponga ninguna limitación.
Ejemplo
A continuación se muestra el ejemplo anterior en su versión Mapea REST y
javascript:
Mapea REST
<iframe
src="http://www.juntadeandalucia.es/servicios/mapas/mapea/Componente/
templateMapeaOL.jsp?
layers=WMS*OCA10_2010*http://www.ideandalucia.es/wms/ortofoto2010?
*OCA10_2010*false*true&controls=panzoombar,navtoolbar&center=204711,4
048342&zoom=7"></iframe>
Mapea javascript
var sigcMap = new Mapea.SigcMapea({
div: 'map_id',
projection:'EPSG:25830*m',
layers:['WMS*Callejero*http://www.ideandalucia.es/wms/ortofoto2010?
*OCA10_2010*false*true']
});
sigcMap.addControls(['panzoombar','navtoolbar']);
sigcMap.setCenter(204711,4048342);
sigcMap.setZoom(7);
Página 7 de 74

MAPEA
2 Primeros pasos
Una vez descargados los ficheros javascript que componen el API de Mapea,
deberemos copiarlos en nuestra aplicación web, respetando su estructura de
directorios. De esta manera, están accesibles a nuestras páginas web y
solamente hay que importarlos en las mismas, como cualquier otro fichero
javascript.
2.1 Construyendo el mapa
Primero, se importan las librerías javascript de Mapea en la página web. La ruta
hacia las librerías dependerá de dónde las hayamos ubicado dentro de nuestra
aplicación, por ejemplo:
<script type="text/javascript"
src="./javascriptVisor/Mapea/Mapea.js"></script>
<script type="text/javascript">OpenLayers.Lang.setCode('es');</script>
Ya dentro de la sección <body> de la página, el mapa que queremos crear se
corresponderá con un elemento html de tipo div. Se define por tanto el elemento
div, especificando su id:
<div id="testDiv" style="width: 50%; height: 50%; background: lightyellow;">
</div>
Si queremos tener más de un mapa en nuestra página, bastará con definir tantos
elementos div como sean necesarios, teniendo en cuenta que cada uno debe
tener un atributo id diferente.
Así, para crear un mapa con las opciones por defecto en el div anteriormente
declarado, bastará con especificar el id correspondiente en el constructor de
Mapea:
var sigcMap = new Mapea.SigcMapea('testDiv');
Figura 1. Creación de mapa con las opciones por defectos en el div “testDiv”.
Existen diversas alternativas a la hora de crear un mapa, como se describe más
adelante. Y una vez creado, podemos usar cualquiera de las distintas operaciones
para trabajar con él. Sin embargo, antes de verlas en más detalle, es necesario
conocer un aspecto importante del uso de Mapea javascript: el uso de un proxy.
Página 8 de 74

MAPEA
2.2 Proxy
¿Qué es un proxy y por qué lo necesito?
La comunicación que lleva a cabo OpenLayers con los Servidores de Mapas
externos para obtener imágenes, ficheros xml, hojas de estilo, etc. está
supeditada a la conocida como “política del mismo origen” o “crossdomain”. Esta
política de seguridad impide que un código javascript ejecutado en un navegador
web acceda a recursos existentes en otro origen (distinto protocolo, dominio y
puerto).
Para solucionar esta cuestión surge la figura del proxy, que no es más que un
“intermediario” entre el cliente y los recursos que este necesita. En nuestro caso,
la función de proxy la lleva a cabo en una librería que se suministra junto al
proyecto.
Esta librería se suministra en forma de fichero jar, y añadiéndolo a nuestra
aplicación web, permite evitar las limitaciones de seguridad anteriormente
comentadas.
¿Cómo uso el proxy proporcionado por Mapea?
Se puede proceder de diferente forma dependiendo del tipo de proyecto en el
que nos encontremos, así como de las restricciones bajo las que se desarrolle:
1. Inclusión del jar en el proyecto
Opción A – Incluir directamente el jar
Para ello bastará con copiar el fichero proxyRedirect.jar en la carpeta WEB-
INF/lib de nuestra aplicación web.
Si se está utilizando Maven para generar nuestra aplicación web, se
añadirá además la siguiente dependencia en el fichero pom.xml:
<dependency>
<groupId>proxy</groupId>
<artifactId>proxy</artifactId>
<version>1.0.0</version>
<scope>system</scope>
<systemPath>${basedir}/src/main/webapp/WEB-
INF/lib/proxyRedirect.jar</systemPath>
</dependency>
Opción B – Crear una dependencia con el jar en el Artifactory de la
Junta de Andalucía
La dirección del repositorio Maven de la Junta de Andalucía es:
http://repositorio-librerias.i-administracion.junta-
andalucia.es/artifactory/webapp/home.html
Página 9 de 74

MAPEA
Buscar el jar proxyRedirect.jar y añadir en el pom.xml de nuestro proyecto
la dependencia.
Además, el jar proxyRedirect depende de varias librerías que también
habrán de importarse al proyecto:
– HttpClient (versión 3.1-rc1):
http://archive.apache.org/dist/httpcomponents/commons-
httpclient/binary/commons-httpclient-3.1-rc1.zip
– Codec (versión 1.2):
http://archive.apache.org/dist/commons/codec/commons-codec-
1.2.zip
– IO (versión 1.4):
http://archive.apache.org/dist/commons/io/binaries/commons-io-1.4-
bin.zip
– Logging (versión 1.0.4):
http://archive.apache.org/dist/commons/logging/binaries/commons-
logging-1.0.4.zip
– Log4j (versión 1.2.15)
http://archive.apache.org/dist/logging/log4j/1.2.15/apache-log4j-
1.2.15.zip
Página 10 de 74

MAPEA
2. Configurar el proxy
Independientemente de la opción elegida anteriormente, se deberá añadir
en el fichero web.xml de nuestra aplicación web lo siguiente:
<servlet>
<servlet-name>proxyRedirect</servlet-name>
<servlet-class>
es.juntadeandalucia.mapea.proxyredirect.ProxyRedirect
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>proxyRedirect</servlet-name>
<url-pattern>/proxy</url-pattern>
</servlet-mapping>
Figura 2. Configuración del web.xml
En la etiqueta <url-pattern> declaramos la ruta relativa hacia el proxy.
Esta ruta es relativa al contexto de aplicación. Para el ejemplo anterior si
nuestra aplicación, dónde estamos haciendo uso de Mapea, está publicada
en http://miaplicacion.com/micontexto el proxy estará especificado en
http://miaplicacion.com/micontexto/proxy.
Si estuviese publicada en http://miaplicacion.com/ el proxy estaría
especificado en http://miaplicacion.com/proxy.
Página 11 de 74

MAPEA
3. Uso del proxy
Una vez que se tenga el proxy configurado, será necesario especificar su
ruta en el constructor de Mapea. Para el ejemplo anterior donde teníamos
un div con un id “testDiv” (figura 1), se especificó la url “/proxy” como
ruta relativa al contexto en el web.xml, por lo que, si nuestro proxy quedó
especificado en la dirección http://miaplicacion.com/proxy. Deberíamos
especificarlo en el constructor mediante el parámetro proxyHost.
div:'testDiv',
proxyHost: 'http://miaplicacion.com/proxy'
});
También se puede especificar la ruta relativa al proxy. Supongamos que el
código se está ejecutando en http://miaplicacion.com/ejemplo/mapa. En
vez de especificar la url http://miaplicacion.com/proxy en el parámetro
proxyHost, podemos especificar su ruta relativa a la ruta donde estamos
ejecutando el código, que será “./../proxy” (subiendo un nivel):
div:'testDiv',
proxyHost: './../proxy'
});
Si no se especifica este parámetro, Mapea intentará obtener la ruta del proxy de
dos formas:
1. Si los ficheros de Mapea fueron importados en una ruta donde está
especificada la carpeta “Componente”, usará como url de proxy la url
“proxy” el mismo nivel que ésta. Por ejemplo, si hemos importado el
archivo de la forma:
<script type="text/javascript"
src="http://miaplicacion.com/ficheros/javascript/Componente/Mapea/Mapea.j
s"></script>
Entonces usará como url del proxy:
http://miaplicacion.com/ficheros/javascript/proxy
2. Si no se han importado los ficheros desde una ruta que contenga
Componente en su url, entonces usará la dirección web sobre la que se
ejecute el código de Mapea como base de la url del proxy. Por ejemplo, si
ejecutamos el código anterior sobre una página publicada en:
http://midominio.com/pagina/mapa
Mapea usará como url del proxy:
http://midominio.com/pagina/proxy
Página 12 de 74

MAPEA
3 Métodos disponibles
3.1 Descripción del Servicio
SigcMapea
Descripción Modelo de Objeto SigcMapea
Tipo Modelo de objetos de Mapea
Funcionalidad Descripción
DESARROLLO
E
INTEGRACIÓN
DE MAPAS
Modelo de objetos de Mapea con diversas funcionalidades y que
permite la inclusión de mapas en cualquier página de html de
forma sencilla.
3.2 Definición del Servicio
3.2.1 Constructor
constructor
Descripción Constructor para crear instancias de SigcMapea
Parámetro Entrada Tipo Descripción
div
DOMEl
ement
String
Obligatorio. Especifica el elemento div que
contendrá el mapa a cargar por el objeto
SigcMapea construido. Este parámetro puede ser
de dos tipos:
· String: se le pasa el identificador (atributo id) del
div.
· DOMElement: objeto DOM de javascript que
representa al div.
projection String
Opcional. Cadena que contiene el sistema de
referencia y su unidad de medida separados por
*.
Para especificar la unidad de medida del sistema
de referencia se usa:
• m (meters) – metros
• d (degrees) – grados
Por defecto su valor es el establecido en la
Página 13 de 74

MAPEA
variable Mapea.Configuration.SRS (ver 5.2
Configuración base)
wmcfile
Array(
String
)
Opcional. Array compuesto por String. Cada
String representa el fichero WMC a cargar en el
mapa. El formato de cada String es similar al
usado en Mapea:
'url_context*nombre_context'
Se pueden definir archivos WMC por defecto de
forma que se puedan añadir indicando solo el
nombre. Para ello, vamos al archivo js que define
al objeto SigcMapea en:
[aplicación]/src/main/webapp/Componente/javascr
iptVisor/Mapea/lib/Mapea/SigcMapea.js
y modificamos los valores de:
· contexto
· url
· title
tal como se hacía en Mapea.
layers
Array(
String
)
Opcional. Array compuesto por String. Cada
String representa la capa a visualizar en el mapa.
El formato de cada String depende de la capa que
represente, siendo similar al usado en Mapea para
cada caso:
· Capa WMS:
'WMS*nombre_capa_leyenda*url_servicio_capa*no
mbre_capa*transparencia*tileado'
· Capa KML:
'KML*nombre_capa_leyenda_capa*url_servicio_cap
a*nombre_capa_capa*extraer_atributos_capa'
· Capa WFS:
'WFST*nombre_capa_leyenda_capa*url_servicio_ca
pa*nombre_capa_capa*tipo_capa*feature_1_id-
feature2_id-..-featureN_id'
· Capa WMS_FULL:
'WMS_FULL*url_servicio*tileado'
controls Array(
String
)
Opcional. Cada String representa el control que
se incluirá en el mapa:
Página 14 de 74

MAPEA
• panzoombar (por defecto):
Permite el desplazamiento del mapa mediante
opciones Norte, Sur, Este, Oeste y muestra una
barra de zoom por niveles.
• panzoom:
Permite el desplazamiento del mapa mediante
opciones Norte, Sur, Este, Oeste. Añade también
un control con las utilidades de ampliar, reducir y
zoom a la extensión total del mapa.
• layerswitcher:
Muestra la leyenda asociada al mapa tras pulsar el
botón representado por un botón “+” situado en
el margen derecho (parte superior) de la vista.
• mouse:
Muestra la posición del ratón dentro del mapa en
la esquina inferior derecha.
• scale:
Muestra en la esquina inferior derecha la escala
actual de la vista del mapa.
• scaleline:
Muestra en la esquina inferior izquierda la regla
de escalas que está representada en kilómetros y
millas.
• navtoolbar:
Añade al mapa el control de zoom de ventana y el
de desplazamiento manual.
• overviewmap:
Muestra un mapa de referencia del mapa principal
en la parte inferior derecha de la vista.
• measurebar:
Utilidad que permite medir distancias y áreas
sobre el mapa.
• drawfeature:
Permite la inserción de nuevos features en la capa
wfs.
• modifyfeature:
Permite modificar la posición de las features
existentes en la capa wfs.
• deletefeature:
Permite eliminar features existente en la capa wfs.
• editattribute:
Permite editar alfa-numéricamente los atributos
de un feature.
• location:
Página 15 de 74

MAPEA
Utilidad que permite geolocalizar al usuario
mostrando su ubicación en el mapa.
center String
Opcional. Cadena que representa la coordenada
x,y del punto donde se centrará el mapa
separadas por coma <,> y un boolean opcional
indicando si se dibuja o no chincheta en el punto
centrado separado por '*'.
Por defecto las coordenadas son 0,0 y no se dibuja
chincheta.
zoom
Intege
r
Opcional. Nivel de zoom con el que se quiere
visualizar el mapa. El máximo permitido por
OpenLayers es 16.
Por defecto es 0.
label String
Opcional. Texto que se incluirá en un popup del
mapa. Dicho popup saldrá en las coordenadas
definidas por center.
bbox String
Opcional. Especificamos el área que se desea
visualizar. Está compuesto por la coordenada x,y
inferior izquierda y la x,y superior derecha del
área de visualización a mostrar separadas por
comas:
'Xinf,Yinf,Xsup,Ysup'
getfeatureinfo String
Opcional. Representa el formato de la respuesta
a la consulta realizada para obtener información
asociada a cada una de las capas consultables en
la coordenada especificada.
Soporta tres formatos:
· plain
· gml
· html
Siendo plain el valor por defecto.
theme String
Opcional. Especificamos el tema, que se aplica
sobre Mapea, mediante su url.
Se pueden definir temas predefinidos de forma
que se puedan añadir indicando solo el nombre.
Página 16 de 74

MAPEA
Para ello, vamos al archivo js que define al objeto
SigcMapea en:
· strDefinedThemes
· strDefinedThemesUrl
tal como se hace en Mapea.
printer String
Opcional Especificamos la URL del servicio de
impresión MapFish que queramos hacer uso.
geosearchbylocati
on
String
Opcional. Establece la herramienta de búsqueda
por geolocalización del usuario sobre una
instancia de Geobúsquedas. El formato del String
es similar al usado en Mapea:
'url_geobusquedas*distancia'
Se pueden definir una instancia de Geobúsquedas
y una distancia por defecto. Para ello, vamos al
archivo js que define al objeto SigcMapea en:
· geosearchbylocationUrl
· geosearchDistance
tal como se hace en Mapea.
proxyHost String
Opcional. URL donde se encuentra especificado
el proxy importado de Mapea.
Ejemplo 1: Constructor completo
div: 'map1',
projection: 'EPSG:23030*m',
wmcfile: ['callejerocacheado','ortofoto'],
layers: ['WMS*Limites*http://www.ideandalucia.es/wms/mta10v_2007?
*Limites_Provinciales_lineal*true*false'],
controls: ['panzoombar','mouse','layerswitcher'],
center: '237041.04,4141961.8*true',
Página 17 de 74

MAPEA
zoom: 5,
label: 'texto de ejemplo',
getfeatureinfo: 'plain',
theme: 'dark',
printer: 'http://geoprint-sigc.juntadeandalucia.es/pdf',
geosearchbylocation: 'http://geobusquedas-
sigc.juntadeandalucia.es/sigc/search*100',
proxyHost: '/ejemplo/proxy'
});
Ejemplo 2: Constructor simple
var sigcMap = new Mapea.SigcMapea('map2');
El constructor simple utiliza una serie de valores por defecto especificados anteriormente.
Página 18 de 74

MAPEA
3.2.2 addControls
addControls
Descripción
Función para añadir controles al mapa. Los controles que se
podrán añadir son los descritos en la tabla del constructor.
Si se añaden algunos de los controles de edición (drawfeature,
modifyfeature, deletefeature y/o editattribute), se añadirán
también los siguientes controles:
• save
• clear
Si únicamente se especifica el control editattribute no se
añadirá el control save.
Parámetro
Entrada
Tipo Descripción
controls Array(String)
Cada String del array representa el control
que se incluirá en el mapa.
Ejemplo:
sigcMap.addControls(['panzoombar','mouse','layerswitcher']);
3.2.3 addlayers
addLayers
Descripción
Función para añadir capas al mapa. Las capas que se pueden
añadir serán de alguno de los tipos soportados por el
constructor.
Parámetro
Entrada
Tipo Descripción
layers Array(String)
Array compuesto por String. Cada String
representa la capa a visualizar en el mapa.
El formato de cada String depende de la
capa que represente, siendo similar al
usado en el constructor para cada caso.
Ejemplo:
sigcMap.addLayers(['WMS*Limites*http://www.ideandalucia.es/wms/mta10v_2007?
*Limites_Provinciales_lineal*true*false']);
Página 19 de 74

MAPEA
3.2.4 addWmcfiles
addWmcfiles
Descripción Función para añadir ficheros WMC al mapa
Parámetro
Entrada
Tipo Descripción
wmcfiles Array(String)
Array compuesto por String. Cada String
representa el fichero WMC a cargar en el
mapa. El formato de cada String es similar
al usado en el constructor.
Ejemplo:
sigcMap.addWmcfiles(['http://www.juntadeandalucia.es/servicios/mapas/mapea/Componente/mapC
onfig/contextOrtofoto.xml*ortofoto']);
que, al tener declarado dicho contexto en el fichero sigcMapea.js, equivaldría a:
sigcMap.addWmcfiles(['ortofoto']);
3.2.5 getOlmap
getOlmap
Descripción
Función que devuelve el objeto OpenLayers.Map que utiliza la
clase SigcMapea internamente. Con este objeto, los
desarrolladores podrán usar toda la potencia que proporciona la
API de OpenLayers.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
mapOL OpenLayers.Map
Objeto OpenLayers.Map que utiliza la clase
SigcMapea internamente.
Ejemplo:
var OLmap = sigcMap.getOlmap();
Página 20 de 74

MAPEA
3.2.6 getVersion
getVersion
Descripción Función que devuelve la versión de la API de SigcMapea.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
Version Object
Objecto que contiene los atributos:
· v : String que representa la versión de la
API
· d : String que representa la fecha de la
versión.
Ejemplo:
var version = sigcMap.getVersion();
window.alert('version: '+version.v+' fecha: '+version.d);
3.2.7 setBbox
setBbox
Descripción Función para visualizar el mapa a una determinada extensión.
Parámetro
Entrada
Tipo Descripción
xmin Float
Obligatorio. Coordenada x de la esquina
inferior izquierda del bbox.
ymin Float
Obligatorio. Coordenada y de la esquina
inferior izquierda del bbox.
xmax Float
superior derecha del bbox.
ymax Float
superior derecha del bbox.
Ejemplo:
sigcMap.setBbox(96000,3970000,620000,4290000);
Página 21 de 74

MAPEA
3.2.8 setCenter
setCenter
Descripción
Función para centrar el mapa en unas coordenadas y
opcionalmente, establecer un nivel de zoom. Las coordenadas x
e y deberán proporcionarse en el sistema de referencia del
mapa. Por defecto, el configurado en el campo
Mapea.Configuration (ver 5.2 Configuración base).
Parámetro
Entrada
Tipo Descripción
x Float Obligatorio. Coordenada x del centro.
y Float Obligatorio. Coordenada y del centro
zoom Integer Opcional. Nivel de zoom para aplicar.
drawPin boolean
Opcional. Indica si se dibuja o no una
chincheta en el punto centrado.
El valor por defecto es false.
Ejemplo: Centrado sin dibujar chincheta
sigcMap.setCenter(204711, 4048342);
Ejemplo: Centrado con chincheta
sigcMap.setCenter(204711, 4048342, null, true);
Página 22 de 74

MAPEA
3.2.9 addGetfeatureinfo
addGetfeatureinfo
Descripción
Función para añadir el control que obtiene de información sobre
las capas WMS cargadas en el mapa.
Parámetro
Entrada
Tipo Descripción
format String
Opcional Representa el formato de la
respuesta a la consulta realizada para
obtener información asociada a cada una
de las capas consultables en la
coordenada especificada.
Soporta tres formatos:
· plain
· gml
· html
Si no se especifica ninguno se supondrá
como formato plain.
Ejemplo:
sigcMap.addGetfeatureinfo('plain');
Página 23 de 74

MAPEA
3.2.10 setZoom
setZoom
Descripción
Función para visualizar el mapa a un determinado nivel de
zoom.
Parámetro
Entrada
Tipo Descripción
zoomlevel integer nivel de zoom 0-15 para visualizar el mapa
Ejemplo:
sigcMap.setZoom(3);
3.2.11 setTicket
setTicket
Descripción
Función para establecer el ticket con las credenciales del
usuario de edición.
Parámetro
Entrada
Tipo Descripción
Ticket String
Obligatorio. ticket de la session del
usuario con los credenciales de acceso a
las capas WFST a cargar.
3.2.12 addLabel
addLabel
Descripción
Función para añadir un popup con el texto pasado cómo
parámetro. Para especificar las coordenadas en las que dibujar
el bocadillo, se debe utilizar la función setCenter. Si no se
especifica, el popup se dibujará en el centro del mapa.
Parámetro
Entrada
Tipo Descripción
text String
Obligatorio. Texto que mostrará el popup
que emerja del mapa
Ejemplo: el siguiente código crea un popup en el mapa con el texto que contenga el input
'labelText' de la página:
var labelText = document.getElementById('labelText').value;
sigcMap.addLabel(labelText);
Página 24 de 74

MAPEA
3.2.13 addEventHandler
addEventHandler
Descripción Función para añadir eventos sobre el mapa.
Parámetro
Entrada
Tipo Descripción
type String
Obligatorio. Tipo de evento a añadir en el
mapa. Los tipos disponibles son:
• preaddlayer
• addlayer
• preremovelayer
• removelayer
• changelayer
• movestart
• move
• moveend
• zoomend
• mouseover
• mouseout
• mousemove
• changebaselayer
• updatesize
más información en:
http://dev.openlayers.org/docs/files/OpenL
ayers/Map-
js.html#OpenLayers.Map.events
callback_funct
ion
String
Obligatorio. Nombre de la función o
método que se ejecutará tras producirse el
evento.
Ejemplo: el siguiente código muestra un mensaje cada vez que se añade una capa al
mapa:
function muestraMensaje() {
window.alert("Esto es un mensaje. Se ha añadido una capa");
};
sigcMap.addEventListener("addlayer", muestraMensaje);
Página 25 de 74

MAPEA
3.2.14 removeEventHandler
removeEventHandler
Descripción Función para eliminar eventos del mapa.
Parámetro
Entrada
Tipo Descripción
type String
Obligatorio. Tipo de evento que se desea
eliminar del mapa. Los tipos disponibles
son los mismos que se especifican en
3.2.13 addEventHandler
Ejemplo: el siguiente código elimina los eventos que se disparaban cada vez que se
añade una capa al mapa:
sigcMap.removeEventHandler("addlayer");
3.2.15 setTheme
setTheme
Descripción Función para establecer un tema sobre Mapea.
Parámetro
Entrada
Tipo Descripción
theme String
Obligatorio. Url o nombre predefinido del
tema que se desea aplicar.
Ejemplo: el siguiente código elimina el tema previamente establecido sobre Mapea y
aplica el que se ha definido en la url http://<url>/misTemas/temaPersonalizado:
sigcMap.setTheme("http://<url>/misTemas/temaPersonalizado");
Página 26 de 74

MAPEA
3.2.16 addGeosearchByLocation
addGeosearchByLocation
Descripción
Función para añadir la herramienta de búsqueda por
geolocalización del usuario sobre Geobúsquedas.
Realiza una búsqueda espacial sobre el Geobúsquedas indicado
por el usuario usando como filtro una circunferencia cuyo centro
es la posición del usuario obtenida por geolocalización de
HTML5 y de radio la distancia especificada en el parámetro.
Parámetro
Entrada
Tipo Descripción
geosearchUrl String
Opcional. Url de la instancia de
Geobúsqueda sobre la que se realiza la
búsqueda.
Si no se especifica ninguna url se hará uso
de la configurada por defecto.
distance float
Opcional. Radio de la circunferencia
usada como filtro de la búsqueda (o
también distancia máxima aproximada de
los resultados de la búsqueda respecto al
usuario).
Si no se especifica ninguna distancia se
hará uso de la configurada por defecto.
La unidad de la distancia es el metro.
Ejemplo: el siguiente código añade la herramienta para que, una vez que se active,
realice una búsqueda sobre el Geobúsquedas publicado en http://geobusquedas-
sigc.juntadeandalucia.es/sigc/search para obtener todos los resultados en 200 metros
alrredor de la posición del usuario:
sigcMap.addGeosearchByLocation("http://geobusquedas-sigc.juntadeandalucia.es/sigc/search",
200);
Página 27 de 74

MAPEA
3.2.17 addPrinter
addPrinter
Descripción Función para añadir la herramienta de impresión al mapa.
Parámetro
Entrada
Tipo Descripción
printServiceU
RL
String
Opcional. URL del servicio de impresión
MapFish.
Si no se especifica ninguna URL se hará
uso de la configurada por defecto en
Mapea.Configuration.printerUrl (ver 5.2
Configuración base).
layoutParams Object
Opcional. Parámetros aplicados a la
plantilla usada.
pageParams Array(Object)
Opcional. Conjunto de parámetros
aplicados a cada página correspondiente.
options Object
Opcional. Opciones de impresión:
• legend - boolean : indica si se
muestra o no la leyenda en la
impresión. Por defecto su valor es
true.
• fitMode – String :
◦ “closest” : opción para que la
extensión de la impresión sea la
que más coincida con la del
mapa.
◦ “printer” : opción para que la
extensión de la impresión sea la
más cercana para mostrar toda
la extensión del mapa.
◦ “screen” : opción para que la
extensión de la impresión sea lo
más cercano a la extensión del
mapa.
El valor por defecto es “printer”.
(más información en
http://geoext.org/lib/GeoExt/dat
a/PrintPage.html)
Ejemplo: El siguiente código añade la herramienta para que, una vez que se active,
imprima el mapa haciendo uso del servicio de impresión publicado en http://geoprint-
sigc.juntadeandalucia.es/pdf sin leyenda y con la extensión que mejor encaje:
sigcMap.addPrinter("http://geoprint-sigc.juntadeandalucia.es/pdf", null, null, {
legend : false,
fitMode: "closest"
});
Página 28 de 74

MAPEA
3.2.18 getServiceType
getServiceType
Descripción
Función auxiliar para obtener los tipos de servicios utilizados en
la búsqueda de servicios. Esta función se encarga de rellenar el
array del objeto SigcMapea “arrayServicesType”.
Parámetro
Entrada
Tipo Descripción
callback function
Opcional. Función que será ejecutada una
vez que finalice la operación y cuyo
parámetro será los resultados devueltos
por la misma.
Si este parámetro no se especifica se
podrá acceder a los resultados mediante el
array arrayServicesType.
En este caso, la búsqueda se ejecutará de
forma síncrona bloqueando así toda
ejecución javascript por lo que no es
recomendable usarla.
Parámetro
Salida
Tipo Descripción
arrayServices
Type
Array(tipoServicio)
Array formado por los tipos de servicios
disponibles.
Página 29 de 74

MAPEA
Ejemplo: el siguiente código muestra, por la consola javascript del navegador, los
distintos nombres de los tipos de servicios:
FORMA ASÍNCRONA (recomendada)
function muestraNombres(servicios) {
for (var i=0,len=servicios.length; i<len; i++)
{
var servicio = servicios[i];
var nombreServicio = servicio.nombre;
console.log(nombreServicio);
}
}
sigcMap.getServiceType(muestraNombres);
FORMA SÍNCRONA (NO recomendada)
function muestraNombres(servicios) {
for (var i=0,len=servicios.length; i<len; i++)
{
var servicio = servicios[i];
var nombreServicio = servicio.nombre;
console.log(nombreServicio);
}
}
sigcMap.getServiceType();
var servicios = sigcMap.arrayServicesType;
muestraNombres(servicios);
Página 30 de 74

MAPEA
3.2.19 getRoadType
getRoadType
Descripción
Función auxiliar para obtener los tipos de vías utilizados en la
búsqueda de direcciones. Esta función se encarga de rellenar el
array del objeto SigcMapea “arrayRoadsType”.
Parámetro
Entrada
Tipo Descripción
callback function
por la misma.
array arrayRoadsType.
Parámetro
Salida
Tipo Descripción
arrayRoadsTy
pe
Array(String)
Array formado por los tipos de vías
disponibles.
distintos tipos de vía:
function muestraTiposvia(tipos) {
for (var i=0,len=tipos.length; i<len; i++)
{
var tipo = tipos[i];
console.log(tipo);
}
}
sigcMap.getRoadType(muestraTiposvia);
function muestraTiposvia(tipos) {
for (var i=0,len=tipos.length; i<len; i++)
{
var tipo = tipos[i];
console.log(tipo);
}
}
sigcMap.getRoadType ();
var tipos = sigcMap.arrayRoadsType;
muestraTiposvia(tipos);
Página 31 de 74

MAPEA
3.2.20 getLocalityFromProv
getLocalityFromProv
Descripción
Función auxiliar para obtener los municipios de la provincia
cuyo código se le pasa como parámetro de entrada. Esta
función se encarga de rellenar el array del objeto SigcMapea
“arrayLocFromProv”.
Parámetro
Entrada
Tipo Descripción
codProv String Código numérico de la provincia
callback function
por la misma.
array arrayLocFromProv.
Parámetro
Salida
Tipo Descripción
arrayLocFrom
Prov
Array(municipio)
Array formado por los municipios de la
provincia indicada.
nombres de los distintos municipios de Sevilla (cod 41):
function muestraNombreMunicipios(municipios) {
for (var i=0,len= municipios.length; i<len; i++)
{
var municipio = municipios[i];
var nombreMunicipio = municipio.name;
console.log(nombreMunicipio);
}
}
sigcMap.getLocalityFromProv("41", muestraNombreMunicipios);
function muestraNombreMunicipios(municipios) {
for (var i=0,len= municipios.length; i<len; i++)
{
var municipio = municipios[i];
var nombreMunicipio = municipio.name;
console.log(nombreMunicipio);
}
}
Página 32 de 74

MAPEA
sigcMap.getLocalityFromProv("41");
var municipios = sigcMap.arrayLocFromProv;
muestraNombreMunicipios(municipios);
3.2.21 searchStreet
searchStreet
Descripción
Función para realizar búsqueda de direcciones mediante código
INE del municipio. Esta función se encarga de rellenar el array
del objeto SigcMapea “arrayStreet”.
Parámetro
Entrada
Tipo Descripción
type String
Tipo de vía. Para un correcto
funcionamiento esta cadena debe de ser
uno de los tipos de vía devueltos por el
método “getRoadType”.
name String Nombre de la vía.
number String Número de portal.
locality String Código INE del municipio .
callback function
por la misma.
array arrayStreet.
projection String
Opcional. Código de la proyección en la
cuál se desea obtener los resultados.
Parámetro
Salida
Tipo Descripción
arrayStreet Array(address)
Array formado las direcciones devueltas
por la búsqueda realizada.
Ejemplo: el siguiente código muestra un mensaje con las coordenadas en EPSG:4326 del
portal número 2 de la calle sierpes:
function muestraCoordenadas(addresses) {
var address = addresses[0];
var coordenadaX = address.coordX;
var coordenadaY = address.coordY;
window.alert(coordenadaX + ", " + coordenadaY);
}
sigcMap.searchStreet("calle", "sierpes", "2", "41091", muestraCoordenadas, "EPSG:4326");
Página 33 de 74

MAPEA
}
sigcMap.searchStreet("calle", "sierpes", "2", "41091", null, "EPSG:4326");
var addresses = sigcMap.arrayStreet;
muestraCoordenadas(addresses);
3.2.22 searchStreetLocProv
searchStreetLocProv
Descripción
Función para realizar búsqueda de direcciones mediante
nombre del municipio y provincia. Esta función se encarga de
rellenar el array del objeto SigcMapea “arrayStreet”.
Parámetro
Entrada
Tipo Descripción
type String
Tipo de vía. Para un correcto
funcionamiento esta cadena debe de ser
uno de los tipos de vía devueltos por el
método “getRoadType”.
name String Nombre de la vía.
number String Número de portal.
localityName String Nombre del municipio .
province String Nombre de la provincia.
callback function
por la misma.
array arrayStreet.
projection String
Parámetro
Salida
Tipo Descripción
arrayStreet Array(address)
Array formado las direcciones devueltas
Página 34 de 74

MAPEA
portal número 2 de la calle sierpes:
}
sigcMap.searchStreetLocProv("calle", "sierpes", "2", "sevilla", "sevilla", muestraCoordenadas,
"EPSG:4326");
}
sigcMap.searchStreetLocProv ("calle", "sierpes", "2", "sevilla", "sevilla", null, "EPSG:4326");
var addresses = sigcMap.arrayStreet;
muestraCoordenadas(addresses);
Página 35 de 74

MAPEA
3.2.23 searchLocality
searchLocality
Descripción
Función para realizar búsqueda de núcleos de población que se
ajustan a la cadena pasada como argumento. Esta función se
encarga de rellenar el array del objeto SigcMapea
“arrayLocality”.
Parámetro
Entrada
Tipo Descripción
cadena String
Cadena para realizar la búsqueda de
núcleos de población coincidentes.
callback function
por la misma.
array arrayLocality.
projection String
Parámetro
Salida
Tipo Descripción
arrayLocality Array(nucleo)
Array formado por los núcleos de población
devueltos por la búsqueda realizada.
Ejemplo: el siguiente código muestra un mensaje con la extensión del municipio de Rota
en EPSG:4326:
function muestraExtension(localities) {
var locality = localities[0];
var extension = locality.extent;
window.alert(extension);
}
sigcMap.searchLocality("rota", muestraExtension, "EPSG:4326");
function muestraExtension(localities) {
var locality = localities[0];
var extension = locality.extent;
window.alert(extension);
}
sigcMap. searchLocality("rota", null, "EPSG:4326");
var localities = sigcMap.arrayLocality;
muestraCoordenadas(localities);
Página 36 de 74

MAPEA
3.2.24 searchOrganizationalUnit
searchOrganizationalUnit
Descripción
Función para realizar búsqueda de organismos que se ajustan a
la cadena pasada como argumento. Esta función se encarga de
rellenar el array del objeto SigcMapea “arrayOu”.
Parámetro
Entrada
Tipo Descripción
codINE String Código INE del municipio.
cadena String
núcleos de población coincidentes.
codProv String Código de la provincia del municipio.
callback function
por la misma.
array arrayOu.
projection String
Parámetro
Salida
Tipo Descripción
arrayOu Array(sede)
Array formado por los organismos
devueltos por la búsqueda realizada.
nombres de las distintas sedes de “empleo” en Sevilla:
function muestraNombresSedes(sedes) {
for (var i=0,len=sedes.length; i<len; i++)
{
var sede = sedes[i];
var nombreSede = sede.nombre;
console.log(nombreSede);
}
}
sigcMap.searchOrganizationalUnit("41091", "empleo", "41", muestraNombresSedes, "EPSG:4326");
Página 37 de 74

MAPEA
function muestraNombresSedes(sedes) {
for (var i=0,len=sedes.length; i<len; i++)
{
var sede = sedes[i];
var nombreSede = sede.nombre;
console.log(nombreSede);
}
}
sigcMap.searchOrganizationalUnit("41091", "empleo", "41", null, "EPSG:4326");
var sedes = sigcMap.arrayOu;
muestraNombresSedes(sedes);
3.2.25 searchService
searchService
Descripción
Función para realizar búsqueda de servicios que se ajustan a la
cadena pasada como argumento. Esta función se encarga de
rellenar el array del objeto SigcMapea “arrayServices”.
Parámetro
Entrada
Tipo Descripción
codINE String Código INE del municipio.
cadena String
servicios. Para un correcto funcionamiento
esta cadena debe de ser uno de los tipos
de servicios devueltos por el método
“getServiceType”.
codProv String Código de la provincia del municipio.
callback function
por la misma.
array arrayServices.
projection String
Parámetro
Salida
Tipo Descripción
arrayService Array(servicio)
Array formado por los servicios devueltos
Página 38 de 74

MAPEA
Ejemplo: el siguiente código muestra, por la consola javascript del navegador, los alias de
los distintos servicios de “aeropuerto” en Sevilla:
function muestraNombresServicio(services) {
for (var i=0,len=services .length; i<len; i++)
{
var service = services[i];
var nombreService = service.alias;
console.log(nombreService);
}
}
sigcMap.searchService("41091", "aeropuerto", "41", muestraNombresServicio, "EPSG:4326");
function muestraNombresServicio(services) {
for (var i=0,len=services .length; i<len; i++)
{
var service = services[i];
var nombreService = service.alias;
console.log(nombreService);
}
}
sigcMap.searchService("41091", "aeropuerto", "41", null, "EPSG:4326");
var services = sigcMap.arrayServices;
muestraNombresServicio(services);
Página 39 de 74

MAPEA
3.2.26 searchRoad
searchRoad
Descripción
Función para realizar búsqueda de carreteras que se ajustan a
la cadena pasada como argumento. Esta función se encarga de
rellenar el array del objeto SigcMapea “arrayRoads”.
Parámetro
Entrada
Tipo Descripción
cadena String
carreteras coincidentes.
pk String Punto kilométrico.
callback function
por la misma.
array arrayRoads.
projection String
Parámetro
Salida
Tipo Descripción
arrayRoad Array(road)
Array formado por las carreteras devueltas
kilómetro 100 de la A-92:
function muestraCoordenadas(roads) {
var road = roads[0];
var coordenadaX = road.x;
var coordenadaY = road.y;
}
sigcMap.searchRoad("a-92", "100", muestraCoordenadas, "EPSG:4326");
function muestraCoordenadas(roads) {
var road = roads[0];
var coordenadaX = road.x;
var coordenadaY = road.y;
}
sigcMap.searchRoad("a-92", "100", null, "EPSG:4326");
var roads = sigcMap.arrayRoads;
muestraCoordenadas(roads);
Página 40 de 74

MAPEA
3.2.27 autocompletarDireccion
autocompletarDireccion
Descripción
Autocompletador de direcciones. A partir de una cadena de
entrada de al menos tres caracteres, busca direcciones
coincidentes. Esta función se encarga de rellenar el array del
objeto SigcMapea “arrayAuto”.
Parámetro
Entrada
Tipo Descripción
cadena String Cadena para realizar el autocompletado.
limit int
Cantidad de resultados que se quieren
obtener. -1 si se quieren obtener todos los
resultados encontrados.
callback function
por la misma.
array arrayAuto.
locality String
Opcional. Código INE del municipio sobre
el cual quiere realizarse la operación de
autocompletado.
Parámetro
Salida
Tipo Descripción
arrayAutocom
pletados
Array(String)
Array formado por las carreteras devueltas
Ejemplo: el siguiente código muestra, por la consola javascript del navegador, las
direcciones autocompletadas para las calles que comiencen por “vi” del municipio de
Iznajar, Córdoba (código INE 14037):
function muestraAutocompletados(cadenas) {
for (var i=0,len=cadenas .length; i<len; i++)
{
var cadena = cadenas[i];
console.log(cadena);
}
}
sigcMap.autocompletarDireccion("calle vi", 15, muestraAutocompletados, "14037");
Página 41 de 74

MAPEA
function muestraAutocompletados(cadenas) {
for (var i=0,len=cadenas .length; i<len; i++)
{
var cadena = cadenas[i];
console.log(cadena);
}
}
sigcMap.autocompletarDireccion("calle vi", 15, null, "14037");
var autocompletados = sigcMap.arrayAuto;
muestraAutocompletados(autocompletados);
3.2.28 buscarCallejero
buscarCallejero
Descripción
Buscador genérico de callejero. A partir de una cadena de
entrada busca direcciones, núcleos, carreteras, servicios y
sedes. Integra en un único métodos los siguientes:
• GeocoderList
• localizarNucleos
• localizarCarreteras
• localizarServicios
• localizarSedes
Esta función se encarga de rellenar el array del
objeto SigcMapea “arrayBC”.
Parámetro
Entrada
Tipo Descripción
cadena String Cadena para realizar la búsqueda.
callback function
por la misma.
array arrayBC.
locality String
Opcional. Código INE del municipio sobre
el cual quiere realizarse la operación de
búsqueda.
projection String
Parámetro
Salida
Tipo Descripción
Página 42 de 74

MAPEA
arrayResultad
os
Array(address,
road, servicio,
sede, nucleo)
Array formado por las vías, carreteras,
núcleos, servicios y sedes devueltos por la
búsqueda realizada.
Ejemplo: el siguiente código muestra, por la consola javascript del navegador, las
similitudes de cada resultado devuelto por la búsqueda “sevilla”:
function muestraSimilitudes(results) {
for (var i=0,len=results .length; i<len; i++)
{
var result = results[i];
console.log(result.similarity);
}
}
sigcMap.buscarCallejero("sevilla", muestraSimilitudes);
function muestraSimilitudes(results) {
for (var i=0,len=results .length; i<len; i++)
{
var result = results[i];
console.log(result.similarity);
}
}
sigcMap.buscarCallejero("sevilla");
var results = sigcMap.arrayBC;
muestraSimilitudes(results);
Página 43 de 74

MAPEA
3.2.29 geosearch
geosearch
Descripción
Buscador de lenguaje natural. Realiza una llamada a
Geobusqueda con los parámetros especificados.
Parámetro
Entrada
Tipo Descripción
params
Object
String
Obligatorio. Parámetros de la búsqueda
enviados a Geobusqueda.
Este parámetro puede ser de dos tipos:
· String: cadena de búsqueda enviada a
Geobusqueda
· Object: objeto javascript el cual puede
contener todos los parámetros que soporta
Geobusqueda
url String
Opcional. Url de la instancia de
Geobusquedas al que atacará la búsqueda
con el core y el manejador especificados.
Si no se especifica ninguna url se hará uso
de la configurada por defecto.
callback function
Obligatorio. Función que será ejecutada
una vez que finalice la operación y cuyo
por Geobusquedas en formato JSON.
Página 44 de 74

MAPEA
Ejemplo: el siguiente código muestra, por la consola javascript del navegador, la
geometria en WKT de cada documento devuelto por la búsqueda espacial de bibliotecas
en la provincia de Sevilla, con un umbral del 0.8 como filtro sobre la instancia de
Geobúsquedas publicada en http://geobusquedas-
sigc.juntadeandalucia.es/sigc/search :
function muestraGeometrias(respuestaGeosearch) {
var respuestaEspacial = respuestaGeosearch.spatial_response;
var documentos = respuestaEspacial.docs;
for (var i=0,len= documentos.length; i<len; i++)
{
var documento = documentos[i];
console.log(documento.geom);
}
}
sigcMap.geosearch({
q: "bibliotecas en sevilla",
threshold: 0.8
}, "http://geobusquedas-sigc.juntadeandalucia.es/sigc/search", muestraGeometrias);
Página 45 de 74

MAPEA
3.3 Otras Consideraciones
El nombre de la función que realiza el salvado de datos de modificación en
elementos de un WFST tiene que tener nombre único.
Página 46 de 74

MAPEA
4 EJEMPLO COMPLETO
Creación de un mapa en el div de la página con las opciones indicadas:
div → testDiv
proyección → EPSG:23030 en metros (m)
archivos WMC → http://<url>/mapConfig/contextOrtofoto.xml con nombre
ortofoto y el definido por el nombre callejero.
capa → tipo WMS; nombre de la leyenda: Limites;
url de servicio:
http://www.ideandalucia.es/wms/mta100v_2005?
nombre de la capa: Limites_Provinciales;
transparencia: true; tileado: false
centro → 237041.04,4141961.8
zoom → 8
label → popup que emergerá en las coordenadas 237041.04,4141961.8
con el texto "texto de ejemplo"
bounding box → con coordenadas 96000,3970000,620000,4290000
control para obtener información de las capas → formato plain
proxy → mapa que apunte al servlet del proxyRedirect.jar especificado en
el web.xml (url: http://miaplicacion/contexto/proxy)
div: 'testDiv',
projection: 'EPSG:23030*m',
wmcfile:
['http://<url>/mapea/Componente/mapConfig/contextOrtofoto.xml*ortofoto','c
allejero'],
layers:
['WMS*Limites*http://www.ideandalucia.es/wms/mta100v_2005?
*Limites_Provinciales*true*false'],
controls: ['panzoombar','mouse','measurebar'],
center: '237041.04,4141961.8',
label: 'texto de ejemplo',
bbox: '96000,3970000,620000,4290000',
getfeatureinfo: 'plain',
proxyHost: '/contexto/proxy'
});
Página 47 de 74

MAPEA
añado al mapa definido por sigcMap los controles layerswitcher y overviewmap
sigcMap.addControls(['layerswitcher','overviewmap']);
añado una capa tipo WMS:
tipo: WMS
nombre de la leyenda: Limites
url de servicio: http://www.ideandalucia.es/wms/mta100v_2005?
nombre de la capa: Limites_Provinciales
transparencia: true
tileado: false
sigcMap.addLayers(['WMS*Limites*http://www.ideandalucia.es/wms/mta100v_200
5?*Limites_Provinciales*true*false']);
añado los archivos WMC definidos por los nombres 'idea' y 'ortofoto' en los
atributos de SigcMapea.js
sigcMap.addWmcfiles(['idea','ortofoto']);
obtengo el mapa OpenLayers con el que trabaja internamente sigcMap y obtengo
el número de capas.
var olmap = sigcMap.getOlmap();
olmap.getNumLayers();
obtengo el número de versión y la fecha de la última modificación de la API
sigcMapea y lo guardo en las variables numVersion y en fechaVersion
respectivamente.
var version = sigcMapea.getVersion();
var numVersion = version.v;
var fechaVersion = version.d;
modifico el bounding box del mapa sigcMap a las coordenadas
96000,3970000,620000,4290000.
sigcMap.setBbox(96000,3970000,620000,4290000);
centro el mapa en en las coordenadas 237041.04,4141961.8 con un nivel de
zoom 6.
Página 48 de 74

MAPEA
sigcMap.setCenter(237041.04,4141961.8,6);
añado el control de obtener información de las capas en formato gml.
sigcMap.addGetfeatureinfo('gml');
modifico el nivel de zoom del mapa sigcMap en 5.
sigcMap.setZoom(5);
añado el ticket de la session al mapa sigcMap para establecer las credenciales de
edición de capas WFS.
sigcMap.setTicket('efsadas5asda727asd66as5asd867a822a11');
añado un popup con el texto 'Esta es mi casa' en el mapa sigcMap en las
coordenadas 237041.04,4141961.8 con un nivel de zoom 8 e indicando que
dibuje una chincheta en dicho punto.
sigcMap.setCenter(237041.04,4141961.8, 8, true);
sigcMap.addLabel('Esta es mi casa');
Añado el panel de impresión para el servicio de impresión de MapFish que está
publicado en http://www.miserviciomapfish.com/pdf
sigcMap.addPrinter('http://www.miserviciomapfish.com/pdf');
se realiza una búsqueda de direcciones con los siguientes parámetros ; tipo de
vía : CALLE, nombre de la vía : sierpes, número de portal : 4, código INE : 41091.
sigcMap.searchStreet('CALLE','sierpes','4','41091');
Tras realizar la búsqueda se rellena y está disponible el array de
direcciones devueltas por la búsqueda “arrayStreet”.
añado evento onclick en el mapa sigcMap para que muestre una alerta
function alerta(){
window.alert('mensaje de alerta');
}
sigcMap.addEventHandler('click',alerta);
elimino el mensaje de alerta anterior del mapa sigcMap
Página 49 de 74

MAPEA
sigcMap.removeEventHandler('click');
Página 50 de 74

MAPEA
5 Desarrollo con Mapea Javascript
En algunas ocasiones, el usuario puede desear modificar la API javascript ofrecida
por Mapea, estudiar su estructura interna, o ampliarla.
Por motivos de rendimiento y eficiencia, los ficheros javascript importados por
Mapea.js están ofuscados y comprimidos, lo que dificulta el estudio y
modificación de los mismos. Para ello, en vez de usar dichas versiones, podremos
trabajar directamente con las versiones no comprimidas y no ofuscadas de los
ficheros javascript de Mapea.
Para importar estos ficheros de desarrollo únicamente hay que especificar en la
página web los siguientes scripts:
<script type="text/javascript" src="./javascriptVisor/Mapea/Mapea-
desarrollo.js"></script>
<script type="text/javascript">OpenLayers.Lang.setCode('es');</script>
Veremos a continuación la estructura de ficheros que componen la API de Mapea.
5.1 Estructura del API
Los ficheros javascript que forman la librería están distribuidos en las siguientes
carpetas:
• javascript
• jquery
• css. Contiene todos los CSS e imágenes de las que hace uso
jQuery
• libs
• jquery-1.8.2.min.js: Fichero javascript que
corresponde a la versión de producción de jQuery 1.8.2.
Este fichero es importado por Mapea-desarrollo.js
• jquery-ui-1.8.23.custom.min.js: Fichero javascript
que corresponde a la versión de producción de jQuery-
UI 1.8.23. Este fichero es importado por Mapea-
desarrollo.js
• javascriptVisor
• Mapea. Extensión de OpenLayers, que extiende o modifica su
funcionalidad. Esta carpeta, que presenta la misma estructura que
OpenLayers, contiene todas aquellas clases de la API de OpenLayers
que han sido modificadas o extendidas para adaptar su funcionalidad a
los requisitos de Mapea. Dentro de esta estructura, cobran especial
importancia los siguientes ficheros:
Página 51 de 74

MAPEA
• Mapea.js: Fichero javascript para su importación en proyectos que
utilicen el modelo de objetos. Este fichero javascript se encarga de
importar las siguientes librerías (en el orden que se muestran):
• OpenLayers.js
• deprecated.js
• Mapea-compressed.js / Mapea-mobile.js
El fichero Mapea.js detecta si el dispositivo es un PC, por lo que
cargará el fichero Mapea-compressed.js o si es un dispositivo móvil,
en este caso cargará el script Mapea-mobile.js. Este fichero NO debe
usarse para desarrollo ya que los archivos que importa están
comprimidos.
• Mapea-compressed.js: Librería completa y comprimida del
componente Mapea que contiene todos las clases desarrolladas y
extendidas de OpenLayers.
• Mapea-mobile.js: Librería de Mapea limitada con funcionalidades
para dispositivos móviles o tablets. Para más información sobre esta
versión ver el apartado 5.4 Mapea mobile
• Mapea-desarrollo.js: Librería de Mapea para facilitar la depuración
y el desarrollo de nuevas funcionalidades. Esta librería se encarga
de importar los siguientes ficheros (en el orden que se especifican):
• lib/Mapea.js: Librería que se encarga de importar todas las
clases implicadas en la funcionalidad de Mapea.
• OpenLayers/lib/deprecated.js
• OpenLayers/lib/OpenLayers.js
• Configuration.js: Fichero que define todas las variables de
configuración de las que hace uso Mapea (ver 5.2 Configuración
base).
• lib/SigcMapea.js: Librería que pose toda la API ofrecida por Mapea
javascript. Este fichero es importado por Mapea-desarrollo.js
• OpenLayers. Librería Javascript de código abierto que permite
construir aplicaciones web que permiten cargar y visualizar mapas
desde diferentes orígenes de datos. En esta estructura cabe destacar
los ficheros:
• OpenLayers.js: Fichero importado por Mapea.js y que supone la
librería completa y comprimida de OpenLayers.
• lib/OpenLayers.js: Fichero importado por Mapea-desarrollo.js que
importa, a su vez, todas las clases que componen OpenLayers sin
comprimir.
• lib/deprecated.js: Fichero que posee aquellas funcionalidades y
Página 52 de 74

MAPEA
características obsoletas en la versión OpenLayers 2.12. Este
archivo es necesario para Mapea ya que parte de su funcionalidad
está basada en la versión OpenLayers 2.8.
Página 53 de 74

MAPEA
5.2 Configuración base
En el fichero Mapea/Configuration.js vienen configurados los parámetros
necesarios para el correcto funcionamiento de Mapea.
Contextos de Mapas
Mapea permite crear visualizadores cuyos mapas vienen definidos en un fichero
xml bajo el estándar Web Map Context. A estos ficheros los llamamos contextos
de mapas. La url en la que estén publicados dichos ficheros pueden especificarse
en tiempo de construcción del mapa de dos formas diferentes:
1. Explícitamente:
sigcMap.addWmcfiles(['http://<url_contexto>*<nombre_contexto>']);
2. A través de un identificador. Esto es más cómodo si vamos a usar un
contexto de mapas varias veces. Podemos asignar un identificador a los
archivos WMC predeterminados en el archivo Configuration.js:
/**
* Parametros de los contextos WMC
*/
contexts : "nombre1,nombre2,...,nombreN",
/**
* URL de los archivos WMC correspondientes a los distintos contextos
*/
contextsUrl : "url1,url2,...,urlN",
/**
* Titulos de los correspondientes contextos
*/
contextsTitle : "titulo1,titulo2,...,tituloN",
Estos tres atributos indican el nombre con el que identificaremos los contextos a
la hora de añadirlos al mapa, las urls donde se encuentran publicados, y los
nombres con los que queremos que se identifiquen en el visualizador.
Por defecto, el fichero ya viene configurado con cinco contextos de mapas:
callejero, ortofoto, idea, ortofoto09 y callejerocacheado.
Servicios web del Callejero
Para indicar la url del Servicio Web utilizado para realizar los distintos tipos de
búsqueda contra el Callejero Digital de Andalucía, hay que modificar el atributo:
callejeroWSUrl: '<url>/CallejeroWS/services/callejero?wsdl',
Por defecto, el fichero ya viene configurado con la url pública del Servicio.
Página 54 de 74

MAPEA
Servicios de búsquedas de Geobúsqueda
Para indicar la url del Servicio de Geobúsqueda hay que modificar el atributo:
geosearchUrl: 'http://geobuscador-sigc.juntadeandalucia.es',
Por defecto, el fichero ya viene configurado con la url pública del Servicio.
Página 55 de 74

MAPEA
5.3 Compresión de ficheros javascript
En muchas ocasiones, el número de ficheros javascript que se importan en una
página web junto con la suma total de su peso ralentizan la carga de la página.
Para paliar este efecto, existen herramientas que “comprimen” y “ofuscan” los
ficheros javascript.
Estas herramientas analizan el código y aplican una serie de pasos , tales como
eliminar espacios en blanco, renombrar nombre de variables largas a más cortas,
simplificar instrucciones iterativas o condicionales, etc. con el fin de reducir el
fichero javascript y así aligerar la carga de la página.
En el caso en que hayamos modificado o desarrollado nuevas funcionalidades a
partir de la API javascript de Mapea, es recomendable comprimir los archivos
haciendo uso de una de estas herramientas para minimizar el impacto de todo el
javascript importado sobre la página web.
Imaginemos que, durante nuestro desarrollo, hemos generado 4 nuevos ficheros
javascript:
• fichero1.js
• fichero2.js
• fichero3.js
• fichero4.js
Primero, debemos unificar en un mismo fichero todos los ficheros javascript de
forma que nos evitemos realizar numerosas peticiones de recursos desde el
navegador (una petición por cada fichero javascript necesario). Es muy
importante unificar los ficheros javascript en el mismo orden que son importados
en la página web. Para realizar esta acción basta con hacer uso de una de las
numerosas herramientas de gestión y manipulación de ficheros de texto, en
nuestro caso, hacemos uso del propio comando de Linux “cat”:
$ cat fichero1.js fichero2.js fichero3.js fichero4.js > fichero_unificado.js
Al ejecutar el comando anterior tendremos los cuatro ficheros anteriores en un
único fichero llamado “fichero_unificado”. De esta forma, hemos reducido el
número de peticiones de recursos de cuatro (uno por cada fichero) a una única
petición (la petición de fichero_unificado).
Sin embargo, como es de esperar, el peso del fichero resultante de la unión es la
suma de los pesos de los ficheros de los que está compuesto.
Para reducir su peso, comprimiremos y ofuscaremos su código haciendo uso de la
herramienta yui-comressor (http://yui.github.io/yuicompressor/).
Tras obtener la última versión desde su página de descarga
(https://github.com/yui/yuicompressor/downloads), descomprimimos su
contenido y ejecutamos el siguiente comando java:
Página 56 de 74

MAPEA
$java -jar <directorio>/build/yuicompressor-x.y.z.jar fichero_unificado.js -o
fichero_comprimido.js
De esta forma se genera un fichero llamado “fichero_comprimido” cuyo peso es
menor al peso de “fichero_unificado”. Este fichero contiene todo el código
javascript de “fichero_unificado”, pero comprimido y ofuscado listo para ser
importado en la página web.
5.4 Mapea mobile
Esta librería posee un subconjunto de funcionalidades de Mapea que cubre, de
forma general, los casos de usos comunes en aplicaciones web visualizadas a
través de algún dispositivo smartphone o tablet.
Las diferencias, respecto a la versión PC son:
1. Únicamente posee las siguientes operaciones de búsqueda:
• autocompletarDireccion
• buscarCallejero
2. No posee los siguientes controles:
• OverviewMap
• PanZoom
• PanZoomBar
• Mouse
Página 57 de 74

MAPEA
6 Desarrollo de estilos para Mapea
El siguiente punto se expone como guía para facilitar al desarrollador la creación
de un estilo personalizado para Mapea.
6.1 Establecer el directorio del estilo
Lo primero será establecer un directorio que contendrá los archivos de estilos, el
cual deberá ser accesible por Mapea. Este directorio se especificará en el
parámetro theme (para más información ver el Manual de Usuario). Como
ejemplo se usará el siguiente directorio publicado y, por tanto, accesible por
Mapea:
http://miservidor/midirectorio/estilos/personalizado
El contenido del directorio debe ser el siguiente:
style.css – Hoja de estilo principal donde se definen todas las reglas de estilo de
Mapea.
• images – Carpeta que contiene el conjunto de imágenes usadas por
Mapea.
• datatable – Carpeta que contiene las imágenes del componente
tabla para buscadores del callejero.
• loadings – Carpeta que posee los gifs que se muestran tras realizar
peticiones como búsquedas, consultas de información o al guardar la
capa WFS.
• panels – Carpeta que contiene las imágenes usadas por los paneles
y por las herramientas de los mismos.
Página 58 de 74

MAPEA
• popup – Carpeta que contiene las imágenes relacionadas con los
popups que se muestran en Mapea.
• search – Carpeta que posee las imágenes usadas en el componente
buscador.
• jquery – Carpeta que contiene los archivos de estilos de jQuery UI en
Mapea.
• jquery.css – Hoja de estilo de jQuery UI (se recomienda usar la
comprimida).
• images – Carpeta de imágenes que nos provee jQuery UI.
6.2 Estilo de Mapea
Con el proyecto se provee una plantilla de estilo desde la cual puede partir como
base y que puede copiar y modificar tantas veces como desee crear un estilo
personalizado:
http://<url_mapea>/Componente/javascriptVisor/Mapea/theme/template
Para modificar los estilos e iconos de Mapea se debe modificar el fichero style.css
y las imágenes contenidas en la carpeta images.
A continuación, se muestran algunos ejemplos de funcionalidades de Mapea
modificadas.
• Barra de herramientas general
default
.left-panel {
position: absolute;
top: 0;
z-index: 1010;
opacity: .95;
float: left;
color: #333;
[2]box-shadow: 0 1px 2px rgba(0, 0, 0,
0.3);
[3]background:
url("images/panels/p1.png") center right;
[3]background-repeat: no-repeat;
cursor: auto;
display: block;
font: 12px/1.5 'Helvetica Neue',
Helvetica, Arial, sans-serif;
overflow: hidden;
z-index: 9999;
max-width: 50%;
margin-left: 0px;
padding-right: 0px;
[1]-webkit-transition: margin-left 0.5s;
classic
.left-panel {
position: absolute;
top: 0;
z-index: 1010;
opacity: .95;
float: left;
color: #333;
cursor: auto;
display: block;
font: 12px/1.5 'Helvetica Neue',
Helvetica, Arial, sans-serif;
overflow: hidden;
z-index: 9999;
max-width: 50%;
margin-left: 0px;
padding-right: 0px;
}
[1] Se elimina las animaciones
[2] Se elimina las sombras del panel de la
herramienta
[3] Se elimina el fondo de la herramienta para
Página 59 de 74

MAPEA
[1]-moz-transition: margin-left 0.5s;
[1]-o-transition: margin-left 0.5s;
[1]transition: margin-left 0.5s;
}
hacerla transparente
• Leyenda
default
.mapea-layerswitcher-layerdiv span, .mapea-
layerswitcher-layerdiv div {
color: #383d44;
}
dark
.mapea-layerswitcher-layerdiv span, .mapea-
layerswitcher-layerdiv div {
[1]color: #FCFCFC;
}
[1] Se establece un color más claro a las
fuentes del control
Nota: El fondo del control LayerSwitcher se ha modificado mediante la imagen
background.png en la carpeta <tema>/images
Página 60 de 74

MAPEA
• Herramientas de mapa
default
.MapeaControlScale {
right: 3px;
bottom: 2em;
display: block;
position: absolute;
font-family: 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: smaller;
color: blue;
background-color: rgba(255, 255, 255,
0.7)
} div.MapeaControlScale {
margin: 0;
[1]box-shadow: 0 1px 2px rgba(0, 0, 0,
0.3);
background: url("images/background.png")
top right;
[3]padding: 5px;
right: 0;
[2]color: #8c0095;
font-weight: bold;
}
classic
.MapeaControlScale {
bottom: 2em;
display: block;
position: absolute;
font-family: 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: smaller;
color: blue;
background-color: rgba(255, 255, 255, 0.7)
} div.MapeaControlScale {
margin: 0;
background: url("images/background.png")
top right;
right: 0;
font-weight: bold;
}
[1] Se elimina las sombras del panel
[2] Se elimina el color morado dejando el azul
establecido
[3] Se elimina el padding a la derecha sobre
el panel
! Importante: Los archivos CSS style.css y jquery.css suministrados en la plantilla
están sin comprimir lo que repercutirá negativamente en el tiempo de carga en Mapea.
Se recomienda, una vez finalizadas y validadas las modificaciones realizadas sobre
dichos ficheros, comprimirlos haciendo uso de una herramienta de compresión tal como
se indica en el apartado 5.3 Compresión de ficheros javascript
Página 61 de 74

MAPEA
6.3 Estilo jQuery UI
En Mapea se hace uso de jQuery UI para varios componentes como puede ser los
diálogos o el autocompletador de calles.
Por ejemplo, a través de la modificación de estos estilos el usuario puede
personalizar los diálogos mostrados en Mapea:
Así mismo, puede modificar el estilo del autocompletador (fuente, colores,
fondos, etc):
Como ayuda para la modificación de los estilos de jQuery UI se puede utilizar el
asistente de estilos suministrado por jQuery e incorporar el estilo en Mapea. Para
ello se deben seguir los siguientes pasos:
1. Definir el estilo base en http://jqueryui.com/themeroller/
2. Descargar el archivo jquery-ui-<version>.zip que contiene los archivos de
estilo definidos.
3. Descomprimir el contenido correspondiente a los estilos, esto es, la
carpeta images , el archivo jquery-ui-<version>.custom.css y el archivo
jquery-ui-<version>.custom.min.css
4. Si se desea modificar el estilo base definido en el paso 1 para tener más
control sobre el look&feel, es aconsejable hacer uso del archivo jquery-ui-
<version>.custom.css ya que no se encuentra comprimido y facilita su
lectura y modificación. Si por el contrario, no se desea modificar el estilo
base establecido en el paso 1 haremos uso del archivo jquery-ui-
<version>.custom.min.css.
5. Copiar la carpeta images que se descomprimió en el paso 3 en la carpeta
Página 62 de 74

MAPEA
jquery del directorio de estilo que se estableció:
http://miservidor/midirectorio/estilos/personalizado/jquery/images
6. Copiar el archivo que se seleccionó en el paso 4 en la carpeta jquery y
renombrarlo a jquery:
http://miservidor/midirectorio/estilos/personalizado/jquery/jquery.css
7. Si se seleccionó el archivo jquery-ui-<version>.custom.css para modificar el estilo
base, se puede hacer uso de la guía de desarrollo de temas de jQuery UI
http://api.jqueryui.com/category/theming/ como ayuda. El inconveniente de usar el
archivo sin comprimir jquery-ui-<version>.custom.css es que posee un tamaño
mayor que el comprimido repercutiendo directamente sobre los tiempos de carga
de Mapea. Para minimizar el impacto y una vez que se haya terminado con la
edición del archivo, se puede comprimir haciendo uso de herramientas de
compresión tal como se comenta en el punto 5.3 Compresión de ficheros
javascript
Página 63 de 74

MAPEA
7 ANEXO
7.1 Capa Geosearch
Para un usuario que quiera consumir las búsquedas de Geobusquedas y
representar los resultados en su mapa, además del método geosearch disponible
en la API de Mapea javascript, se proporciona una capa especial denominada
Geosearch que facilitar dicha tarea al usuario.
Dicha capa está basada en las capas Vector de OpenLayers y ofrece una API para
poder realizar y configurar búsquedas en Geobusqueda.
7.1.1 Ejemplos de uso
Imaginamos el caso en el que un usuario desea realizar la búsqueda “universidad
Pablo de Olavide” sobre el core denominado “core01” en Geobusqueda haciendo
uso de su manejador mapeado a la ruta “/search”.
Ejecutando esta búsqueda de la API REST de Geobusqueda sería:
http://geobusquedas-sigc.juntadeandalucia.es/core1/search?
q=universidad+Pablo+de+Olavide&wt=json
Si quisiéramos realizar esa búsqueda haciendo uso del método geosearch del API
javascript de Mapea y luego representar los resultados en una capa vector sobre
el mapa de nuestra aplicación los pasos serían:
// 1. creamos el objeto de Mapea
div: 'divMap',
proxyHost: './proxy',
controls: ['navtoolbar','layerswitcher']
});
/*
* 2. definimos la funcion que procesa
* los resultados devueltos y los ayade
* en una capa vector:
* 2.1 creamos una capa vector
* 2.2 cada resultado lo parseamos
* a un Feature Vector de OpenLayers
* y lo añadimos a la capa
* …
* [numerosos pasos]
*/
function procesaResultados(resultados) {
…
}
// 3. ejecutamos la busqueda
Página 64 de 74

MAPEA
sigcMap.geosearch("universidad Pablo de Olavide", "http://geobusquedas-
sigc.juntadeandalucia.es/core1/search", procesaResultados);
Como se puede observar, todo el peso y complejidad del código está en la
función procesaResultados (paso 2), y será responsabilidad del usuario el
elaborar y probar dicha función.
Sin embargo, si hacemos uso de la capa Geosearch, toda esta tarea se simplifica
de cara el usuario:
// 1. creamos el objeto de Mapea
div: 'divMap',
proxyHost: './proxy',
controls: ['navtoolbar','layerswitcher']
});
/*
* 2. creamos una capa Geosearch apuntando
* al core "core01" de Geobusqueda y al
* manejador "/search" de dicho core
*/
var geosearchLayer = new Mapea.Layer.Geosearch({
geosearchUrl: "http://geobusquedas-
sigc.juntadeandalucia.es/core1/search"
});
/*
* 3. obtenemos el mapa de OpenLayers
* y le ayadimos la capa Geosearch
*/
var mapaOL = sigcMap.getOlmap();
mapaOL.addLayer(geosearchLayer);
// 4. ejecutamos la busqueda
geosearchLayer.search("universidad Pablo de Olavide");
Página 65 de 74

MAPEA
7.1.2 API
Para un uso más avanzado de la capa, se expone a continuación la API. Hay que
tener en cuenta que Mapea.Layer.Geosearch hereda de Mapea.Layer.Vector que
a su vez hereda de OpenLayers.Layer.Vector por lo que posee todos los atributos
y métodos de éstos.
constructor
Descripción Constructor de la capa Mapea.Layer.Geosearch
Parámetro
Entrada
Tipo Descripción
config Object
Obligatorio. Objeto con las propiedades
de configuración de la capa. Éstas son:
geosearchUrl: Url de la instancia de
Geobúsquedas.
requestHandler: Manejador de la
petición de búsqueda.
core: Core sobre el que realizar la
búsqueda.
geoFieldName: Nombre del campo
geométrico de los documentos. El valor
por defecto es “geom”.
WKTReader: Objeto
OpenLayers.Format.WKT usado para
parsear los WKT de las geometrías.
hiddenFields: Array con los nombres
de los campos que NO se desean mostrar
en el popup de los features.
areaFieldName: Nombre del campo de
referencia de los documentos usados
como filtro espacial. El valor por defecto es
"reference".
centerIconStyle: Estilo del feature que
es usado como chincheta en el mapa.
newCenterIconStyle: Estilo del
feature usado como chincheta para
representar los nuevos resultados
obtenidos tras realizar una nueva petición.
resultStyle: Estilo de las geometrías de
los resultados de la búsqueda.
newResultStyle: Estilo de las
geometrías de los nuevos resultados
paginados de la búsqueda.
referenceStyle : Estilo de las
Página 66 de 74

MAPEA
geometrías de los resultados usados como
filtros espaciales.
areaStyle : Estilo de las geometrías de
las áreas que se han usado en los filtros
espaciales.
selectFeatureControl:
Mapea.Control.SelectFeature que
gestiona los eventos click sobre los
features de la capa
options String
Opcional. Opciones que recibe el
constructor de la capa
OpenLayers.Layer.Vector
Ejemplo: Creamos una capa para ejecutar búsquedas en el core "core01" de
Geobusqueda con el manejador "/search" donde indicamos que no queremos mostrar los
campos "_version_", "solrid", "keywords", "geom" y "score" de los documentos devueltos.
Le indicamos un estilo propio para los nuevos resultados que se obtengan, además, le
ponemos a la capa el nombre de "Resultados".
requestHandler: "/search",
core: "core01",
hiddenFields: ["_version_", "solrid", "keywords", "geom", "score"],
newCenterIconStyle: OpenLayers.Util.applyDefaults({
externalGraphic: "http://<url_imagen>/newPointer48.png",
graphicWidth: 48,
graphicHeight: 48,
graphicXOffset: -23,
graphicYOffset: -45,
graphicOpacity: 1,
cursor: "pointer"
},
OpenLayers.Feature.Vector.style["default"])
},
{ name: "Resultados" });
Nota: Para mantener la retrocompatibilidad con versiones anteriores, existen tres formas
de establecer una instancia de Geobúsquedas sobre la que realizar búsquedas:
a) Especificando la url completa (incluyendo core y manejador):
geosearchUrl: "http://geobusquedas-
sigc.juntadeandalucia.es/core01/search"
});
Página 67 de 74

MAPEA
b) Especificando por un lado la url con el core y por otro el manejador:
geosearchUrl: "http://geobusquedas-sigc.juntadeandalucia.es/core01",
requestHandler: "/search"
});
c) Especificando por un lado la url y por otro el core y el manejador:
geosearchUrl: "http://geobusquedas-sigc.juntadeandalucia.es",
core: "core01",
requestHandler: "/search"
});
Página 68 de 74

MAPEA
search
Descripción
Función para realizar búsquedas sobre la capa Geosearch
consumiendo el servicio REST de GeoBúsquedas.
Parámetro
Entrada
Tipo Descripción
userParams Object
String Obligatorio. Objeto con los parámetros
que soporta la aplicación Geobusqueda o
un String que representa la cadena de
búsqueda a ejecutar.
Para consultar la lista completa de los
parámetros disponibles consulte el manual
de usuario de GeoBúsquedas. A
continuación, se muestran los más
habituales:
Parámetro Descripción
q: Cadena de
búsqueda.
rows: Controla la cantidad
de filas o resultados
a mostrar en una
consulta. Por
defecto es 10.
start: Indica el número a
partir del cual
GeoBusquedas
empezará a mostrar
los resultados. Por
defecto es 0.
threshold: Umbral que se
aplicará sobre los
resultados. Su valor
oscila entre 0 y 1 y
siempre es relativo
al score máximo
calculado por
Lucene. 0 indica
cualquier resultado
y 1 aquellos que
tengan el máximo
score.
srs: Código CRS que
indica la proyección
en la que se desa
obtener los
Página 69 de 74

MAPEA
resultados
geométricos de la
consulta
callbackSucce
ss
function
vez que finalice la búsqueda y cuyo
por la misma.
callbackError function
Opcional. Función que será ejecutada si
hubo algún error en la ejecución de la
búsqueda.
appendResults boolean
Opcional. Este parámetro indica si los
resultados obtenidos de la búsquedas se
añadirán sobre los resultados ya
mostrados en la capa.
• Si el valor es false, se reinician los
atributos de la capa
Mapea.Layer.Geosearch y se realiza
la búsqueda. Los resultados se
mostrarán sobre la capa.
• Si el valor es true, no se reinician
los atributos de la capa
Mapea.Layer.Geosearch,
manteniéndose los valores
establecidos en la primera
búsqueda. Los resultados se
adjuntan a los obtenidos
previamente y les aplicará el estilo
de nuevo resultados (atributos
NewCenterIconStyle y
newResultStyle).
Por tanto, a la hora de realizar una
búsqueda es necesario que la primera
llamada al método search se realice con el
valor de appendResults a false para
establecer todos los atributos de la capa.
Parámetro
Salida
Tipo Descripción
- - -
Página 70 de 74

MAPEA
Ejemplo 1: Realizamos la búsqueda "universidad de sevilla":
geosearchLayer.search("universidad de sevilla");
Ejemplo 2: Realizamos otra búsqueda "universidad de sevilla" indicando a la función que
muestre los 25 resultados desde el documento 10 y con un umbral de 0.8. Cuando se
complete la búsqueda, además de mostrar los resultados sobre el mapa, vamos a
mostrar por consola las geometrías y, en caso de error, mostraremos un mensaje de
alerta:
// funcion que muestra las coordenadas de los resultados
function muestraGeometrias(respuestaGeosearch) {
var respuestaEspacial = respuestaGeosearch.spatial_response;
var documentos = respuestaEspacial.docs;
for (var i=0,len= documentos.length; i<len; i++) {
var documento = documentos[i];
console.log(documento.geom);
}
}
// procedimiento que muestra un mensaje de error
function muestraError() {
window.alert("Ha ocurrido un error");
}
// realizamos la busqueda
geosearchLayer.search({
q: "universidad de sevilla",
start: 10,
rows: 25,
threshold: 0.8
}, muestraGeometrias, muestraError, false);
Ejemplo 3: Realizamos otra búsqueda "universidad de sevilla" paginada. Para ello,
primero se realiza una búsqueda de los 15 primeros documentos. A continuación, se
realiza una segunda búsqueda en la que se adjuntan los 5 resultados siguientes . Por
tanto se mostrarán los resultados del 0 al 19.
// Búsqueda de los primeros 15 resultados
rows: 15,
start: 0 //pedimos los resultados del 0 al 14
}, muestraResultados, muestraError, false);
// Búsqueda de los siguientes 5 resultados
rows: 5,
Página 71 de 74

MAPEA
start: 15 //pedimos los resultados del 15 al 19
}, muestraResultados, muestraError, true);
hasSpatialResults
Descripción
Método que indica si la búsqueda espacial ha devuelto
resultados
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
result boolean
True si la búsqueda ha devuelto resultados
para una búsqueda espacial y false en
caso contrario
Ejemplo: Mostramos un mensaje de alerta en función de si la capa posee resultados
obtenidos de una búsqueda espacial o no:
if (geosearchLayer.hasSpatialResults()) {
window.alert("La búsqueda ha devuelto resultados espaciales");
}
else {
window.alert("La capa NO posee resultados espaciales");
}
hideReferences
Descripción
Método que oculta, en caso de que hubiesen, los features
usados como referencia en los filtros espaciales de las
búsquedas.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
- - -
Ejemplo:
geosearchLayer.hideReferences();
Página 72 de 74

MAPEA
showReferences
Descripción
Método que muestra, en caso de que hubiesen, los features
usados como referencia en los filtros espaciales de las
búsquedas.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
- - -
Ejemplo:
geosearchLayer.showReferences();
getResultsBbox
Descripción Obtiene el BBOX resultante de todos los resultados de la capa.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
bbox
OpenLayers.Bound
s
BBOX resultante de la geometrías de todos
los resultados
Ejemplo: Centramos el mapa en los resultados obtenidos
// obtenemos el bbox de los resultados
var bbox = geosearchLayer.getResultsBbox();
// obtenemos el mapa de OpenLayers
var mapOL = sigcMap.getOlmap();
// centramos el mapa en el bbox de los resultados
mapOL.zoomToExtent(bbox);
Página 73 de 74

MAPEA
clear
Descripción
Método para limpiar la capa. Elimina todos los features y
reinicia algunos atributos internos.
Parámetro
Entrada
Tipo Descripción
- - -
Parámetro
Salida
Tipo Descripción
- - -
Ejemplo:
geosearchLayer.clear();
Página 74 de 74

MAPEA Javascript - Manual de desarrollador

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (20)

Similar a MAPEA Javascript - Manual de desarrollador

Similar a MAPEA Javascript - Manual de desarrollador (20)

Último

Último (7)

MAPEA Javascript - Manual de desarrollador