GeoExt som webbklient

GeoExt är ett Java Toolkit för att skapa webbkartor. Det bygger på OpenLayers och Ext JS, vilket tillsammans ger ett kompetent verktyg att skapa kartor på nätet med.

Men hur lätt är det att hantera?

Här visar jag hur du installerar på din GeoServer och skapar en enkel sida för att visa en karta.

sudo wget https://github.com/downloads/geoext/geoext/GeoExt-1.1.zip
sudo wget http://extjs.cachefly.net/ext-3.4.0.zip
sudo wget http://openlayers.org/download/OpenLayers-2.12.zip
unzip GeoExt-1.1.zip
unzip ext-3.4.0-gpl.zip
unzip Openlayers-2.12.zip
sudo cp -r GeoExt/ /var/lib/tomcat7/webapps/ROOT/geoext
sudo cp -r ext-3.4.0/ /var/lib/tomcat7/webapps/ROOT/ext
sudo cp -r OpenLayers-2.12/ /var/lib/tomcat7/webapps/ROOT/openlayers

Så till HTML-koden. Skapa ett htm-dokument: sudo vi /var/lib/tomcat7/webapps/ROOT/geoext.htm, och skriv in koden nedan.

<html>
<head>
<script src=”ext/adapter/ext/ext-base.js” type=”text/javascript”></script>
<script src=”ext/ext-all.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”ext/resources/css/ext-all.css”></link>
<script src=”openlayers/OpenLayers.js” type=”text/javascript”></script>
<script src=”geoext/lib/GeoExt.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”geoext/resources/geoext-all-debug.css”></link>

<script type=”text/javascript”>
Ext.onReady(function() {
var map = new OpenLayers.Map();

var layer = new OpenLayers.Layer.WMS(
”New York”,
http://192.168.0.25:8080/geoserver/wms&#8221;,
{layers: ”tiger-ny”}
);

map.addLayer(layer);

new GeoExt.MapPanel({
renderTo: ‘gxmap’,
height: 400,
width: 600,
center: [-74.00902,40.71143],
zoom: 14,
map: map,
title: ‘Min GeoExt-karta’
});

});

</script>
</head>
<body>
<div id=”gxmap”></div>
</body>
</html>

Sedan är det bara att surfa in på sidan i din webbläsare.

Skärmbild från 2013-03-16 21:53:03

Nu skall jag bara sätta mig in i tekniken bakom det hela och se om jag kan bestämma mig för om jag tycker att GeoExt med OpenLayers eller Leaflet passar mig bäst. Vi får se när det blir lite tid över för ett nytt inlägg om detta.

Annonser

Taggar:,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: