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

Manual de IntegraciónConsejerí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 CambioFecha 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,4048342&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

http://www.juntadeandalucia.es/servicios/mapas/mapea/Componente/templateMapeaOL.jsp?layers=WMS*OCA10_2010*http://www.ideandalucia.es/wms/ortofoto2010?*OCA10_2010*FALSE*false&controls=panzoombar,navtoolbar&center=204711,4048342&zoom=7



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,4048342&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 pasosUna 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 mapaPrimero, 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.

var sigcMap = new Mapea.SigcMapea({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):

var sigcMap = new Mapea.SigcMapea({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.js"></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

divDOMElementString

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)

wmcfileArray(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/javascriptVisor/Mapea/lib/Mapea/SigcMapea.jsy modificamos los valores de:

· contexto· url· title

tal como se hacía en Mapea.

layersArray(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*nombre_capa*transparencia*tileado'

· Capa KML:'KML*nombre_capa_leyenda_capa*url_servicio_capa*nombre_capa_capa*extraer_atributos_capa'

· Capa WFS:'WFST*nombre_capa_leyenda_capa*url_servicio_capa*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.

zoomIntege

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 StringOpcional. 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 StringOpcional. 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:[aplicación]/src/main/webapp/Componente/javascriptVisor/Mapea/lib/Mapea/SigcMapea.js

y modificamos los valores de:

· strDefinedThemes· strDefinedThemesUrl

tal como se hace en Mapea.

printer String Opcional Especificamos la URL del servicio de impresión MapFish que queramos hacer uso.

geosearchbylocation

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:

[aplicación]/src/main/webapp/Componente/javascriptVisor/Mapea/lib/Mapea/SigcMapea.js

y modificamos los valores de:

· 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

var sigcMap = new Mapea.SigcMapea({ 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.


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ónFunció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.


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/mapConfig/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 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 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.


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 Obligatorio. Coordenada x de la esquina superior derecha del bbox.

ymax Float Obligatorio. Coordenada x de la esquina 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).


x Float Obligatorio. Coordenada x del centro.

y Float Obligatorio. Coordenada y del centro

zoom Integer Opcional. Nivel de zoom para aplicar.

drawPin booleanOpcional. 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.


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 StringObligatorio. 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/OpenLayers/Map-js.html#OpenLayers.Map.events

callback_function 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

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.events



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

http://geobusquedas-sigc.juntadeandalucia.es/sigc/search



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

printServiceURL 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/data/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




http://geoext.org/lib/GeoExt/data/PrintPage.html

http://geoext.org/lib/GeoExt/data/PrintPage.html

MAPEA



3.2.18 getServiceType

getServiceType

DescripciónFunció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”.


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

arrayServicesType 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ónFunció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”.


callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayRoadsType.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.


arrayRoadsType Array(String) Array formado por los tipos de vías

disponibles.

Ejemplo: el siguiente código muestra, por la consola javascript del navegador, los distintos tipos de vía:FORMA ASÍNCRONA (recomendada)function muestraTiposvia(tipos) { for (var i=0,len=tipos.length; i<len; i++) { var tipo = tipos[i]; console.log(tipo); } }sigcMap.getRoadType(muestraTiposvia);

FORMA SÍNCRONA (NO recomendada)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


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayLocFromProv.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.


arrayLocFromProv Array(municipio) Array formado por los municipios de la

provincia indicada.

Ejemplo: el siguiente código muestra, por la consola javascript del navegador, los nombres de los distintos municipios de Sevilla (cod 41):FORMA ASÍNCRONA (recomendada)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);

FORMA SÍNCRONA (NO recomendada)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ónFunció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”.


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


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayStreet.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.

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:FORMA ASÍNCRONA (recomendada)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



FORMA SÍNCRONA (NO recomendada)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", null, "EPSG:4326");var addresses = sigcMap.arrayStreet;muestraCoordenadas(addresses);

3.2.22 searchStreetLocProv

searchStreetLocProv

DescripciónFunció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


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayStreet.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

arrayStreet Array(address) Array formado las direcciones devueltas por la búsqueda realizada.

Página 34 de 74

MAPEA



Ejemplo: el siguiente código muestra un mensaje con las coordenadas en EPSG:4326 del portal número 2 de la calle sierpes:FORMA ASÍNCRONA (recomendada)function muestraCoordenadas(addresses) { var address = addresses[0]; var coordenadaX = address.coordX; var coordenadaY = address.coordY; window.alert(coordenadaX + ", " + coordenadaY); }sigcMap.searchStreetLocProv("calle", "sierpes", "2", "sevilla", "sevilla", muestraCoordenadas, "EPSG:4326");

FORMA SÍNCRONA (NO recomendada)function muestraCoordenadas(addresses) { var address = addresses[0]; var coordenadaX = address.coordX; var coordenadaY = address.coordY; window.alert(coordenadaX + ", " + coordenadaY); }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”.


cadena String Cadena para realizar la búsqueda de núcleos de población coincidentes.

callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayLocality.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.



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:FORMA ASÍNCRONA (recomendada)function muestraExtension(localities) { var locality = localities[0]; var extension = locality.extent; window.alert(extension); }sigcMap.searchLocality("rota", muestraExtension, "EPSG:4326");

FORMA SÍNCRONA (NO recomendada)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ónFunció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 Cadena para realizar la búsqueda de núcleos de población coincidentes.

codProv String Código de la provincia del municipio.

callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayOu.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

arrayOu Array(sede) Array formado por los organismos devueltos por la búsqueda realizada.

Ejemplo: el siguiente código muestra, por la consola javascript del navegador, los nombres de las distintas sedes de “empleo” en Sevilla:FORMA ASÍNCRONA (recomendada)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



FORMA SÍNCRONA (NO recomendada)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ónFunció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

Cadena para realizar la búsqueda de 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


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayServices.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.



arrayService Array(servicio) Array formado por los servicios devueltos por la búsqueda realizada.

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:FORMA ASÍNCRONA (recomendada)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");

FORMA SÍNCRONA (NO recomendada)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ónFunció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 Cadena para realizar la búsqueda de carreteras coincidentes.

pk String Punto kilométrico.

callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayRoads.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.



arrayRoad Array(road) Array formado por las carreteras devueltas por la búsqueda realizada.

Ejemplo: el siguiente código muestra un mensaje con las coordenadas en EPSG:4326 del kilómetro 100 de la A-92:FORMA ASÍNCRONA (recomendada)function muestraCoordenadas(roads) { var road = roads[0]; var coordenadaX = road.x; var coordenadaY = road.y; window.alert(coordenadaX + ", " + coordenadaY); }sigcMap.searchRoad("a-92", "100", muestraCoordenadas, "EPSG:4326");

FORMA SÍNCRONA (NO recomendada)function muestraCoordenadas(roads) { var road = roads[0]; var coordenadaX = road.x; var coordenadaY = road.y; window.alert(coordenadaX + ", " + coordenadaY); }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”.


cadena String Cadena para realizar el autocompletado.

limit intCantidad de resultados que se quieren obtener. -1 si se quieren obtener todos los resultados encontrados.

callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayAuto.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.

locality StringOpcional. Código INE del municipio sobre el cual quiere realizarse la operación de autocompletado.

Parámetro Salida

Tipo Descripción

arrayAutocompletados

Array(String) Array formado por las carreteras devueltas por la búsqueda realizada.

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):FORMA ASÍNCRONA (recomendada)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



FORMA SÍNCRONA (NO recomendada)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”.


cadena String Cadena para realizar la búsqueda.

callback function


Si este parámetro no se especifica se podrá acceder a los resultados mediante el array arrayBC.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.

locality StringOpcional. Código INE del municipio sobre el cual quiere realizarse la operación de búsqueda.



Página 42 de 74

MAPEA



arrayResultados

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”:FORMA ASÍNCRONA (recomendada)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);

FORMA SÍNCRONA (NO recomendada)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 ObjectString

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 parámetro será los resultados devueltos 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 ConsideracionesEl 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)

var sigcMap = new Mapea.SigcMapea({div: 'testDiv',projection: 'EPSG:23030*m',wmcfile:

['http://<url>/mapea/Componente/mapConfig/contextOrtofoto.xml*ortofoto','callejero'],

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_2005?*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

http://www.ideandalucia.es/wms/mta100v_2005

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

http://www.miserviciomapfish.com/pdf

MAPEA



sigcMap.removeEventHandler('click');

Página 50 de 74

MAPEA



5 Desarrollo con Mapea JavascriptEn 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 APILos 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ónbase).

• 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 baseEn 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 javascriptEn 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

https://github.com/yui/yuicompressor/downloads

http://yui.github.io/yuicompressor/

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 mobileEsta 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 MapeaEl 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 estiloLo 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 MapeaCon 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 UIEn 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

http://jqueryui.com/themeroller/

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 ficherosjavascript

Página 63 de 74

http://api.jqueryui.com/category/theming/

MAPEA



7 ANEXO

7.1 Capa GeosearchPara 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 usoImaginamos 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 Mapeavar sigcMap = new Mapea.SigcMapea({ 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

http://geobuscador-sigc.juntadeandalucia.es/core1/search?q=universidad+Pablo+de+Olavide&wt=json

http://geobuscador-sigc.juntadeandalucia.es/core1/search?q=universidad+Pablo+de+Olavide&wt=json

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 Mapeavar sigcMap = new Mapea.SigcMapea({ 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 busquedageosearchLayer.search("universidad Pablo de Olavide");

Página 65 de 74

MAPEA



7.1.2 APIPara 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 ObjectObligatorio . 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 StringOpcional. 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".

var geosearchLayer = new Mapea.Layer.Geosearch({ 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):

var geosearchLayer = new Mapea.Layer.Geosearch({ 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:

var geosearchLayer = new Mapea.Layer.Geosearch({geosearchUrl: "http://geobusquedas-sigc.juntadeandalucia.es/core01",requestHandler: "/search"

});

c) Especificando por un lado la url y por otro el core y el manejador:

var geosearchLayer = new Mapea.Layer.Geosearch({geosearchUrl: "http://geobusquedas-sigc.juntadeandalucia.es",core: "core01",requestHandler: "/search"

});

Página 68 de 74

http://geobusquedas-sigc.juntadeandalucia.es/

http://geobusquedas-sigc.juntadeandalucia.es/

MAPEA



search

Descripción Función para realizar búsquedas sobre la capa Geosearch consumiendo el servicio REST de GeoBúsquedas.


userParams ObjectString 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

callbackSuccess

function

Opcional. Función que será ejecutada una vez que finalice la búsqueda y cuyo parámetro será los resultados devueltos por la misma.

callbackError functionOpcional. 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.


- - -

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 resultadosfunction 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 errorfunction muestraError() { window.alert("Ha ocurrido un error");}

// realizamos la busquedageosearchLayer.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 geosearchLayer.search({ q: "universidad de sevilla", rows: 15, start: 0 //pedimos los resultados del 0 al 14 }, muestraResultados, muestraError, false);

// Búsqueda de los siguientes 5 resultados geosearchLayer.search({ q: "universidad de sevilla", 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 Salida

Tipo Descripción

result booleanTrue 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ónMé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

- - -


- - -

Ejemplo:

geosearchLayer.hideReferences();

Página 72 de 74

MAPEA



showReferences

DescripciónMétodo que muestra, en caso de que hubiesen, los features usados como referencia en los filtros espaciales de las búsquedas.


- - -

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 Salida

Tipo Descripción

bbox OpenLayers.Bounds

BBOX resultante de la geometrías de todos los resultados

Ejemplo: Centramos el mapa en los resultados obtenidos

// obtenemos el bbox de los resultadosvar bbox = geosearchLayer.getResultsBbox();

// obtenemos el mapa de OpenLayersvar mapOL = sigcMap.getOlmap();

// centramos el mapa en el bbox de los resultadosmapOL.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

- - -


- - -

Ejemplo:

geosearchLayer.clear();

Página 74 de 74

mapea javascript - manual de desarrollador

Internet