Etikettarkiv | OpenLayers

Nästan för enkelt…

Igår pratade jag om PNG vs JPG i tiles för webbkartor. I dag tänkte jag lite snabbt visa vad det är jag hållit på med och som rubriken antyder så var det faktiskt förvånansvärt enkelt.

Jag säger inte att vem som helst klarar av det, för du behöver skapliga kunskaper i java-skript, men det mesta kan man faktiskt googla sig till, och modifiera efter önskemål.

Skärmbild från 2015-11-07 17:38:22 Läs mer…

OpenLayers 3 – Högt tempo

I förra veckan släpptes Open Layers 3.4 vilket fick mig att reagera lite eftersom jag tyckte ol 3.0 släpptes alldeles nyss.

Skärmbild från 2015-03-29 12:40:05Som framgår av bilden ovan så släpptes v3.0 runt den 29 Augusti, följt av 3.1 i December, 3.2 i Februari och 3.3 i början på Mars…

I det här tempot så släpps väl 3.5 om fjorton dagar!

Vad är det då som hänt mellan versionerna.

3.1 Innehöll 214 ”pull requests” och man lyfter särskilt fram rendering av punkter med WebGL, iteraktion med UTF-Grid, Stilar med alternativa geometrier (?), det går att ladda bibliotek med ”module loaders” och några ytterligare.

3.2 Denna hade 70 ”pull requests” och innehöll bland annat förbättringar i KML-formatet, WMTS ”GetCapabilities”, WebGL stöd för ”feature hit” för punktlager med mera.

3.3 Här var det 40 ”pull requests” med bland annat stöd för ArcGIS REST tile layers, mer stöd för WMTS och en funktion för att panorera kartan automatiskt när exempelvis pop-up fönster används.

Fram till 3.2 så var allt bakåtkompatibelt, men i 3.3 så ändrade man ”mouseMove” till ”pointerMove”. Uppgraderar du så behöver du alltså kontrollera om du använder ”mouseMove” och i så fall ändra.

3.4 Den senaste utgåvan har mer än 40 ”pull requests” där exempelvis dateline wrapping för tile-lager lagts till. Draw kan nu även rita en cirkel.

Det verkar faktiskt som att man planerar att släppa en ny version varje månad framöver, så vi får väl se vad som händer i nästa release. Räkna med en version 3.5 i April, eller om det är många rapporterade buggar i 3.4 en version 3.4.1 ganska snart. Det är nämligen en så kallad ”code sprint” i Schladming denna vecka.

Temat för denna är dock att göra Open Layers mer användarvänligt så vi får väl se vad som händer framöver, och när vi kan se frukten av dessa ambitioner.

Det är ett otroligt tempo och aktivitet i Open Layers projektet med mängder av utvecklare inblandade. Exempelvis så är ArcGIS Rest funktionen ett resultat av att nya utvecklare anslutit sig till projektet. Detta tillägg har dessutom fått en bugg fixad i 3.4 så att det även skall fungera på Retina-skärmar.

OpenLayers Vs Leaflet

Ok! Då har OpenLayers släppt version 3.2 med en hel del förbättringar medan Leaflet inte håller samma tempo, för tillfället.

OpenLayers har en ordentlig organisation bakom sig som utvecklar biblioteket, medan Leaflet är mera beroende av ett ”comunity”. I princip så är det en person som står bakom Leaflet med stöd från exempelvis MapBox, nämligen Vladimir Agafonkin (”kudos”).

Vad är då skillnaden, och går det att ställa de båda mot varandra?

Det enkla svaret på den senare frågan är, nej det går inte att ställa dem mot varandra. De är skapade för två olika tillämpningar där överlappningen mellan de båda varierar beroende på vilken tillämpning man ser framför sig. Som jag ser det så är det därför inte en tävling, utan ett viktigt val man ställs inför när man skall skapa en karttjänst för webben.

It’s not a competition! It’s an important choice!

