whereami

GIS programming
example menu Welcome page What is a Wiki Site? How to edit pages? How to join this site? Site members Recent changes List all pages Page Tags Site Manager Fold Table of Contents Introduccin Objetivos El lenguaje HTML La Web y el HTML Elementos y etiquetas Estructura mnima de un documento HTML Definicin del contenido Elementos estructurales Elementos de presentacin Elementos de hipertexto Google Maps Incorporar un mapa en una pgina La API de Google Maps Crear un mapa Crear el elemento que albergar el mapa Incluir la API de Google Maps Inicializar el mapa Llamar a la funcin de inicializacin Tipos de mapas Transformacin de coordenadas Situar un elemento sobre el mapa Determinar las coordenadas de un punto del mapa El viewport Lneas y polgonos Lneas y polilneas Polgonos Clculo de reas y longitudes Longitud de una polilnea rea de un polgono Resumen contact

Create account or Sign in Search this site Search

Programacin SIG en entornos web

Page tags
It seems you have no tags attached to pages. To attach a tag simply click on the tags button at the bottom of any page.

Add a new page

new page
e dit this pane l

Introduccin
En el mdulo anterior, hemos aprendido a extender un SIG de escritorio (gvSIG) para adaptarlo a nuestras necesidades. Tambin hemos aprendido a agregar nuevas capas por cdigo y elementos georeferenciados en ellas. En este bloque aprenderemos a hacer prcticamente lo mismo pero en entornos web. Estudiaremos cmo construir una pgina web y cmo incorporarle un mapa. Aprenderemos tambin a agregar elementos georeferenciados al mapa que nos servirn para marcar puntos, trazar caminos o delimitar reas. Aunque hay varios servicios de mapas que operan en Internet, como Yahoo Maps o Microsoft Virtual Earth, este mdulo se centrar en el estudio de Google Maps. Sin embargo, las tcnicas que se explicarn sern fcilmente trasladables a los otros servicios.

Objetivos
Al final de este mdulo, deberamos ser capaces de: 1. 2. 3. 4. Crear pginas web simples en las que se muestre un mapa. Mostrar un tipo de mapa u otro dependiendo de nuestras necesidades. Agregar marcadores georreferenciados a un mapa para sealar lugares. Dibujar lneas y polgonos georreferenciados en un mapa para mostrar rutas o delimitar reas. 5. Convertir las coordenadas de un mapa a coordenadas geogrficas y viceversa.

El lenguaje HTML
La Web y el HTML
La World Wide Web, que se abrevia WWW y se conoce tambin como la Web, es un sistema de pginas enlazadas mediante el concepto de hipertexto. El hipertexto es un texto que refiere a otro texto al que el lector puede tener acceso inmediato. El lenguaje tradicional y predominante sobre el que se sustenta la Web y que tiene capacidades de hipertexto es el HTML (HyperText Markup Language, "lenguaje de marcas de hipertexto"). Hasta hace relativamente poco era necesario conocer el lenguaje HTML para poder publicar

una pgina web en Internet. Si bien el HTML es un lenguaje muy directo, en el que buena parte del cdigo es el contenido propiamente dicho del documento, como contrapartida es engorroso de escribir. As, por ejemplo, para mostrar una palabra en negrita, es necesario intercalar en el texto ms de media docena de caracteres extras. Hoy en da han aparecido muchsimas herramientas que permiten generar pginas web de la misma forma que editamos cualquier otro documento. De hecho, casi todos los procesadores de textos modernos ofrecen la posibilidad de guardar sus documentos en formato HTML. Adems, hay herramientas altamente especializadas que generan pginas de altsima calidad en poco tiempo y con el mnimo esfuerzo, como por ejemplo Amaya 1 , Bluefish 2 o Dreamweaver
3

Dada la existencia de estas herramientas de edicin y puesto que el objetivo de estos materiales no es profundizar en el conocimiento del HTML, slo daremos unas pocas pinceladas sobre este lenguaje, las necesarias para escribir pginas relativamente sencillas y para comprender los ejemplos que se trabajarn en el resto del mdulo. Sin embargo, la UOC dispone de materiales abiertos que profundizan en el lenguaje HTML4 .

Elementos y etiquetas
El lenguaje HTML se utiliza para describir la estructura y el contenido de un documento, as como para complementar el texto con objetos (por ejemplo, mapas) e imgenes. Un tpico cdigo HTML est formado por elementos que configuran las distintas partes del documento. Generalmente, estos elementos estn delimitados por una etiqueta de inicio y otra de fin, que se escriben siempre entre corchetes angulares ("<" y ">"). Por ejemplo, la lnea siguiente: < p > L aW W Wn a c i e ne lC E R N . < / p > define un elemento (prrafo) cuyo contenido es "La WWW naci en el CERN.". Como podemos ver, las etiquetas de inicio y fin (<p> y </p> respectivamente) delimitan el contenido del elemento. Es importante observar que la etiqueta de fin es igual que la de inicio pero precedida por una barra (/). Hay elementos que slo tienen una etiqueta de inicio, pues carecen de contenido textual. Es el caso, por ejemplo, de las imgenes. Las lneas siguientes:

< p > E lp r i m e rl o g o t i p od el aW W W : < / p > < i m gs r c = " h t t p : / / u p l o a d . w i k i m e d i a . o r g / w i k i p e d i a / c o m m o n s / t h u m b / b / b 2 / W W W _ l o g o _ b y _ R o b e r t _ C a i l l i a u . s v g / 1

muestran la imagen que se encuentra en la direccin: http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WWW_logo_by_Robert_Cailliau.svg/120pxWWW_logo_by_Robert_Cailliau.svg.png. El resultado ser el siguiente:

El primer logotipo de la WWW:

Observad la estructura que aparece dentro de la etiqueta de inicio del elemento <img>:

s r c = " h t t p : / / u p l o a d . w i k i m e d i a . o r g / w i k i p e d i a / c o m m o n s / t h u m b / b / b 2 / W W W _ l o g o _ b y _ R o b e r t _ C a i l l i a u . s v g / 1 2 0 p x -

Todos los elementos HTML tienen atributos que varan de un elemento a otro segn sus caractersticas. Dichos atributos permiten variar la forma en la que se presenta el elemento. En el caso de las imgenes, tienen un atributo "src" (de source, "fuente") que indica la direccin en la que se encuentra la imagen. Como se puede apreciar en el ejemplo, el valor de los atributos siempre especifca en la etiqueta de inicio. Una ltima caracterstica importante de los elementos HTML es que se pueden imbricar. Es decir, en su contenido un elemento puede contener otros elementos que, a su vez, pueden contener otros, y as sucesivamente, formando una jerarqua de elementos. El cdigo siguiente: < p > W W Ws i g n i f i c a< e m > W o r l dW i d eW e b < / e m > . < / p >

define un prrafo que contiene una texto enfatizado (World Wide Web). Es importante observar que los elementos se cierran en orden inverso a aquel en el que se han abierto. El resultado ser el siguiente:

WWW significa World Wide Web.

Estructura mnima de un documento HTML

Un documento HTML bien formado debe presentar siempre la siguiente estructura mnima: < ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < t i t l e > T t u l od e ld o c u m e n t o < / t i t l e > < / h e a d > < b o d y > C o n t e n i d od e ld o c u m e n t o . < / b o d y > < / h t m l > Como podemos observar, la estructura mnima de un documento HTML est formada por cinco elementos: <DOCTYPE>: Establece el tipo de documento (en el ejemplo, HTML, por defecto versin 5). <html>: Es el elemento raz, el que define el documento HTML en s. Contiene obligatoriamente los elementos <head> y <body>. Como puede apreciarse en el ejemplo, el elemento <html> puede contener el atributo "lang", que define el idioma del documento (es de espaol). <head>: Define la cabecera del documento, cuyo cometido es alojar informacin sobre el mismo. El ttulo, las palabras clave y otros datos que no se consideran parte del contenido del documento irn dentro de este elemento. <title>: Define el ttulo del documento. <body>: Define el contenido del documento. Este elemento contendr otros que definirn el contenido del documento.

Definicin del contenido

El contenido de un documento HTML puede definirse mediante tres tipos de elementos: Estructurales: Son aquellos que describen la estructura del texto. En HTML tenemos elementos estructurales para definir ttulos, prrafos, tablas, enu- meraciones, etc. Normalmente, los navegadores aplican diferentes estilos de presentacin a cada elemento. De presentacin: Son aquellos que describen el aspecto del texto, independientemente de su funcin. Los elementos que definen negritas, cursi- vas, texto enfatizado, etc. son elementos de presentacin. De hipertexto: Son aquellos que permiten enlazar con otros documentos mediante la creacin de hipervnculos. Son los ms importantes dada la naturaleza hipertextual de la Web. A continuacin, se mostrarn algunos de los elementos ms significativos de cada tipo. Adems, ilustraremos su uso con ejemplos.

Elementos estructurales
Como ya se ha mencionado, los elementos estructurales son aquellos que describen el propsito del texto. Entre ellos podemos distinguir los siguientes: <p>, de paragraph (prrafo): Define un prrafo de texto. Las lneas siguientes: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d y > < p > L aW W We su ns i s t e m ad ep g i n a se n l a z a d a sm e d i a n t ee lc o n c e p t od eh i p e r t e x t o . < / p > < p > L aW W Wn a c i e n1 9 8 9e ne lC E R N ,d el am a n od eT i mB e r n e r s L e e . < / p > < / b o d y > < / h t m l > definen un par de prrafos. El resultado ser el siguiente:

La WWW es un sistema de pginas enlazadas mediante el concepto de hipertexto. La WWW naci en 1989 en el CERN, de la mano de Tim Berners-Lee.
Como podemos observar, al final de cada prrafo se agrega automticamente un salto de lnea. <h1> <h6>, de heading (ttulo): Definen hasta seis niveles de ttulos, desde el ms importante (<h1>) hasta el menos importante (<h6>). Por ejemplo, las lneas siguientes: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d ys t y l e = " p a d d i n g : 5 p t ;b o r d e r :s o l i d1 p xg r a y ; " > < h 1 > I n t r o d u c c i n < / h 1 > < p > L aW W We su ns i s t e m ad ep g i n a se n l a z a d a sm e d i a n t ee lc o n c e p t od eh i p e r t e x t o . < / p > < h 2 > H i s t o r i a < / h 2 > < p > L aW W Wn a c i e n1 9 8 9e ne lC E R N ,d el am a n od eT i mB e r n e r s L e e . < / p > < / b o d y > < / h t m l > definen un ttulo de primer nivel (Introduccin) y otro de segundo nivel (La Web y el HTML). Despus de cada ttulo, aparece algo de texto en forma de prrafo. El resultado ser el siguiente:

Introduccin
La WWW es un sistema de pginas enlazadas mediante el concepto de hipertexto.

Historia
La WWW naci en 1989 en el CERN, de la mano de Tim Berners-Lee.
<div>, de divider (divisor): Este elemento define un bloque que puede contener otros elementos. Es muy parecido al prrafo, aunque est vaco de significado. El elemento <div> es muy importante porque nos permite agrupar elementos sin caracterizarlos. Las lneas siguientes:

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d y > < d i va l i g n = " c e n t e r " > < i m gs r c = " h t t p : / / u p l o a d . w i k i m e d i a . o r g / w i k i p e d i a / c o m m o n s / t h u m b / b / b 2 / W W W _ l o g o _ b y _ R o b e r t _ C a i l l i a u . s v g / 1 < p > E lp r i m e rl o g o t i p od e lW W W < / p > < / d i v > < / b o d y > < / h t m l >

crean un bloque que contiene dos prrafos y lo centran en medio del documento mediante el atributo "align" (de alignment, alineacin). Consecuentemente, los prrafos tambin quedarn alineados en el centro. El resultado ser el siguiente:

El primer logotipo del WWW

<br>, de line break (salto de lnea): Permite emplazar un salto de lnea, por ejemplo, en medio de un prrafo. Este elemento no tiene etiqueta de fin. El cdigo siguiente: < ! D O C T Y P Eh t m l > < h t m l >

< h e a d > < / h e a d > < b o d y > < p > E nl ap g i n a :< b r >h t t p : / / w w w . w 3 c . o r g< b r >s ep u e d eo b t e n e ri n f o r m a c i ns o b r ee lW W WC o n s o r t i u m . < / b o d y > < / h t m l >

escribir:

En la pgina: http://www.w3c.org se puede obtener informacin sobre el WWW Consortium.

Observad que, a diferencia de lo que sucede en el prrafo, el salto de lnea no modifica el espaciado entre lneas.

Elementos de presentacin
Como ya hemos mencionado, los elementos de presentacin son aquellos que describen el aspecto del texto, independientemente de su funcin. Entre ellos destacan los siguientes: <em>, de emphasis (nfasis): Este elemento enfatiza el texto. Normalmente, el texto se mostrar en cursiva. Las lneas siguientes:

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d y > < p > L a< e m > W o r l dW i d eW e b < / e m >e su ns i s t e m ad ep g i n a se n l a z a d a sm e d i a n t ee lc o n c e p t od eh i p e r t e x t o . < / b o d y > < / h t m l >

se traducirn en:

La World Wide Web es un sistema de pginas enlazadas mediante el concepto de hipertexto.

<strong>, de strong emphasis (nfasis fuerte): Este elemento es parecido al anterior, pero pone un nfasis an mayor. Normalmente, el texto se mostrar en negrita. Las lneas siguientes:

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d y > < p > L a< s t r o n g > W o r l dW i d eW e b < / s t r o n g >e su ns i s t e m ad ep g i n a se n l a z a d a sm e d i a n t ee lc o n c e p t od eh i p < / b o d y > < / h t m l >

se traducirn en:

La World Wide Web es un sistema de pginas enlazadas mediante el concepto de hipertexto.

Elementos de hipertexto
El elemento principal que permite navegar de un documento a otro es <a>, de anchor (ancla). Dicho elemento permite definir un texto que, cuando se activa (normalmente haciendo clic sobre l), nos lleva a otro documento. Por ejemplo, las lneas siguientes:

< ! D O C T Y P Eh t m l > < h t m l > < h e a d > < / h e a d > < b o d y > < p > L aW W Wn a c i e n1 9 8 9e ne lC E R N ,d el am a n od e< ah r e f = " h t t p : / / e s . w i k i p e d i a . o r g / w i k i /T i m _ B e r n e r s < / b o d y >

< / h t m l >

crean un enlace entre el nombre del inventor de la WWW y el artculo correspondiente de la Wikipedia. Como se puede observar, el elemento ancla tiene un atributo "href" (de hypertext reference, referencia de hipertexto), que establece el documento con el que est enlazado el texto. El resultado ser el siguiente:

La WWW naci en 1989 en el CERN, de la mano de Tim Berners-Lee.

Al activar el enlace, ya sea haciendo clic sobre l o por otros medios, iremos a la pgina http://es.wikipedia.org/wiki/Tim_Berners-Lee.

Google Maps
Google Maps es la herramienta SIG en lnea de Google. Permite explorar mapas en 2D de casi cualquier parte del mundo. La popularidad de la que goza Google Maps en la actualidad se debe principalmente a su buen rendimiento, su vasta cartografa y la posibilidad de incorporar toda esta tecnologa a cualquier sitio web mediante el uso de la API5 (de Application Programming Interface, "interfaz de programacin de aplicaciones") de Google Maps. En los apartados siguientes, veremos cmo incorporar un mapa a nuestra pgina y cmo hacer uso de la API para trabajar sobre l.

Incorporar un mapa en una pgina

La forma ms sencilla de incorporar un mapa en nuestra pgina es utilizando el web de Google Maps y, una vez seleccionada la ubicacin que deseamos mostrar, incorporar el cdigo HTML que nos proporciona Google a nuestra pgina. Vemoslo paso a paso. En primer lugar, debemos seleccionar una ubicacin en maps.google.es. Esto se puede hacer mediante la caja de bsqueda o navegando por el mapa.

En segundo lugar, tenemos que presionar el botn "Enlazar" (cuyo icono es una cadena) y copiar el cdigo HTML que aparece en la caja Pegar enlace en mensaje de correo electrnico o mensaje instantneo.

El tercer y ltimo paso ser incorporar este cdigo en nuestra pgina HTML:

< ! D O C T Y P Eh t m l > < h t m ll a n g = " e s " > < h e a d > < t i t l e > N a t i o n a a lP a r kD eH o g eV e l u w e < / t i t l e > < / h e a d > < b o d ys t y l e = " p a d d i n g : 5 p t ;b o r d e r :s o l i d1 p xg r a y ; " > < p > E l< e m > N a t i o n a a lP a r kD eH o g eV e l u w e < / e m >( e lP a r q u eN a c i o n a l< e m > D eH o g eV e l u w e < / e m >e su np a r q u < i f r a m ew i d t h = " 4 2 5 "h e i g h t = " 3 5 0 "f r a m e b o r d e r = " 0 "s c r o l l i n g = " n o "m a r g i n h e i g h t = " 0 "m a r g i n w i d t h = < s m a l l > < ah r e f = " h t t p : / / m a p s . g o o g l e . e s / m a p s ? f = q & a m p ; s o u r c e = e m b e d & a m p ; h l = e s & a m p ; g e o c o d e = & a m p ; q = H o g e + V e < / b o d y > < / h t m l >

El resultado ser el siguiente:

El Nationaal Park De Hoge Veluwe (el Parque Nacional De Hoge Veluwe es un parque nacional neerlands situado en la provincia de Gelderland, cerca de las ciudades de Ede, Arnhem y Apeldoorn.

2013 Google -

Si bien el mapa que obtenemos es interactivo (podemos hacer zoom y desplazarnos por l) y algo personalizable (podemos cambiar mnimamente el aspecto de nuestro mapa mediante la opcin "Personalizar y obtener vista previa del mapa que se va a insertar"), las posibilidades que nos ofrece son muy limitadas. Por ejemplo, no se pueden aadir o quitar capas, y no se puede asociar informacin a determinados puntos del mapa. Sin embargo, si nuestra nica intencin es situar un lugar en el mapa, sta es una solucin fcil y rpida.

La API de Google Maps

Afortunadamente, Google Maps nos ofrece muchas ms posibilidades que las que hemos visto hasta ahora. Sin embargo, stas se obtienen a costa de la facilidad de uso, pues se requieren unos mnimos conocimientos de programacin para poder sacarles partido. A esta funcionalidad adicional se accede por medio de la API de Google Maps, mediante un conjunto de tecnologas agrupadas bajo la denominacin AJAX (Asynchronous JAvascript and XML, "JavaScript asncrono y XML"). Como su nombre indica, AJAX est compuesto por dos tecnologas: JavaScript: Es un lenguaje muy parecido a Java que se usa para alterar documentos HTML de forma dinmica. Es importante remarcar que no es Java; slo comparten una base comuna. XML: Es un lenguaje usado para el intercambio de datos (sigla de eXtensible Markup Language, "lenguaje de marcas extensible"). Es una forma genrica de escribir documentos maximizando su simplicidad, su generalidad y su usabilidad. Ambas tecnologas, integradas en un documento HTML, permiten obtener mapas y datos de los servidores de Google Maps y mostrarlos en una pgina web. En los siguientes captulos estudiaremos la Versin 3 de la API de Google Maps, la versin oficial de la API en el momento en el que se actualizaron por ltima vez estos materiales.

Crear un mapa
La funcin ms elemental que nos ofrece la API de Google Maps es crear un mapa. El mapa se mostrar de forma muy parecida a cuando se copia el cdigo HTML del sitio de Google Maps: centrado en un punto y con un nivel de zoom determinado. Adems, se mostrarn una serie de

controles mnimos que nos permitirn desplazarnos por el mapa, variar su nivel de zoom y seleccionar el tipo de mapa mostrado. El cdigo siguiente muestra un mapa centrado en el rectorado de la UOC: History Tags Source site-name Edit .wikidot.com Share Explore on < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > U n i v e r s i t a tO b e r t ad eC a t a l u n y a < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ v a ro p c i o n e s={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 2 9 ,2 . 1 3 3 0 0 3 ) , z o o m :1 7 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado ser el siguiente:

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Como podemos observar, el cdigo HTML contiene una serie de elementos <script> que son los que introducen el cdigo JavaScript. Estos elementos pueden emplazarse tantas veces como sea necesario en la cabecera del documento (<head>) o en el contenido (<body>). Es importante remarcar el uso del atributo "type" ("tipo") del elemento <script>, que sirve para identificar el tipo de cdigo que contiene (en nuestro caso JavaScript). Si observamos detenidamente el cdigo JavaScript contenido en los elementos <script>, las similitudes con Java saltan rpidamente a la vista pero tambin las diferencias; Quiz la ms notable sea la ausencia de tipos. Todas las variables son del mismo tipo (var), aunque internamente puedan tener atributos distintos. La declaracin de funciones tambin cambia, pues en JavaScript siempre toma la forma: function nombre-funcin . En los siguientes apartados, analizaremos con detalle el cdigo del ejemplo y descubriremos los pasos que hay que seguir para mostrar un mapa en un pgina web.

Crear el elemento que albergar el mapa

En primer lugar, es necesario crear un elemento HTML que albergue el mapa. Aunque en la prctica hay diversos elementos que pueden desempear esta funcin, es recomendable utilizar el elemento <div> porque es el elemento ms neutro. Al elemento utilizado se debe darle un nombre mediante el atributo id (de identifier, "identificador") y unas dimensiones, que se especificarn mediante los atributos estilsticos width (ancho) y height (alto). En el ejemplo anterior, hemos creado un elemento llamado "elemento_mapa" con un tamao de 500 por 300 pxeles mediante el cdigo siguiente: < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v >

Incluir la API de Google Maps

Para poder acceder a la API de Google Maps es necesario incluirla (incorporarla) a nuestro cdigo. En el ejemplo anterior, esto lo hemos conseguido mediante las lneas siguientes: < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > Estas lneas pueden cambiar ligeramente de una versin a otra de la API, y tambin si se desea acceder a otras capacidades de Google Maps, como por ejemplo, obtener las coordenadas geogrficas del usuario que est accediendo a la pgina, usar libreras adicionales, etc.

Inicializar el mapa
Una vez creado el elemento que contendr el mapa, entra en juego el cdigo JavaScript para pedir a la API de Google Maps que dibuje un mapa sobre dicho elemento. En el ejemplo anterior, esto lo hemos realizado mediante las lneas siguientes: < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ v a ro p c i o n e s={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 2 9 ,2 . 1 3 3 0 0 3 ) , z o o m :1 7 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s ) ; } < / s c r i p t >

Como podemos observar, en la ltima lnea de la funcin "InicializarMapa" se instancia un objeto de la clase "google.maps.Map" que es el mapa en s. En la llamada al constructor se le pasa el elemento que debe contener el mapa (en el ejemplo, "elemento_mapa") y una serie de opciones que determinarn el centro del mapa, el nivel de zoom inicial y el tipo de mapa mostrado. Una vez instanciado el objeto "Map", la API de Google Maps dibuja el mapa sobre el elemento especificado. Cabe destacar que las opciones se especifican mediante un objeto "opciones" que contiene tres atributos: center: que es un objeto de la clase "google.maps.LatLng" que especifica las coordenadas WGS84 del centro del mapa; zoom: que es un nmero entero que indica el nivel de zoom inicial, comprendido entre 0 (ms alejado) y 19 (ms prximo); mapTypeId: que es un identificador que especifica el tipo del mapa ("google.maps.MapTypeId.ROADMAP" para el mapa de carreteras). Es obligatorio especificar, al menos, estos tres atributos.

Llamar a la funcin de inicializacin

Finalmente, slo queda indicar al navegador cundo se debe inicializar el mapa o, lo que es lo mismo, cundo debe ejecutarse la funcin "InicializarMapa". Aunque pueda parecer un poco raro al principio, un documento HTML cambia a medida que va leyndose. Un navegador web lee en primer lugar el cdigo HTML (es decir, el texto del documento) y despus las imgenes u otros objetos (vdeos, etc.). Dadas las circunstancias, hasta que todos los objetos no estn cargados no se puede mostrar el documento tal y como es, pero esperar a recibir todos los objetos para mostrar el texto puede ser desesperante para el usuario, sobretodo si el servidor web es lento o la cantidad de datos a transferir es muy grande. En general, los navegadores optan por ir mostrando los objetos a medida que los van recibiendo, componiendo el documento sobre la marcha. No obstante, esta poltica de los navegadores puede causar problemas a Google Maps. Si el mapa se inicializa cuando el documento an no ha sido cargado del todo, se pueden obtener resultados inesperados. En este sentido, Google recomienda inicializar el mapa slo cuando el documento haya sido ledo completamente. Para ello, se utiliza el atributo "onload" (cuando est cargado) del elemento HTML <body>. En l se puede introducir cdigo JavaScript que se ejecutar cuando la pgina haya sido cargada completamente. En el ejemplo que nos ocupa, le hemos puesto puesto una llamada a la funcin "InicializarMapa": < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " >

Tipos de mapas
En en ejemplo anterior, hemos creado un mapa de carreteras. Aunque el tipo de mapa puede

cambiarse a posteriori mediante los botones situados en la parte superior derecha del mapa, a veces es deseable mostrar un u otro tipo desde buen comienzo. As, el atributo "mapTypeId" del objeto mapa puede tomar los valores siguientes: ROADMAP: mapa de calles y carreteras. SATELLITE: mapa basado en imgenes tomadas por satlite. HYBRID: mapa hbrido, con las calles y las carreteras superpuestas a las imgenes tomadas por satlite. TERRAIN: mapa de relieve, una especie de mapa topogrfico. Si en el ejemplo anterior cambiamos el valor del atributo "mapTypeId" por "google.maps.MapTypeId.HYBRID" obtenemos el resultado siguiente:

Datos de mapa 2013 Google, basado en BCN IGN Espaa Imgenes 2013 , Cnes/Spot Image, DigitalGlobe, Institut Informar Cartogrfic de un error de Catalunya de Maps

El cdigo completo del ejemplo queda as: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > U n i v e r s i t a tO b e r t ad eC a t a l u n y a < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ v a ro p c i o n e s={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 2 9 ,2 . 1 3 3 0 0 3 ) , z o o m :1 7 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . H Y B R I D } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

Transformacin de coordenadas
La caracterstica ms relevante y distintiva de los SIG es que facilitan la transformacin de coordenadas de pantalla a coordenadas geogrficas y viceversa. Este mecanismo nos permite determinar (sin hacer clculos complicados) las coordenadas geogrficas de un punto de mapa, o situar un elemento (un marcador, por ejemplo) en unas coordenadas geogrficas especficas. En los siguientes apartados veremos como se resuelven ambas tareas con Google Maps.

Situar un elemento sobre el mapa

Supongamos que queremos marcar un lugar concreto sobre el mapa. Para este propsito, la API de Google Maps nos proporciona los marcadores, que se pueden utilizar para apuntar sobre unas coordenadas determinadas. Estos marcadores estn implementados por la case "google.maps.Marker", cuyo constructor espera las coordenadas geogrficas del punto que debe sealar y el mapa sobre el que se emplazar. El ejemplo siguiente destaca la situacin del rectorado de la UOC (cuyas coordenadas son: 41,414829 N, 2,133003 E) en medio de Barcelona mediante el uso de un marcador: < ! D O C T Y P Eh t m l >

< h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > U n i v e r s i t a tO b e r t ad eC a t a l u n y a < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ v a rp o s i c i o n R e c t o r a d o=n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 2 9 ,2 . 1 3 3 0 0 3 ) ; v a ro p c i o n e s M a p a={ c e n t e r :p o s i c i o n R e c t o r a d o , z o o m :1 1 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; v a ro p c i o n e s M a r c a d o r={ p o s i t i o n :p o s i c i o n R e c t o r a d o , m a p :m a p a , t i t l e :" E lr e c t o r a d od el aU O C . " } v a rm a r c a d o r=n e wg o o g l e . m a p s . M a r k e r ( o p c i o n e s M a r c a d o r ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Como se puede observar en el cdigo del ejemplo, en primer lugar hemos instanciado un objeto de la clase "google.maps.LatLng" que representa las coordenadas geogrficas del rectorado de la UOC, y que se ha utilizado ms tarde para establecer el centro del mapa y la posicin del marcador: v a rp o s i c i o n R e c t o r a d o=n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 2 9 ,2 . 1 3 3 0 0 3 ) ; Despus, hemos creado el mapa, de la misma forma que lo hemos hecho en los ejemplos anteriores. En ltima instancia hemos creado el marcador llamando al constructor de la clase "google.maps.Marker". De la misma forma que lo hacamos con los mapas, nos hemos ayudado de un objeto "opcionesMarcador" para especificar las opciones del marcador: v a ro p c i o n e s M a r c a d o r={ p o s i t i o n :p o s i c i o n R e c t o r a d o , m a p :m a p a , t i t l e :" E lr e c t o r a d od el aU O C . " } v a rm a r c a d o r=n e wg o o g l e . m a p s . M a r k e r ( o p c i o n e s M a r c a d o r ) ; Es importante observar como los valores de los atributos del objeto "opcionesMarcador" determinan la posicin y el aspecto del marcador. A continuacin se detalla el significado de cada atributo: position: Las coordenadas geogrficas del lugar que debe sealar el marcador.

map: El mapa sobre el que debe sealar el marcador. Hay que tener en cuenta que podemos tener dos o ms mapas en una misma pgina. title: Una pequea descripcin del marcador, que aparecer al cabo de unos instantes de situarse sobre l. Los atributos "position" y "map" deben especificarse obligatoriamente. No as el atributo "title", que es opcional.

Determinar las coordenadas de un punto del mapa

Supongamos ahora que deseamos hacer el proceso inverso: determinar las coordenadas geogrficas de un lugar del mapa. Es necesario recurrir a esta transformacin cuando, por ejemplo, deseamos conocer las coordenadas geogrficas de un punto del mapa sobre el que acabamos de hacer clic. El ejemplo siguiente hace exactamente eso: mostrar las coordenadas geogrficas (expresadas en grados Norte y Este) del punto seleccionado: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > D e t e r m i n a rc o o r d e n a d a s < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nM o s t r a r C o o r d e n a d a s ( m a p a ,l a t L n g ) { v a ro p c i o n e s V e n t a n a={ c o n t e n t :" L a sc o o r d e n a d a sd e lp u n t os o n : < b r > ( "+ l a t L n g . l a t ( )+"& d e g ; N ,"+ l a t L n g . l n g ( )+"& d e g ; E ) " , p o s i t i o n :l a t L n g } v a rv e n t a n a I n f o=n e wg o o g l e . m a p s . I n f o W i n d o w ( o p c i o n e s V e n t a n a ) ; v e n t a n a I n f o . o p e n ( m a p a ) ; } f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 6 0 3 4 0 9 6 7 2 4 2 6 4 4 ,1 . 8 1 1 5 6 7 0 7 1 6 5 5 3 0 4 ) , z o o m :1 1 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . T E R R A I N } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; / /a c t i v al ae s c u c h ad e le v e n t o g o o g l e . m a p s . e v e n t . a d d L i s t e n e r ( m a p a ," c l i c k " ,f u n c t i o n ( e v e n t o ){ / /m o s t r a rl a sc o o r d e n a d a sd e lp u n t os e l e c c i o n a d o M o s t r a r C o o r d e n a d a s ( m a p a ,e v e n t o . l a t L n g ) ; } ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente (haz clic sobre el mapa!):

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Para que nuestro cdigo responda a los clics del ratn, hemos llamado a la funcin "addListener()" de la clase "google.maps.event". Esta funcin permite asociar un evento (un clic, un doble clic, un cambio de zoom, etc.) de un objeto (un mapa, un marcador, etc.) a una funcin, de forma que cada vez que suceda el evento se llame a la funcin especificada. En el ejemplo esto se consegua por medio de las siguientes lneas: g o o g l e . m a p s . e v e n t . a d d L i s t e n e r ( m a p a ," c l i c k " ,f u n c t i o n ( e v e n t o ){ / /m o s t r a rl a sc o o r d e n a d a sd e lp u n t os e l e c c i o n a d o M o s t r a r C o o r d e n a d a s ( m a p a ,e v e n t o . l a t L n g ) ; } ) ; Es importante observar que el tercer parmetro de la llamada a "addListener" es una funcin annima que implementamos ipso facto. Podamos haber declarado una funcin normal y corriente, y aqu solo especificar su nombre, pero esta construccin nos da la ventaja de que nos permite acceder a la variable "mapa" (que necesitamos para poder mostrar las coordenadas) sin tener que declararla fuera del mbito de la funcin "InicializarMapa()". Tambin debis fijaros en que la funcin annima espera un parmetro "evento", que la API de Google Maps se encargar de proporcionarnos en forma de un objeto "MouseEvent". Este objeto nos interesa especialmente porque tiene un atributo "latLng" que contiene las coordenadas donde ha sucedido el evento del clic. Cuando se desencadena el evento, mapa y coordenadas se pasan a la funcin "mostrarCoordenadas" que muestra, mediante un objeto "google.maps.InfoWindow" las coordenadas en cuestin debidamente formateadas: v a ro p c i o n e s V e n t a n a={ c o n t e n t :" L a sc o o r d e n a d a sd e lp u n t os o n : < b r > ( "+ l a t L n g . l a t ( )+"& d e g ; N ,"+ l a t L n g . l n g ( )+"& d e g ; E ) " , p o s i t i o n :l a t L n g } v a rv e n t a n a I n f o=n e wg o o g l e . m a p s . I n f o W i n d o w ( o p c i o n e s V e n t a n a ) ; v e n t a n a I n f o . o p e n ( m a p a ) ; Como se puede observar, la instanciacin de un objeto "google.maps.InfoWindow" es anloga a la de mapas y marcadores. En este caso, los atributos a proporcionar son: content: El texto a mostrar. position: Las coordenadas sobre las que apuntar el mensaje.

El viewport
Aunque el mdulo anterior (Adaptacin y estensin de un SIG) ya se ha definido el termino viewport, a continuacin volveremos a definirlo y veremos qu funciones de la API de Google Maps nos permiten acceder a sus atributos. Cuando se muestra un mapa por pantalla, no siempre se muestra en toda su extensin. Que veamos una parte mayor o menor del mismo depende del nivel de zoom. De hecho, el rea visible y el nivel de zoom se rigen por una regla de proporcionalidad inversa: a mayor zoom, menor rea visible, y a menor zoom, mayor rea visible. El recuadro que delimita el rea visible de un mapa se llama viewport. Normalmente, se define por las coordenadas geogrficas de sus esquinas inferior izquierda (suroeste) y superior derecha (noreste). Latitud y longitud crecen desde la coordenada suroeste hasta la coordenada noreste.

Google Maps nos permite obtener los lmites del viewport mediante la funcin "getBounds()" del objeto mapa. Esta funcin devuelve un objeto de la clase "LatLngBounds" que contiene las coordenadas geogrficas de las esquinas suroeste y noreste del viewport. A su vez, dichas coordenadas las leeremos mediante las funciones "getSouthWest()" y "getNorthEast() respectivamente". El ejemplo siguiente hace uso de todas estas funciones para escoger aleatoriamente el destino de nuestras prximas vacaciones: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > V i a j af c i l ,r p i d oyb a r a t o < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nE s c o g e r D e s t i n o ( l i m i t e s V i e w p o r t ,m a r c a d o r ){ / /o b t i e n el a sc o o r d e n a d a sd el a se s q u i n a ss u r o e s t eyn o r e s t e v a re s q u i n a S u r o e s t e=l i m i t e s V i e w p o r t . g e t S o u t h W e s t ( ) ; v a re s q u i n a N o r e s t e=l i m i t e s V i e w p o r t . g e t N o r t h E a s t ( ) ; / /g e n e r au nd e s t i n oa l e a t o r i od e n t r od el o sl m i t e sd e lv i e w p o r t v a rp o s i c i o n D e s t i n o=n e wg o o g l e . m a p s . L a t L n g ( e s q u i n a S u r o e s t e . l a t ( )+( e s q u i n a N o r e s t e . l a t ( )-e s q u i n a S u r o e s t e . l a t ( ) )*M a t h . r a n d o m ( ) , e s q u i n a S u r o e s t e . l n g ( )+( e s q u i n a N o r e s t e . l n g ( )-e s q u i n a S u r o e s t e . l n g ( ) )*M a t h . r a n d o m ( ) ) ; / /c a m b i al ap o s i c i nd e lm a r c a d o r m a r c a d o r . s e t P o s i t i o n ( p o s i c i o n D e s t i n o ) ; } f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 7 . 5 6 8 4 4 7 8 7 4 6 6 1 0 7 ,9 . 3 2 7 5 8 8 8 0 0 1 7 0 9 2 9 ) , z o o m :3 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . T E R R A I N } v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; / /c r e au nm a r c a d o rs i na p u n t a ran i n g u n ap a r t e v a ro p c i o n e s M a r c a d o r={ m a p :m a p a , t i t l e :" A q u v i a j a r e m o se lp r x i m ov e r a n o . " } v a rm a r c a d o r=n e wg o o g l e . m a p s . M a r k e r ( o p c i o n e s M a r c a d o r ) ; / /a c t i v al ae s c u c h ad e le v e n t o" i d l e " g o o g l e . m a p s . e v e n t . a d d L i s t e n e r ( m a p a ," i d l e " ,f u n c t i o n ( e v e n t o ){ / /e s c o g eu nd e s t i n oa la z a r E s c o g e r D e s t i n o ( m a p a . g e t B o u n d s ( ) ,m a r c a d o r ) ; } ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

Datos de mapa 2013 Google, INEGI, MapLink

Os gusta el destino que nos ha tocado? Si es que no, no pasa nada: basta con mover el mapa o cambiar el nivel de zoom y el destino cambiar aleatoriamente. En lo referente al cdigo, antes de entrar en detalles acerca del viewport, hay que tener en cuenta que los lmites el viewport solo se pueden leer cuando el mapa est totalmente cargado. Si probamos de hacerlo antes no obtendremos ningn valor. Por eso, para leerlos en el momento oportuno, escuchamos el evento "idle", que sucede cuando el mapa ha terminado de dibujarse despus de su inicializacin, de un cambio de zoom o de un desplazamiento. As, cada vez que salta el evento "idle" llamamos a la funcin "EscogerDestino()". Esta funcin se encarga de escoger un nuevo destino aleatoriamente, y de cambiar el marcador de posicin. Por ese motivo, recibe dos parmetros: los lmites del viewport (que se obtienen llamando a la funcin "getBounds()") y el marcador: / /a c t i v al ae s c u c h ad e le v e n t o" i d l e " g o o g l e . m a p s . e v e n t . a d d L i s t e n e r ( m a p a ," i d l e " ,f u n c t i o n ( e v e n t o ){ / /e s c o g eu nd e s t i n oa la z a r E s c o g e r D e s t i n o ( m a p a . g e t B o u n d s ( ) ,m a r c a d o r ) ; } ) ; Es importante entender que el marcador es siempre el mismo. Lo que hacemos en la funcin "EscogerDestino()" es cambiar el marcador de sitio. Tambin es importante observar que, despus de crear el mapa, creamos el marcador aunque sin posicin inicial: / /c r e au nm a r c a d o rs i na p u n t a ran i n g u n ap a r t e v a ro p c i o n e s M a r c a d o r={ m a p :m a p a , t i t l e :" A q u v i a j a r e m o se lp r x i m ov e r a n o . " } v a rm a r c a d o r=n e wg o o g l e . m a p s . M a r k e r ( o p c i o n e s M a r c a d o r ) ; Observad que el atributo "position" del objeto "opcionesMarcador" (que contiene la posicin sobre la que apunta el marcador) no est presente. La ausencia de atributo provoca que el marcador no se dibuje. Sin embargo, esto no nos supone ningn inconveniente porque, de hecho, an no hemos escogido nuestro destino vacacional. No ser hasta que el mapa no est listo, es decir, recordad, hasta que no est en estado "idle", o, lo que es lo mismo, hasta que no se llame la funcin "EscogerDestino()" y podamos obtener las dimensiones del viewport, que no se calcular el nuevo destino y se establecer la posicin del marcador. La posicin de un marcador se puede cambiar mediante la funcin "setPosition()" del objeto marcador. En el ejemplo, en la ltima lnea de la funcin "EscogerDestino()", utilizamos esta funcin para cambiar la posicin del marcador: f u n c t i o nE s c o g e r D e s t i n o ( l i m i t e s V i e w p o r t ,m a r c a d o r ){ / /o b t i e n el a sc o o r d e n a d a sd el a se s q u i n a ss u r o e s t eyn o r e s t e v a re s q u i n a S u r o e s t e=l i m i t e s V i e w p o r t . g e t S o u t h W e s t ( ) ; v a re s q u i n a N o r e s t e=l i m i t e s V i e w p o r t . g e t N o r t h E a s t ( ) ; / /g e n e r au nd e s t i n oa l e a t o r i od e n t r od el o sl m i t e sd e lv i e w p o r t v a rp o s i c i o n D e s t i n o=n e wg o o g l e . m a p s . L a t L n g ( e s q u i n a S u r o e s t e . l a t ( )+( e s q u i n a N o r e s t e . l a t ( )-e s q u i n a S u r o e s t e . l a t ( ) )*M a t h . r a n d o m ( ) e s q u i n a S u r o e s t e . l n g ( )+( e s q u i n a N o r e s t e . l n g ( )-e s q u i n a S u r o e s t e . l n g ( ) )*M a t h . r a n d o m ( ) ) ; / /c a m b i al ap o s i c i nd e lm a r c a d o r m a r c a d o r . s e t P o s i t i o n ( p o s i c i o n D e s t i n o ) ; }

Observad ahora las lneas que preceden la llamada a la funcin "setPosition()". En ellas

obtenemos las coordenadas de las esquinas suroeste y noreste del viewport y generamos aleatoriamente un nuevo destino. Pero, como generar un nuevo destino aleatorio que, adems, est dentro de los lmites del viewport? Pues incrementando la latitud y la longitud de la coordenada suroeste un valor aleatorio entre 0 y la altura del viewport, en el caso de la latitud, y entre 0 y la anchura del viewport, en el caso de la longitud. La altura del viewport la obtenemos restando las latitudes de las esquinas noreste y suroeste. La anchura, restando las longitudes. Ambos valores los multiplicamos por el resultado de la funcin "Math.random()" que devuelve un nmero aleatorio entre 0,0 y 1,0 (p.ej.: 0,2), obteniendo los incrementos en latitud y longitud que buscbamos.

Lneas y polgonos
Google Maps nos permite representar objetos sobre un mapa, de manera que su geometra est ligada a unas coordenadas geogrficas determinadas. Buen ejemplo de ello son las marcas que hemos visto hasta ahora: se acomodan a los desplazamientos del mapa y a los cambios de zoom para apuntar siempre sobre el mismo lugar. Sin embargo, las opciones que nos ofrece Google Maps no se acaban en los marcadores: tambin podemos representar lneas, polilneas 6 , polgonos e incluso crculos.

Lneas y polilneas
Supongamos que queremos representar la ruta que hay que seguir para ir de Plaa de Catalunya de Barcelona al rectorado de la UOC. El cdigo siguiente dibuja la ruta mediante una polilnea 7 : < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > C o m ol l e g a ra lR e c t o r a d od el aU O C < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /c o o r d e n a d a sd eP l a z aC a t a l u n y a v a rp o s i c i o n P l C a t a l u n y a=n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 6 9 3 5 ,2 . 1 6 9 9 5 0 ) ; / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :p o s i c i o n P l C a t a l u n y a , z o o m :1 5 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } ; v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; / /d i b u j al ar u t ae n t r eP l a z aC a t a l u n y aie lR e c t o r a d od el aU O C / /e s p e c i f i c al o sp u n t o sd ep a s o v a rp u n t o s D e P a s o=[ p o s i c i o n P l C a t a l u n y a , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 9 9 8 ,2 . 1 7 0 0 5 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 9 6 5 1 3 ,2 . 1 5 9 4 7 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 9 9 8 1 3 ,2 . 1 5 5 5 0 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 0 2 0 1 8 ,2 . 1 5 2 9 3 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 0 3 9 6 5 ,2 . 1 5 1 8 6 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 0 5 8 6 1 ,2 . 1 5 0 3 7 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 0 6 4 9 2 ,2 . 1 4 9 5 4 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 0 8 2 7 9 ,2 . 1 4 7 4 6 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 1 2 5 2 ,2 . 1 4 5 1 3 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 1 7 7 1 ,2 . 1 4 0 8 1 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 3 9 9 0 ,2 . 1 3 7 9 4 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 3 6 8 ,2 . 1 3 7 1 6 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 5 0 4 4 ,2 . 1 3 6 3 1 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 9 8 0 ,2 . 1 3 5 9 9 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 6 5 8 ,2 . 1 3 5 0 2 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 4 5 7 ,2 . 1 3 3 9 3 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 8 6 7 ,2 . 1 3 3 6 7 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 4 1 4 7 9 6 ,2 . 1 3 3 2 3 ) ] ; / /e s p e c i f i c al a so p c i o n e sd el al n e a v a ro p c i o n e s P o l i l i n e a={ p a t h :p u n t o s D e P a s o , s t r o k e C o l o r :" # f f 0 0 f f " , s t r o k e W e i t g h t :1 0 , s t r o k e O p a c i t y :0 . 5 , g e o d e s i c :t r u e , m a p :m a p a } ;

/ /c r e al al n e a v a rp o l i l i n e a=n e wg o o g l e . m a p s . P o l y l i n e ( o p c i o n e s P o l i l i n e a ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Como se puede observar en el cdigo del ejemplo, las polilneas se representan mediante objetos "Polyline". La llamada al constructor de esta clase es muy parecida al de los marcadores: / /e s p e c i f i c al a so p c i o n e sd el al n e a v a ro p c i o n e s P o l i l i n e a={ p a t h :p u n t o s D e P a s o , s t r o k e C o l o r :" # f f 0 0 f f " , s t r o k e W e i t g h t :1 0 , s t r o k e O p a c i t y :0 . 5 , g e o d e s i c :t r u e , m a p :m a p a } ; / /c r e al al n e a v a rp o l i l i n e a=n e wg o o g l e . m a p s . P o l y l i n e ( o p c i o n e s P o l i l i n e a ) ; Observad que la geometra y el aspecto de la polilnea vienen determinados por los atributos del objeto "opcionesPolilinea". A continuacin se detalla el papel que juega cada atributo: path: Vector de puntos que representan los vrtices de la polilnea. El primer vrtice se unir con el segundo, el segundo con el tercero, y as sucesivamente mediante sendas lneas rectas. En el ejemplo, este atributo se inicializa con el contenido del vector "puntosDePaso". Es importante observar que los objetos del vector son instancias de la clase "LatLng". strokeColor: Color de la polilnea expresado en notacin hexadecimal8 . En el ejemplo, este atributo se establece a "#ff00ff" (magenta). strokeWeight: Anchura de la polilnea expresada en pxeles. En el ejemplo, este atributo se establece a "10". strokeOpacity: Opacidad de la lnea expresada como un valor entre 0,0 y 1,0. 0,0 s totalmente transparente, y 1,0, totalmente opaca. En el ejemplo, 0,5 establece una opacidad del 50%. map: Mapa sobre el que se dibujar la lnea. Es importante destacar que, de forma predeterminada, los segmentos que unen los puntos de una polilnea se dibujan rectos respecto a la proyeccin, no respecto a la superfcie terrestre. Esto significa que, si los puntos de una polilnea estn suficientemente separados (del orden de miles de kilmetros), los segmentos que sobre el mapa son rectos sobre el terreno sern ms o menos curvos y viceversa. Esto es as porque la Tierra es esfrica, y para representarla sobre un mapa necesitamos deformarla ligeramente. Si deseamos que los segmentos de una polilnea sean lneas geodsicas (es decir, aquellas que representan la distancia ms corta entre dos puntos de la superfcie terrestre), debemos pasarle al constructor de la clase "Polyline" la opcin "geodesic: true". En el ejemplo siguiente, se representa la ruta Pars - Mosc - Pequn por partida doble: en rojo mediante lneas rectas respecto la proyeccin, y en azul mediante lneas geodsicas: < ! D O C T Y P Eh t m l > < h t m l >

< h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > P a r s-M o s c -P e q u n < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 7 . 0 ,5 9 . 0 ) , z o o m :2 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . T E R R A I N } ; v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; / /c o o r d e n a d a sd eP a r s ,M o s c yP e q u n p o s i c i o n P a r i s=n e wg o o g l e . m a p s . L a t L n g ( 4 8 . 8 5 6 5 7 8 , 2 . 3 5 1 8 2 8 ) ; p o s i c i o n M o s c u=n e wg o o g l e . m a p s . L a t L n g ( 5 5 . 7 5 2 2 2 2 , 3 7 . 6 1 5 5 5 6 ) ; p o s i c i o n P e k i n=n e wg o o g l e . m a p s . L a t L n g ( 3 9 . 9 0 5 5 5 6 ,1 1 6 . 3 9 1 3 8 9 ) ; / /d i b u j al ar u t aP a r s-M o s c -P e q u n ,u t i l i z a n d os e g m e n t o sr e c t o s / /r e s p e c t oal ap r o y e c c i n( p o l i l n e ae s t n d a r ) v a ro p c i o n e s R u t a P a r i s P e q u i n={ p a t h :[p o s i c i o n P a r i s ,p o s i c i o n M o s c u ,p o s i c i o n P e k i n] , s t r o k e C o l o r :" # f f 0 0 0 0 " , s t r o k e W e i t g h t :1 0 , s t r o k e O p a c i t y :0 . 5 , m a p :m a p a } ; v a rr u t a P a r i s P e q u i n=n e wg o o g l e . m a p s . P o l y l i n e ( o p c i o n e s R u t a P a r i s P e q u i n ) ; / /d i b u j al am i s m ar u t au t i l i z a n d or e c t a sg e o d s i c a s v a ro p c i o n e s G e o d e s i c a P a r i s P e q u i n={ p a t h :[p o s i c i o n P a r i s ,p o s i c i o n M o s c u ,p o s i c i o n P e k i n] , s t r o k e C o l o r :" # 0 0 0 0 f f " , s t r o k e W e i t g h t :1 0 , s t r o k e O p a c i t y :0 . 5 , g e o d e s i c :t r u e , m a p :m a p a } ; v a rg e o d e s i c a P a r i s P e q u i n=n e wg o o g l e . m a p s . P o l y l i n e ( o p c i o n e s G e o d e s i c a P a r i s P e q u i n ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado se muestra a continuacin. Notad que la ruta azul es la ms corta sobre la superfcie terrestre:

Datos Informar de mapa de un 2013 error de MapLink Maps

Polgonos
Aunque con un objeto "Polyline" sera posible dibujar un polgono (en el caso de que el ltimo punto fuera igual al primero), Google Maps nos ofrece una clase especializada para este propsito: "Polygon". Al igual que sucede con las polilneas, podemos definir el color, el ancho y la opacidad del borde del polgono, pero adems, el color y la opacidad del relleno.

Las lneas siguientes dibujan un polgono que delimita la superfcie de la Plaa de Catalunya de Barcelona: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > P l a ad eC a t a l u n y ad eB a r c e l o n a < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 0 2 4 ,2 . 1 6 9 9 6 0 ) , z o o m :1 6 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } ; v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; v a re s q u i n a s P l a z a=[ n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 8 7 7 ,2 . 1 6 9 9 7 1 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 4 1 8 ,2 . 1 6 8 7 4 8 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 5 8 5 6 ,2 . 1 7 0 1 4 3 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 6 9 1 9 ,2 . 1 7 1 2 0 5 ) ] ; / /d e l i m i t ae lc o n t o r n od el ap l a z a v a rc o n t o r n o P l a z a=n e wg o o g l e . m a p s . P o l y g o n ( { p a t h s :e s q u i n a s P l a z a , s t r o k e C o l o r :" # f f 0 0 0 0 " , / /c o l o rd e lc o n t o r n o s t r o k e O p a c i t y :0 . 5 , / /o p a c i d a dd e lc o n t o r n o s t r o k e W e i g h t :1 0 , / /a n c h od e lc o n t o r n o f i l l C o l o r :" # f f 0 0 0 0 " , / /c o l o rd er e l l e n o f i l l O p a c i t y :0 . 2 , / /o p a c i d a dd e lr e l l e n o m a p :m a p a / /m a p as o b r ee lq u es ed e b ed i b u j a re lp o l g o n o } ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Como se puede observar, el cdigo es casi idntico al que hemos escrito para dibujar una polilnea. Las nicas diferencias notables son el uso de la clase "Polygon" (en lugar de la clase "Polyline"), y el mayor nmero de opciones de los polgonos. El significado de cada una de las opciones se detalla a continuacin. Observad que los atributos "paths", "strokeColor", "strokeWeight", "strokeOpacity" y "map" ya se encontraban entre las opciones de las polilneas: paths: Vector de puntos que representan las esquinas del polgono. La primera esquina se unir con la segunda, la segunda con la tercera, y as sucesivamente mediante sendas lneas rectas. En el ejemplo, este atributo se inicializa con el contenido del vector "esquinasPlaza". Es importante observar que los objetos del vector son instancias de la clase "LatLng". La "s" final de "paths" no es un error: se pueden especificar varios vectores de esquinas a la vez de manera que, por ejemplo, podramos dibujar un anillo cuadrado.

strokeColor: Color del borde del polgono expresado en notacin hexadecimal. En el ejemplo, este atributo se establece a "#ff0000" (rojo). strokeWeight: Anchura del borde del polgono expresada en pxeles. En el ejemplo, este atributo se establece a "10". strokeOpacity: Opacidad de borde del polgono expresada como un valor entre 0,0 y 1,0. 0,0 es totalmente transparente, y 1,0, totalmente opaca. En el ejemplo, "0.5" establece una opacidad del 50%. fillColor: Color de relleno del polgono expresado en notacin hexadecimal. En el ejemplo, este atributo se establece a "#ff0000" (rojo). fillOpacity: Opacidad del relleno del polgono expresada como un valor entre 0,0 y 1,0. 0,0 es totalmente transparente, y 1.0, totalmente opaco. En el ejemplo, "0.2" establece una opacidad del 20%. map: Mapa sobre el que se dibujar la lnea.

Clculo de reas y longitudes

En los apartados precedentes hemos visto como dibujar polgonos y polilneas. En ste retomaremos los ejemplos anteriores para mostrar como calcular la longitud y el rea de los objetos representados. Antes de empezar, es necesario que sepis que Google Maps no carga por defecto la librera 9 que permite realizar estos clculos. La librera en cuestin se llama "geometry" y debe cargarse manualmente. Os acordis que en el apartado Crear un mapa explicamos que para acceder a la API de Google Maps era necesario incluir la API? Para hacerlo, incorporbamos las siguientes lneas en nuestro cdigo: < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? s e n s o r = f a l s e " > < / s c r i p t > Tambin comentamos que, modificndolas apropiadamente, se poda acceder a otras capacidades de Google Maps, entre ellas las libreras. Los ejemplos de este captulo utilizan las funciones de la librera "geometry". Para que funcionen correctamente, es necesario modificar las lneas anteriores de la manera siguiente: < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? l i b r a r i e s = g e o m e t r y & s e n s o r = f a l s e " > Observad que tan solo se ha agregado el parmetro "libraries=geometry".

Longitud de una polilnea

En el ejemplo siguiente se calcula la longitud en metros de la ruta Pars - Mosc - Pequn que ya habamos dibujado anteriormente: < ! D O C T Y P Eh t m l > < h t m l > < h e a d > < m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > P a r s-M o s c -P e q u n < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? l i b r a r i e s = g e o m e t r y & s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 7 . 0 ,5 9 . 0 ) , z o o m :2 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . T E R R A I N } ; v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; / /c o o r d e n a d a sd eP a r s ,M o s c yP e q u n p o s i c i o n P a r i s=n e wg o o g l e . m a p s . L a t L n g ( 4 8 . 8 5 6 5 7 8 , 2 . 3 5 1 8 2 8 ) ; p o s i c i o n M o s c u=n e wg o o g l e . m a p s . L a t L n g ( 5 5 . 7 5 2 2 2 2 , 3 7 . 6 1 5 5 5 6 ) ; p o s i c i o n P e k i n=n e wg o o g l e . m a p s . L a t L n g ( 3 9 . 9 0 5 5 5 6 ,1 1 6 . 3 9 1 3 8 9 ) ; / /d i b u j al ar u t aP a r s-M o s c -P e q u n ,u t i l i z a n d os e g m e n t o sr e c t o s / /r e s p e c t oal ap r o y e c c i n( p o l i l n e ae s t n d a r ) v a ro p c i o n e s R u t a P a r i s P e k i n={ p a t h :[p o s i c i o n P a r i s ,p o s i c i o n M o s c u ,p o s i c i o n P e k i n] , s t r o k e C o l o r :" # f f 0 0 0 0 " , s t r o k e W e i t g h t :1 0 ,

s t r o k e O p a c i t y :0 . 5 , g e o d e s i c :t r u e , m a p :m a p a } ; v a rr u t a P a r i s P e k i n=n e wg o o g l e . m a p s . P o l y l i n e ( o p c i o n e s R u t a P a r i s P e k i n ) ; / /c a l c u l al al o n g i t u de nm e t r o sd el ar u t a v a rl o n g i t u d=g o o g l e . m a p s . g e o m e t r y . s p h e r i c a l . c o m p u t e L e n g t h ( r u t a P a r i s P e k i n . g e t P a t h ( ) ) ; / /m u e s t r ae ll o n g i t u de nk m ,r e d o n d e a n d oe lv a l o r v a ro p c i o n e s V e n t a n a={ c o n t e n t :" L o n g i t u dt o t a l :"+M a t h . r o u n d ( l o n g i t u d/1 0 0 0 )+"k m " , p o s i t i o n :p o s i c i o n P e k i n } v a rv e n t a n a I n f o=n e wg o o g l e . m a p s . I n f o W i n d o w ( o p c i o n e s V e n t a n a ) ; v e n t a n a I n f o . o p e n ( m a p a ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

Longitud total: 8288 km

Datos Informar de mapa de un 2013 error de MapLink Maps

Como se puede observar, la longitud de la ruta la calculamos mediante la funcin "google.maps.geometry.spherical.computeLength()", que, atencin!, espera como parmetro un vector de objetos "LatLng" que representa la secuencia (ordenada) de vertices de la polilnea. Es importante tener claro que la funcin no espera un objeto "Polyline" sino solo sus vertices, Afortunadamente, obtener un vector con los vrtices de una polilnea es tan fcil como llamar a la funcin "getPath()" de la clase "Polyline": v a rl o n g i t u d=g o o g l e . m a p s . g e o m e t r y . s p h e r i c a l . c o m p u t e L e n g t h ( r u t a P a r i s P e k i n . g e t P a t h ( ) ) ;

Cabe destacar que la longitud obtenida corresponde a la suma de las longitudes de las lneas geodsicas que unen los vrtices adyacientes de la polilnea. Es decir, el nmero que obtenemos s la distancia mnima real (sobre la superfcie terrestre) que se debe recorrer para ir des del origen al fin de la ruta pasando por todos los puntos de paso intermedios. Es importante entender que la longitud de una polilnea depende nica y exclusivamente de la posicin de sus vrtices. Esto significa que, aunque representemos la polilnea mediante segmentos rectos respecto a la proyeccin (recordad: especificando la opcin "geodesic: false" o, simplemente, obviando esta opcin) la longitud de la polilnea no cambiar. El resto del cdigo no presenta sorpresas. Tan solo merece ser destacado el uso de la funcin "Math.round()" que redondea un nmero decimal al nmero entero ms prximo. En el ejemplo se utiliza para redondear la distancia calculada.

rea de un polgono
En el ejemplo siguiente se calcula el rea de la Plaa Catalunya de Barcelona cuya superfcie ya habamos delimitado con un polgono anteriormente: < ! D O C T Y P Eh t m l > < h t m l > < h e a d >

< m e t ah t t p e q u i v = " c o n t e n t t y p e "c o n t e n t = " t e x t / h t m l ;c h a r s e t = u t f 8 " / > < t i t l e > r e ad el aP l a ad eC a t a l u n y ad eB a r c e l o n a < / t i t l e > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " s r c = " h t t p : / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / j s ? l i b r a r i e s = g e o m e t r y & s e n s o r = f a l s e " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nI n i c i a l i z a r M a p a ( ){ / /e s t a b l e c el a so p c i o n e syc r e ae lm a p a v a ro p c i o n e s M a p a={ c e n t e r :n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 0 2 4 ,2 . 1 6 9 9 6 0 ) , z o o m :1 6 , m a p T y p e I d :g o o g l e . m a p s . M a p T y p e I d . R O A D M A P } ; v a rm a p a=n e wg o o g l e . m a p s . M a p ( d o c u m e n t . g e t E l e m e n t B y I d ( " e l e m e n t o _ m a p a " ) ,o p c i o n e s M a p a ) ; v a re s q u i n a s P l a z a=[ n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 8 7 7 ,2 . 1 6 9 9 7 1 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 7 4 1 8 ,2 . 1 6 8 7 4 8 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 5 8 5 6 ,2 . 1 7 0 1 4 3 ) , n e wg o o g l e . m a p s . L a t L n g ( 4 1 . 3 8 6 9 1 9 ,2 . 1 7 1 2 0 5 ) ] ; / /d e l i m i t ae lc o n t o r n od el ap l a z a v a rc o n t o r n o P l a z a=n e wg o o g l e . m a p s . P o l y g o n ( { p a t h s :e s q u i n a s P l a z a , s t r o k e C o l o r :" # f f 0 0 0 0 " ,/ /c o l o rd e lc o n t o r n o s t r o k e O p a c i t y :0 . 5 , / /o p a c i d a dd e lc o n t o r n o s t r o k e W e i g h t :1 0 , / /a n c h od e lc o n t o r n o f i l l C o l o r :" # f f 0 0 0 0 " , / /c o l o rd er e l l e n o f i l l O p a c i t y :0 . 2 , / /o p a c i d a dd e lr e l l e n o m a p :m a p a / /m a p as o b r ee lq u es ed e b ed i b u j a re lp o l g o n o } ) ; / /c a l c u l ae l r e ae nm e t r o sc u a d r a d o sd e lp o l g o n o v a ra r e a=g o o g l e . m a p s . g e o m e t r y . s p h e r i c a l . c o m p u t e A r e a ( c o n t o r n o P l a z a . g e t P a t h ( ) ) ; / /m u e s t r ae lr e s u l t a d o v a ro p c i o n e s V e n t a n a={ c o n t e n t :" r e at o t a l :"+M a t h . r o u n d ( a r e a )+"m < s u p > 2 < / s u p > " , p o s i t i o n :m a p a . g e t C e n t e r ( ) } v a rv e n t a n a I n f o=n e wg o o g l e . m a p s . I n f o W i n d o w ( o p c i o n e s V e n t a n a ) ; v e n t a n a I n f o . o p e n ( m a p a ) ; } < / s c r i p t > < / h e a d > < b o d yo n l o a d = " I n i c i a l i z a r M a p a ( ) " > < d i vi d = " e l e m e n t o _ m a p a "s t y l e = " w i d t h :5 0 0 p x ;h e i g h t :3 0 0 p x " > < / d i v > < / b o d y > < / h t m l >

El resultado es el siguiente:

rea total: 22684 m 2

Datos de mapa 2013 Google, basado Informar en deBCN un error IGN de Espaa Maps

Como se puede observar, el rea del polgono la calculamos mediante la funcin "google.maps.geometry.spherical.computeArea()", de forma muy parecida a como calculbamos la longitud de una polilnea. En este caso, la funcin tambin espera un vector de objetos "LatLng" que representa la secuencia (ordenada) de vertices del polgono, no el objeto "Polygon" en s.

Resumen

Despus de aprender a programar aplicaciones SIG de escritorio, en este mdulo se ha hecho lo propio con aplicaciones web. Si en el caso de las aplicaciones de escritorio nos hemos basado en un sistema ya implementado (gvSIG), con las aplicaciones web hemos hecho algo parecido: hemos utilizado la API pblica de Google Maps. Antes de abordar la estructura y las funciones de la API, hemos aprendido a crear una pgina web simple y a incorporarle un mapa. Despus, hemos utilizado las funciones de la API para personalizar la presentacin del mapa (coordenadas iniciales, zoom y tipo de mapa) y representar puntos, y hemos aprendido a transformar las coordenadas del mapa a coordenadas geogrficas. Finalmente, se han estudiado las funciones que permiten dibujar lneas y polgonos, caracterizando rutas y reas que, ms tarde, mediante funciones dedicadas, hemos podido medir. Aunque todos los ejemplos estn basados en la API de Google Maps, las tcnicas explicadas en este mdulo se pueden extrapolar ms o menos directamente a otras API, libres o comerciales.

Footnotes
1. http://www.w3.org/Amaya 2. http://bluefish.openoffice.nl 3. http://www.adobe.com/products/dreamweaver 4. http://mosaic.uoc.edu/2009/06/20/introduccion-a-la-creacion-de-paginas-web 5. La documentacin completa de la API de Google Maps se puede encontrar en: http://code.google.com/intl/es/apis/maps/documentation/javascript/ 6. Una polilnea es una serie de segmentos conectados. 7. Este ejemplo slo pretende mostrar cmo trazar lneas con un objeto "Polyline". Google Maps tiene mecanismos propios para trazar rutas entre dos puntos automticamente. Si nuestro objetivo es obtener una ruta por carretera para ir de una direccin a otra, deberamos usar la clase "DirectionsService". 8. El cdigo de color se puede obtener de cualquier herramienta de dibujo o edicin fotogrfica. Tambin hay paletas de colores disponibles en la Web (por ejemplo, en Wikipedia: http://es.wikipedia.org/wiki/Colores_HTML#Tabla_de_colores). 9. Una librera es un conjunto de funciones que se ofrecen a un programa. Las libreras son independientes de los programas y normalmente se desarrollan por separado.
page re vision: 29, last e dite d: 22 May 2012, 13:19 (526 days ago)

Edit

Tags

History

Files

Print

Site tools

+ Options

Powered by Wikidot.com

Help | Terms of Service | Privacy | Report a bug | Flag as objectionable

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License