PDF de programación - Programación SIG en entornos web

Programación SIG
en entornos web

Albert Gavarró Rodríguez

PID_00174757

© FUOC • PID_00174757

2

Programación SIG en entornos web

© FUOC • PID_00174757

Índice

Programación SIG en entornos web

Introducción ..........................................................................................

Objetivos .................................................................................................

1. El lenguaje HTML ............................................................................
1.1. La Web y el HTML ........................................................................
1.2. Elementos y etiquetas ...................................................................
1.3. Estructura mínima de un documento HTML ...............................
1.4. Definición del contenido .............................................................
1.4.1. Elementos estructurales .....................................................
1.4.2. Elementos de presentación ...............................................
1.4.3. Elementos de hipertexto ...................................................

2. Google Maps ......................................................................................
2.1. Incorporar un mapa en una página .............................................
2.2. La API de Google Maps .................................................................
2.2.1. Crear un mapa ...................................................................
2.2.2. Tipos de mapas ..................................................................
2.2.3. Transformación de coordenadas .......................................
2.2.4. El viewport ..........................................................................
2.2.5. Líneas y polígonos ............................................................

5

6

7
7
7
9
10
10
12
13

15
15
17
18
21
23
26
30

Resumen ..................................................................................................

36

Bibliografia ............................................................................................

37

© FUOC • PID_00174757

Programación SIG en entornos web

© FUOC • PID_00174757

Introducción

5

Programación SIG en entornos web

En el módulo anterior, hemos aprendido a extender un SIG de escritorio (gvSIG)
para adaptarlo a nuestras necesidades. También hemos aprendido a agregar
nuevas capas por código y elementos georeferenciados en ellas.

En este bloque aprenderemos a hacer prácticamente lo mismo pero en entornos
web. Estudiaremos cómo construir una página web y cómo incorporarle un
mapa. Aprenderemos también a agregar elementos georeferenciados al mapa
que nos servirán 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 módulo se centrará en el estudio de
Google Maps. Sin embargo, las técnicas que se explicarán serán fácilmente
trasladables a los otros servicios.

© FUOC • PID_00174757

Objetivos

6

Programación SIG en entornos web

Al final de este módulo, deberíamos ser capaces de:

1. Crear páginas web simples en las que se muestre un mapa.

2. Mostrar un tipo de mapa u otro dependiendo de nuestras necesidades.

3. Agregar marcadores georreferenciados a un mapa para señalar lugares.

4. Dibujar líneas y polígonos georreferenciados en un mapa para mostrar rutas o

delimitar áreas.

5. Convertir las coordenadas de un mapa a coordenadas geográficas y viceversa.

© FUOC • PID_00174757

7

Programación SIG en entornos web

1. El lenguaje HTML

1.1. La Web y el HTML

La World Wide Web, que se abrevia WWW y se conoce también como la Web,
es un sistema de páginas enlazadas mediante el concepto de hipertexto. El hi-
pertexto 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 página web en Internet. Si bien el HTML es un lenguaje
muy directo, en el que buena parte del código es el contenido propiamente di-
cho del documento, como contrapartida es engorroso de escribir. Así, por
ejemplo, para mostrar una palabra en negrita, es necesario intercalar en el tex-
to más de media docena de caracteres extras.

Hoy en día han aparecido muchísimas herramientas que permiten generar pági-
nas 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. Además, hay herramientas altamente espe-
cializadas que generan páginas de altísima calidad en poco tiempo y con el mí-
nimo esfuerzo, como por ejemplo Amaya*, Bluefish** o Dreamweaver***.

* http://www.w3.org/Amaya

** http://bluefish.openoffice.nl/

*** http://www.adobe.com/

products/dreamweaver

Dada la existencia de estas herramientas de edición y puesto que el objetivo
de estos materiales no es profundizar en el conocimiento del HTML, sólo
daremos unas pocas pinceladas sobre este lenguaje, las necesarias para escribir
páginas relativamente sencillas y para comprender los ejemplos que se tra-
bajarán en el resto del módulo. Sin embargo, la UOC dispone de materiales
abiertos que profundizan en el lenguaje HTML*.

* http://mosaic.uoc.edu/2009/11/
20/introduccion-a-la-creacion-de-

paginas-web/

1.2. 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 imágenes.

Un típico código HTML está formado por elementos que configuran las distin-
tas partes del documento. Generalmente, estos elementos están delimitados
por una etiqueta de inicio y otra de fin, que se escriben siempre entre corche-
tes angulares ("<" y ">").

© FUOC • PID_00174757

8

Programación SIG en entornos web

* El símbolo indica la ruptura de
una línea de texto por motivos de
formato. En consecuencia, las líneas

separadas por este símbolo
deberían considerarse como

una de sola.

Por ejemplo, la línea siguiente:

<p>La WWW nació en el CERN.</p>

define un elemento (párrafo) cuyo contenido es “La WWW nació en el
CERN.”. Como podemos ver, las etiquetas de inicio y fin (<p> y </p> respecti-
vamente) delimitan el contenido del párrafo. Además, la etiqueta de fin es
igual que la de inicio pero precedida por una barra (“/”).

Hay elementos que sólo tienen una etiqueta de inicio, pues carecen de conte-
nido textual. Es el caso, por ejemplo, de las imágenes. Las líneas siguientes*:

El primer logotipo de la WWW:
<img src="http://upload.wikimedia.org/wikipedia/ 
commons/thumb/b/b2/WWW_logo_by_Robert_Cailliau.svg/ 
120px-WWW_logo_by_Robert_Cailliau.svg.png">

muestran la imagen que se encuentra en la dirección:
http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/
WWW_logo_by_Robert_Cailliau.svg/120px-WWW_logo_by_Robert_Cailliau.
svg.png. El resultado será el siguiente:

Observad la estructura que aparece dentro de la etiqueta de inicio:

src="http://upload.wikimedia.org/wikipedia/commons 
thumb/b/b2/WWW_logo_by_Robert_Cailliau.svg/120px 
WWW_logo_by_Robert_Cailliau.svg.png"

Todos los elementos HTML tienen atributos que varían de un elemento a otro
según sus características. Dichos atributos permiten variar la forma en la que
se presenta el elemento. En el caso de las imágenes, tienen un atributo “src”
(de source, ‘fuente’) que indica la dirección web en la que se encuentra la ima-
gen. Como se puede apreciar en el ejemplo, el valor de los atributos siempre
especifíca en la etiqueta de inicio.

© FUOC • PID_00174757

9

Programación SIG en entornos web

Una última característica importante de los elementos HTML es que se pueden
imbricar. Es decir, en su contenido un elemento puede contener otros elemen-
tos que, a su vez, pueden contener otros, y así sucesivamente, formando una
jerarquía de elementos.

El código siguiente:

<p>WWW significa <em>World Wide Web</em>.</p>

define un párrafo que contiene una texto enfatizado (World Wide Web). Es im-
portante 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.

1.3. Estructura mínima de un documento HTML

Un documento HTML bien formado debe presentar siempre la siguiente es-
tructura mínima:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Título del documento</title>
</head>
<body>
Contenido del documento.
</body>
</html>

Como podemos observar, la estructura mínima de un documento HTML está
formada por cinco elementos:

• DOCTYPE. Especifica la versión del lenguaje HTML que obedece el docu-

mento (en el ejemplo, la 4.01).

• HTML. Es el elemento raíz, el que define el documento HTML en sí. Con-
tiene 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 español).

© FUOC • PID_00174757

10

Programación SIG en entornos web

• HEAD. Define la cabecera del documento, cuyo cometido es alojar in-
formación sobre el mismo. El título, las palabras clave y otros datos que
no se consideran parte del contenido del documento irán dentro de este
elemento.

• TITLE. Define el título del documento.

• BODY. Define el contenido del documento. Este elemento contendrá otros

que definirán el contenido del documento.

1.4. Definición 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 títulos, párrafos, tablas, enu-
meracion