Kortfattat så är Leaflet enklare och ett mycket mindre skriptbibliotek, vilket gör det potentiellt mycket snabbare. Man skryter med 33 kB JavaScript, medan OpenLayers är större men har betydligt fler inbyggda funktioner.

Med OpenLayers så får du väldigt mycket funktionalitet inbyggt, medan Leaflet erbjuder det mesta av dessa funktioner som tillägg man kan baka in i sina webbkartor, vilket naturligtvis ökar på storleken något.

Har man således inte något behov av att bygga komplicerade eller omfattande karttjänster, utan är mer intresserad av att publicera enkla digitala kartor och lager snabbt och enkelt, så är Leaflet det naturliga lagret.

Vill man bygga mer avancerade tjänster och direkt ha tillgång till väldigt mycket funktioner, och inte oroar sig jättemycket för att Internet kan vara långsamt så är OpenLayers vägen att gå.

Om man hamnar någonstans mitt emellan så kan man gå åt båda hållen.

Om man tänker välja Leaflet så gäller det att läsa på så att allt man vill göra går att åstadkomma med tillgängliga tillägg, annars så skulle jag nog rekommendera OpenLayers om man är osäker.

Vad väljer jag då?

När jag vill skapa en snabb inbäddad karta baserad på exempelvis WMS tjänster eller WMTS och kanske något enkelt vektorlager i exempelvis GeoJSON så brukar det bli Leaflet.

När jag skall göra något mera avancerat eller skall påbörja ett utvecklingsprojekt så blir det oftast OpenLayers, eftersom jag faktiskt kan göra mer med det, och det inte går att göra allt (oavsett tillägg) med Leaflet. Att OpenLayers skulle vara så mycket långsammare är säkert mätbart, men vad man upplever i praktiken kan vara något annat.

Tidigare inlägg:

OpenLayers
Leaflet

OBS: Det finns naturligtvis andra alternativ till att skapa webbkartor på Internet, men här har jag valt de två största fria alternativen som därför förtjänar lite uppmärksamhet som ”betalning” för det jobb man lägger ner.

Sida med OpenLayers3

I detta inlägg kommer jag att använda Boundless OpenGeoSuite för att skapa en karta som webbtjänst baserad på OpenLayers3, med hjälp av Boundless SDK.

Jag använder en Linux Ubuntu 14.04 LTS Server, där jag följt instruktionerna för att installera Boundless OpenGeoSuite.

Sedan installeras SDK med:

apt-get install opengeo-webapp-sdk

Det går att installera utvecklingsmiljön på en fristående dator, så länge JDK är installerat och konfigurerat.

För att skapa en ny applikation så är det enklast att skapa en ”mall” i en katalog på lämplig plats:

suite-sdk create apptest ol3view

Kommandot skapar en katalog (”apptest”) på aktuell sökväg och använder ”mallen” ol3view. Det finns även mallarna ”gxp” och ”ol3edit”, som skapar lite annorlunda sidor.

Tjänsten måste konfigureras, men det går redan nu att titta på hur den ser ut. Om du installerat på en server med OpenGeoSuite så kommer dessutom vissa data att hittas utan problem. På servern startas ”debug” med kommandot:

suite-sdk debug /root/apptest

Du får naturligtvis använda den sökväg som du själv använt. Sedan går det att öppna en webbläsare på adressen http://servernamn:9080.

Screenshot from 2014-12-24 12:22:31Om du har en anpassad installation av OpenGeoSuite så kan du behöva sätta upp en proxy för servern för att det skall funger. Du kan läsa mer om detta på Boundless dokumentationssidor.

Debuggservern stoppas med Ctrl+C, vilket gör det möjligt att exempelvis redigera konfigurationsfilen. För att sedan testa igen, så anger man samma debuggkommando.

vim /usr/share/opengeo/apptest/src/app/apptest.js

Ovanstående kommando öppnar den mest centrala konfigurationsfilen i mitt exempel. Du kan använda en annan editor om du vill och sökvägen skall anpassas.

Screenshot from 2014-12-24 12:36:07Jag tänker inte gå in på hur du kan konfigurera ”appen” i detta inlägg, men det mesta vanliga görs i denna fil.

När man gjort sina ändringar och testat med debug så är det dags att driftsätta appen. Detta görs genom att först ”packa” appen till en war-fil och därefter ”installera” den på servern.

suite-sdk package /root/apptest /usr/share/opengeo/

Ovanstående kommando skapar filen ”apptest.war” på den andra angivna sökvägen. Om man inte anger en andra sökväg så skapas filen på den sökväg där man för tillfället befinner sig.

För att installera så måste ett antal saker göras. Först skall war-filen packas upp på den önskade sökvägen.

unzip /usr/share/opengeo/apptest.war -d /usr/share/opengeo/apptest/

Skapa en xml-fil och öppna den för redigering för att konfigurera webbservern med den nya appen.

vim /etc/tomcat6/Catalina/localhost/apptest.xml

Jag skriver in nedanstående text i min fil, baserat på mina sökvägar etc.

<Context displayName="apptest" docBase="/usr/share/opengeo/apptest" path="/apptest"/>

OBS! Glöm inte bråktecknet på slutet. Jag gjorde det och fick ingenting att fungera. Sedan är det bara att starta om webbservern med kommandot:

service tomcat7 restart

Tada! Sidan går att se på http://servernamn:8080/apptest.

Nu skall jag testa att skapa lite anpassade sidor och se hur det går…

Egen server för geodatatjänster – Del 6

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 &copy; 2011 OpenStreetMap contributors, Imagery &copy; 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.

Kart-Älg

Såhär i älgjaktstider så kan man fundera på vad älgar har med kartor att göra, men i detta inlägg så handlar det helt enkelt om en programsvit vid namn GeoMoose.

Det är ett paket med kartmotor (MapServer) och webklient (OpenLayers) samt ett verktyg för att bygga webbaplikationer (DojoToolkit).

Det går att ladda hem och installera i både Linux och Windows, men som vanligt så får man jobba lite mera för det i Linux. Det går även att installera i andra UNIX-liknande system som OS X, men detta har jag inte tänkt testa.

För att testa vad som är möjligt så kan du bara gå till http://demo.geomoose.org/master.

Det är som sagt mer än bara en karta och mycket av den vanliga GIS-funktionaliteten finns i applikationen. Hur lätt det är att bygga egna applikationer som denna demo vet jag inte, men det kanske blir ett test så småningom. Jag vet heller inte hur lätt det är att hantera data och integrera den i andra strukturer som PostGIS exempelvis. Det är ju trots allt MapServer och inte GeoServer som ligger i grunden, och det var länge sedan jag provade MapServer. Det kanske också får bli ett test längre fram.

Demon i sig är inte märkvärdig eller extraordinär på något sätt utan uppför sig som förväntat. Man känner även igen sig med utseendet på knappar och liknande från OpenLayers, så det är inget konstigt där heller.

Nåja, åter till älgjakten. I ett inlägg i morgon tänkte jag ha lite älgjaktstema och vad man kan använda GIS till för detta ändamål.

OpenLayers och WFS-T

Tidigare inlägg om OpenLayers har handlat om vad det är och hur man visualiserar data. I detta inlägg är det dags att lägga till ett lager som går att redigera direkt i webbkartan.

För att detta skall fungera så använder jag mig av Web Feature Services med Transactions eller WFS-T, som ingår som standard i GeoServer.

Jag utgår från det OpenLayers-projekt jag tidigare gjort, och lägger till ett vektorlager från min PostGIS databas via GeoServer och WFS. Man behöver inte ha GeoServer utan det går exempelvis lika bra med ArcGIS Server som också har stöd för WFS-T, men här handlar det om Open Source. Läs mer…