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:
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>
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css” />
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css” />
<script src=”http://openlayers.org/api/2.8/OpenLayers.js”></script>
<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”,
{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.
Archivado bajo:Software, Uncategorized
























































Algo que gostaríamos de ver ainda mais presente neste nosso e vosso encontro é a presença de questões e de esclarecimentos! De algum modo vejo ainda uma certa timidez por parte de alguns utilizadores e colaboradores e desejaria que todos juntos pudéssemos partilhar tudo o que fizer sentido e aproveitar ao máximo o tempo que vamos estar juntos! Reforço uma vez mais a partilha, não de dados mas, neste caso, de conhecimento de modo a todos podermos fazer mais, melhor e mais rápido!








Uma vez mais, convido-vos a partilhar as vossas experiências neste encontro dedicado a todos os utilizadores e interessados em tecnologia ESRI e sobretudo em Sistemas de Informação Geográfica.
