MAPEA Javascript - Manual de desarrollador

448 visualizaciones

Publicado el

Documentación de desarrollo (modelo de objetos, funcionalidad, etc) del API para el desarrollo de aplicaciones de webmapping de la Junta de Andalucía MAPEA, en su versión javascript

Publicado en: Internet
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
448
En SlideShare
0
De insertados
0
Número de insertados
15
Acciones
Compartido
0
Descargas
12
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

MAPEA Javascript - Manual de desarrollador

  1. 1. 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.
  2. 2. MAPEA Manual de Integración 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
  3. 3. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública Í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
  4. 4. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  5. 5. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  6. 6. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  7. 7. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  8. 8. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  9. 9. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  10. 10. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  11. 11. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  12. 12. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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.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
  13. 13. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  14. 14. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  15. 15. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública • 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
  16. 16. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  17. 17. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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: · 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: [aplicación]/src/main/webapp/Componente/javascr iptVisor/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
  18. 18. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  19. 19. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  20. 20. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  21. 21. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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
  22. 22. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  23. 23. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  24. 24. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  25. 25. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  26. 26. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  27. 27. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  28. 28. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  29. 29. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  30. 30. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  31. 31. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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 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. Parámetro Salida Tipo Descripción arrayRoadsTy pe 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
  32. 32. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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 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. Parámetro Salida Tipo Descripción arrayLocFrom Prov 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
  33. 33. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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 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
  34. 34. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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ó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 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 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. Página 34 de 74
  35. 35. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  36. 36. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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 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. projection String Opcional. Código de la proyección en la cuál se desea obtener los resultados. 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: 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
  37. 37. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 Cadena para realizar la búsqueda de núcleos de población coincidentes. codProv String Código de la provincia del municipio. 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 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. projection String Opcional. Código de la proyección en la cuál se desea obtener los resultados. 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
  38. 38. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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ó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 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 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 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. projection String Opcional. Código de la proyección en la cuál se desea obtener los resultados. Parámetro Salida Tipo Descripción arrayService Array(servicio) Array formado por los servicios devueltos por la búsqueda realizada. Página 38 de 74
  39. 39. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  40. 40. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 Cadena para realizar la búsqueda de carreteras coincidentes. pk String Punto kilométrico. 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 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. projection String Opcional. Código de la proyección en la cuál se desea obtener los resultados. Parámetro Salida Tipo Descripción 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
  41. 41. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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 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 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 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
  42. 42. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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”. Parámetro Entrada Tipo Descripción cadena String Cadena para realizar la búsqueda. 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 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 String Opcional. Código INE del municipio sobre el cual quiere realizarse la operación de búsqueda. projection String Opcional. Código de la proyección en la cuál se desea obtener los resultados. Parámetro Salida Tipo Descripción Página 42 de 74
  43. 43. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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”: 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
  44. 44. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 parámetro será los resultados devueltos por Geobusquedas en formato JSON. Página 44 de 74
  45. 45. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  46. 46. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  47. 47. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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','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
  48. 48. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  49. 49. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  50. 50. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública sigcMap.removeEventHandler('click'); Página 50 de 74
  51. 51. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  52. 52. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública • 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
  53. 53. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  54. 54. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  55. 55. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  56. 56. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  57. 57. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública $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
  58. 58. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  59. 59. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública • 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
  60. 60. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública [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
  61. 61. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública • 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
  62. 62. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  63. 63. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  64. 64. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 var 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
  65. 65. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 var 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 busqueda geosearchLayer.search("universidad Pablo de Olavide"); Página 65 de 74
  66. 66. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  67. 67. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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". 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
  68. 68. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  69. 69. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  70. 70. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública resultados geométricos de la consulta callbackSucce ss 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 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
  71. 71. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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 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
  72. 72. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  73. 73. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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
  74. 74. MAPEA Manual de Integración Consejería de Hacienda y Administración Pública 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

×