I detta inlägg så skall det handla om att skapa egna webbapplikationer, i stället för att förlita sig på GeoExplorer. Så om man valt att inte installera OpenGeo Suite, utan nöjt sig med QGIS Server med data i PostGIS, så är det här man skall börja för att skapa sina webbkartor och tjänster.
För att bygga applikationer så kan man använda skriptspråk som antingen körs på servern (som PHP) eller på klienten (JavaSkript – JS). Det vanligaste i kartappar är någon form av JavaSkript, där OpenLayers berörts tidigare i samband med GeoExplorer.
Om man använder Tomcat som webbserver (port 8080, installeras med OpenGeo Suite) så är startsökvägen på servern /var/lib/tomcat6/webapps/ROOT. Där kan nya kataloger skapas med webbsidor och javascript.
Om man i stället vill använda Apache (port 80, installeras med QGIS Server) så är sökvägen på servern /var/www/. I mina exempel så kommer jag att använda Apache, men om du vill ha Tomcat så går det också fast du får anpassa sökvägarna lite.
Det kan vara en bättre idé att ha en separat webbserver för att sprida trafiken, men även för att det kan vara fler andra typer av tjänster man vill publicera på en webbserver som också behöver installeras och skötas. Men för att testa sina webbkartor så fungerar någon av dessa utmärkt.
Ett sätt att ordna detta enkelt är att skapa en ny delad katalog på servern på samma sätt som tidigare.
mkdir /var/www/webbkartor chmod 777 /var/www/webbkartor/ vim /etc/samba/smb.conf
Redigera filen på samma sätt som för de övriga delade resurserna:
[webbkartor] path = /var/www/webbkartor browsable = yes writable = yes guest ok = yes read only = no
Starta om Samba med service smbd restart.
Nu går det att skapa webbsidor med kartor bäst man vill i denna delade katalog och testa gör man på adressen:
http://192.168.1.42/webbkartor/filnamn.htm
Naturligtvis anpassat till serverns IP-adress. Vill man använda lokala javaskript och stilmallar så rekommenderas det att skapa underkataloger som ”script” och ”styles”. Kanske även ”images” och ”data” kan vara lämpliga kataloger att använda, så att startkatalogen blir så ren som möjligt.
Open Layers 3
Tänker man bygga sin app på OpenLayers så kan man göra det genom att hämta JavaSkript-biblioteket till den lokala servern, eller använda ett bibliotek online. Vill man hämta betaversionen av OpenLayer3 så gör man det på följande adress:
https://github.com/openlayers/ol3/releases/download/v3.0.0-beta.1/OpenLayers-v3.0.0-beta.1.zip
Beroende på när du läser detta så kan det vara läge att kontrollera om det finns en senare version av OpenLayer3 tillgängligt.
Packa upp i en skriptkatalog i den utdelade katalogen. De filer som behövs är de som finns i ”build” katalogen.
Vill man testa att det fungerar med OpenLayer3 så kan man skapa ett htm-dokument med nedanstående text.
<!doctype html>
<html lang="se">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 Exempel</title>
</head>
<body>
<h2>Min Karta</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuestOpenAerial()
})
],
view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
För att testa med eget javaskript så ändras sökvägen till ”ol.js” och ”ol.css” så att de pekar på den egna javaskriptkatalogen, med relativ sökväg. Exempelvis:
”script/ol.js”
Leaflet
På samma sätt som ovan kan man välja att använda Leaflet.js, eller något annat javaskript för webbkartor för den delen.
Leaflet är byggt för att vara så litet som möjligt och saknar därför en del funktioner som finns i OpenLayers. Däremot så finns det massor med tilläggsskript för Leaflet, så de funktioner som man saknar kan gå att tillföra ganska enkelt, men man slipper dras med ett onödigt stort javaskriptbibliotek. Leaflet hämtas från adressen nedan och packas upp till den tidigare skapade katalogen ”script”.
http://leaflet-cdn.s3.amazonaws.com/build/leaflet-0.7.1.zip
Även här kan det vara läge att kontrollera att man laddar hem den senaste versionen.
För att testa leaflet kan ett annat exempel användas. Skapa filen leaflet.htm i katalogen ”webbkartor” och skriv in följande.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Layers Control Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="script/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 450px"></div>
<script src="script/leaflet.js"></script>
<script>
var cities = new L.LayerGroup();
var cmAttr = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
var minimal = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
midnight = L.tileLayer(cmUrl, {styleId: 999, attribution: cmAttr}),
motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [minimal, motorways, cities]
});
var baseLayers = {
"Minimal": minimal,
"Night View": midnight
};
var overlays = {
"Motorways": motorways,
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
Med ovanstående enkla exempel så går det att ”känna” lite på Leaflet och OpenLayers, men det kanske inte är tillräckligt för attt bestämma sig. Det finns massor med exempel på Internet och man kan bygga applikationer med det script man fastnar mest för.
I nästa inlägg så blir det mera detaljer och exempel med Leaflet som grund.