Visualizador de mapas con librería GeoExt

La librería GeoExt es una herramienta utilizada para construcción de aplicaciones web de mapas basada en javascript. Para comenzar a utilizarla la podemos descargar de la siguiente dirección:

http://www.geoext.org/

Una vez descomprimido el archivo, tendremos varios archivos que son los siguientes:

Esta carpeta incluye ejemplos de como poder utilizar la librería, para nuestro caso necesitaremos únicamente la carpeta “script” que tendremos que pegar en nuestro sitio web. Creamos una carpeta y dentro de ella creamos un archivo index.html vacío y pegamos la carpeta “script” que venía en la librería de GeoExt. La forma de trabajar será la presentación en un lado y la programación del mapa por otro, por lo que tendremos que generar un tercer archivo con extensión .js Por el momento tendríamos que tender lo siguiente:

Comenzamos por editar la página en donde situaremos el mapa, por lo que en el encabezado <head> del html colocaremos las siguientes líneas de código que harán las llamadas a los diferentes archivos, nótese que en la línea marcada en rojo es donde se llama a la carpeta “script”

<head>
<title>Ejemplo de GeoExt</title>
<script type=”text/javascript” src=”http://extjs.cachefly.net/builds/ext-cdn-771.js”></script&gt;
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css&#8221; />
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css&#8221; />
<script src=”http://openlayers.org/api/2.8/OpenLayers.js”></script&gt;
<script type=”text/javascript” src=”script/GeoExt.js”></script>
<script type=”text/javascript” src=”mapa.js”></script>
</head>

Dentro del cuerpo <body> del archivo en donde se colocará el mapa es necesario llamar al div que hace referencia

<div id=”mappanel”></div>

En este punto nuestro archivo de presentación index.html debería tener la siguiente forma:

Ya con este archivo nos vamos a la construcción de archivo de mapa, que será “mapa.js” que estará dentro de la carpeta con el archivo index.html. Crearemos el archivo y comenzaremos con la programación.

Iniciamos con la declaración de variable de tipo mapa

var mapPanel;

Luego procederemos a la creación del mapa en sí con la siguiente linea

Ext.onReady(function() {

var map = new OpenLayers.Map();

Tendremos que agregarle la capa de información, en este caso será con geoserver en el portal de SEGEPLAN que provee esos servicios para Guatemala. Luego terminamos añadiendola al mapa

var layer = new OpenLayers.Layer.WMS(
“Carreteras IGN 2010”,
http://demo.opengeo.org/geoserver/wms&#8221;,
{layers: ‘carreteras’}
);
map.addLayer(layer);

Se procede a generar el panel que contendrá el mapa, el cual contiene el tamaño título, etc. Es IMPORTANTE definir las coordenadas de las capas en tipo latitud y longitud.

mapPanel = new GeoExt.MapPanel({
title: “Ejemplo GeoExt”,
renderTo: “mappanel”,
height: 400,
width: 600,
map: map,
center: new OpenLayers.LonLat( -90 , 15),
zoom: 6
});
});

Con esto ya tenemos realizado nuestro mapa, y el archivo “mapa.js” debería tener esta forma

Hay que verificar que nuestros archivos estén de la siguiete forma:

Cuando todo esté en orden tendremos una página como la siguiente, en donde se presenta la información obtenida través de un servicios WMS.

Anuncios