Skapa en WMS klient på din GeoServer

GeoServer kan förhandsvisa data från sina tjänster via exempelvis OpenLayers, men som jag nämnt i tidigare inlägg så kan en del uppleva OpenLayers som lite krångligt.

Då är Leaflet betydligt enklare och här följer en instruktion för hur du skapar en sida på din egen GeoServer.

Grundförutsättningen är Ubuntu Server 12.04 LTS med GeoServer installerat (se tidigare inlägg). IP adressen till min virtuella server är 192.168.0.25 så detta skall du ersätta med IP adressen för din egen server.

Börja med att hämta och packa upp Leaflet.

wget https://github.com/Leaflet/Leaflet/zipball/v0.5.1
unzip v0.5.1

Kopiera applikationsfilerna till webbroten och skapa klientsidan.

sudo cp -r Leaflet-Leaflet-0deed73/dist/ /var/lib/tomcat7/webapps/ROOT/leaflet
cd /var/lib/tomcat7/webapps/ROOT/
sudo vi leaflet.htm

Skriv in följande

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”leaflet/leaflet.css” />
<script type=”text/javascript” src=”leaflet/leaflet.js”></script>
</head>
<body>
<b>Min karta</b>
<div id=”map” style=”width:1200px; height:800px;”></div>
<script type=’text/javascript’>
var map;
var m = new L.TileLayer.WMS(”http://192.168.0.25:8080/geoserver/wms”, {
layers: ‘tiger-ny’,
format: ‘image/png’
});
</script>
</body>
</html>

Sedan är det bara att surfa in på sidan 192.168.0.25:8080/leaflet.htm och njuta av ”Lower Manhattan” från din egen GeoServer.

Skärmbild från 2013-03-16 17:41:52

Du kan enkelt redigera leaflet.htm filen ovan för att visa valfritt WMS lager från din GeoServer.

Vill du fixa till ännu mera så finns det en del exempel på Leaflets hemsida och ännu flera på andra sidor på Internet.

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: