OpenLayers Part 1

Einführung

Im letzten Artikel hatte ich neben dem Tutorial zum erstellen eines OSM-Servers auch noch einen kurzen Anhang für ein passendes Webfrontend mit angehängt. Da eine Erklärung den Rahmen des Artikels gesprengt hätte, habe ich mich entschieden zum Thema ein eigenen Eintrag zu schreiben.

Neben der simplen Darstellung für unseren eigenen Server möchte ich auch auf die Implementierung anderer Dienste eingehen und wie man mit den möglichen Layers von OpenLayers arbeitet.

OpenLayers ist ein freies Javascript-Frameword, das ihr euch unter http://Openlayers.org herunterladen könnt.

Anzeigen von Karten

Beginnen wir für dieses Thema mit der ganz einfachen Darstellung: Wir möchten eine HTML-Seite erstellen, die ein einfaches <div>Element enthält, in dem wir später die Karte anzeigen. Also hier eine Auflistung der Dinge die wir benötigen:

  • Die HTML-Datei
    • Wie gesagt wird diese später unsere Karte beinhalten
  • OpenLayers.js
    • Der OpenLayers-Source. Wir oben genannt, kann diese Bibliothek von der OpenLayers-Website heruntergeladen werden.
  • Eine allgemeine Skriptdatei
    • Hier werden wir die Karte initialisieren und mit den OL-Funktionen anzeigen.

Fangen wir also an!

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Map</title>
<script language="javascript" type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body onload="init()">
<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

In diesem Beispiel rufen wir die aktuelle Online-Version von OpenLayers auf, sowie die script.js-Datei.

script.js

var map;
function init() {
map = new OpenLayers.Map({
div: "map",
allOverlays: true
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

Ruft man nun die index.html auf, wird man eine Karte in den Dimensionen 300px mal 300px sehen. Wie ihr euch sicherlich denken könnt, kann diese Größe durch die style-Eigenschaft geändert werden.

Die Javascript-Datei ist sehr simpel: durch bei onLoad wird die Funktion init() ausgeführt:

  1. Das Map-Objekt wird erstellt, und dem div-Element „map“ zugewiesen. Ausschlaggebend ist die ID 😉
  2. Dann erstellen wir ein OSM-Objekt, das die Daten vom OpenStreetMap-Server holt
  3. dieses Objekt binden wir dann als Layer ein.
  4. Und fügen der Map Controls hinzu, damit wir zwischen den Layern switchen können.
  5. Dann zoomen wir die Map soweit heraus wie möglich.

Wenn wir uns jetzt die Map anschauen, sehen wir links eine Steuerung zum zoomen und bewegen und rechts ein kleines Plus. Klicken wir hierauf, poppt eine Box auf, in der wir alle Layer sehen können. Da wir nur ein OSM-Layer haben, sehen wir natürlich auch nur eins 😀 würden wir die Zeile

map.addControl(new OpenLayers.Control.LayerSwitcher());

weglassen, würde das Symbol rechts auch nicht erscheinen.

Doch Moment: Wie sehen wir jetzt unsere eigenen Tiles?

Berechtigte Frage. Unsere OSM-Daten kommen wie gesagt vom OpenStreetMap-Server und nicht von unserem eigenen. Hier sehen wir unsere angepasste JS-Datei:

var map;

OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
    /**
     * Constructor: OpenLayers.Layer.OSM.Mapnik
     *
     * Parameters:
     * name - {String}
     * options - {Object} Hashtable of extra options to tag onto the layer
     */
    initialize: function(name, options) {
        var url = [
            "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
            "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
            "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0,
            transitionEffect: "resize"
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.Mapnik"
});

function init() {

    map = new OpenLayers.Map({
        div: "map",
        allOverlays: true
    });

    var osm = new OpenLayers.Layer.OSM.Mapnik();

    // note that first layer must be visible
    map.addLayers([osm]);

    //map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.zoomToMaxExtent();

}

Was hat sich verändert?

 

Das erste ist Offensichtlich: Eine vollkommen neue Klasse namens OpenLayers.Layer.OSM.Mapnik

wurde hinzugefügt, bei der eine Adresse hinzugefügt werden kann. Nach dem Beispiel werden zwar immer noch die Daten vom OpenStreetMap-Server geholt – Das werden wir aber später noch anpassen.

Durch die neue Klasse müssen(bzw. Sollten) wir den Aufruf von

var osm = new OpenLayers.Layer.OSM();

zu

var osm = new OpenLayers.Layer.OSM.Mapnik();

ändern.

Freu, es hat sich geändert, aber wir sehen keine Änderung. Jetzt können wir in der Klasse OpenLayers.Layer.OSM.Mapnik die Adresse ändern. Aktuell sind drei Adressen zu sehen, aber zwei können weggenommen werden und die verbleibende durch unsere eigene ersetzen:

http://localhost/Pfad/zu/den/Tiles/${z}/${x}/${y}.png

Die ${[y,x,z]} stehen für die einzelnen Dimensionen!

Jetzt wo wir wissen, wie wir eine Karte darstellen, können wir zu dem letzten Punkt in diesem Beitrag kommen: Graphen und Layer.

Graphen und Layer

Textlayer

Ein Textlayer umschreibt nicht einfach ein Layer in dem Text angezeigt werden kann – Nein, es bietet nebenbei auch noch Marker an. Dies ist jedoch nicht optional – Text kann ja auch anders eingefügt werden. In unserem Beispiel wird es so aussehen:

Wie zu sehen sind auf der Karte verschiedene Bilder eingefügt; ein Klick auf diese öffnet ein kleines Popup, gefüllt mit einem Text. Wie setzen wir dies um? Mit dem erwähnten Textlayer eben.

OpenLayers.Layer.Text

Eine Instanz wird nun mit dem Parametern für die ID und einem Options-Objekt aufgerufen. Das für uns wichtige im Options-Objekt ist die Eigenschaft location. Ein Beispiel:

var newl = new OpenLayers.Layer.Text( "text", {location: "./textfile.txt"} );

Was macht nun dieses Location? Das ist ganz einfach: es öffnet eine Text-Datei, liest diese ein und stellt diese auf der Karte dar. Nun eine sehr interessante Frage: Wie sieht die Text-Datei aus?

Der Aufbau ist ganz simpel: in der ersten Zeile werden die Options-Namen angegeben. Möglichkeiten:

point – Position in Latitude und Lonitude, separiert durch Komma

lat – Latitude

lon – Lonitude

icon – URL des Icons vom Marker

iconSize – Die Icongröße

iconOffset – relative Position des Icons(Ecke oben-rechts) zur Position(point)

title – Der Titel der im Text angezeigt werden soll

description – Der eigentliche Text

Abgetrennt werden müssen die einzelnen Einstelungen durch ein Tabulatorzeichen. Jede Zeile steht in diesem Fall für ein Icon; beachtet, dass am Ende immer genau eine leere Zeile vorhanden sein muss! Jetzt fehlt uns nur noch ein Punkt: hinzufügen auf die Karte! Dafür verwenden wir unsere Super-Funktion addLayer, die wir bereits oben verwendet haben. Einfach zur map hinzufügen und schon sehen wir unsere Marker!

Grafiken

Jetzt zu unserem letzten Teil in diesem Artikel – Grafiken.

Hierfür gibt es das Image Layer. In den Konstruktor gehören folgende Optionen:

  • Name – Der Name des Layers
  • URL – Die URL des Bildes
  • Extend – Die Ausmaße des Bildes, dabei ausgehend vom Koordinatensystem(erstellt durch das Objekt OpenLayers.Bounds)
  • Size – Die Größe des Bildes in Pixeln(erstellt durch das Objekt OpenLayers.Size)
  • Ein allgemeines Options-Objekt.

Beispiel für die Erstellung:

var graphic = new OpenLayers.Layer.Image(
                'City Lights',
                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
                new OpenLayers.Size(580, 288),
                {numZoomLevels:3}
            );

(Quelle: OpenLayers.org)

Eingebunden kann das Layer wie gehabt^^

Das war es für diese Woche, nächste Woche werde ich über Sockets in Visual C# schreiben.

Advertisements
Tagged , , , , , , , ,

One thought on “OpenLayers Part 1

  1. Dero says:

    Omg Netter Beitrag, ich glaub ich hab n viertel davon gelesen, dann wurde ich abgelenkt.
    Bis dahin war der Text gut geschrieben und sehr informativ umgesetzt.
    Respekt, die Zeit aufzuweisen das alles nieder zuschreiben.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: