Geodaten und Application Express: Oracle MAPS!

Heute schließen wir das Geodaten-Tutorial, welches sich über die letzten drei Ausgaben zog, ab. Auch diese Ausgabe baut auf den bisherigen auf:

Heute erfahren Sie mehr über Oracle Maps. Mit Oracle Maps wird die Navigation in Ihrer Karte wesentlich einfacher, intuitiver und performanter. Oracle Maps ist Bestandteil des MapViewer, den Sie bereits installiert haben.

Um die Performance der Kartendarstellung zu verbessern, werden die Karten in Kacheln unterteilt - diese Kacheln werden nach Erstellung in einem Cache (Map Cache) abgelegt. Dies macht natürlich nur für die Kartenteile Sinn, welche stets angezeigt werden sollen (Base Maps). Zur Base Map werden dann die Features Of Interest (FOI) hinzugefügt - diese werden dynamisch aus der Datenbank gelesen und in die Karte integriert.

Das Besondere an Oracle Maps ist die einfache Navigation in der Karte - Sie müssen nicht mehr, wie in der letzten Ausgabe, Schaltflächen zum Hinein- und Heraus-Zoomen oder zum Verschieben der Karte hinterlegen - dies geht nun viel einfacher direkt mit Drag & Drop.

Aufbau einer Karte mit Oracle Maps

Abbildung 1: Aufbau einer Karte mit Oracle Maps

Oracle Maps basiert auf JavaScript und der AJAX-Technologie. Nur so ist die intuitive Navigation in der Karte - direkt mit der Maus - möglich. Sie binden die Karte also nun mit JavaScript und nicht mehr mit der MapViewer PL/SQL-Client-Bibliothek in Ihre Application Express-Anwendung ein.

Vorbereitungen

Oracle MAPS ist Bestandteil der Oracle Fusion Middleware MapViewer-Software. Um den MapViewer und damit Oracle MAPS auf Ihrem System bereitzustellen und mit Ihrer Application Express-Anwendung zu integrieren sind einige Vorbereitungen erforderlich. Lesen Sie in diesem Dokument, wie Sie die MapViewer Software herunterladen, installieren und konfigurieren. Beachten Sie für diesen Tipp darin vor allem die Schritte 1, 2, 4 und 5.

Einrichten eines Map Tile Layer

MapViewer Admin-Bereich Als nächstes geht es daran, den Map Cache einzurichten. Navigieren Sie rechts oben in den Bereich Admin - im dann folgenden Login-Fenster melden Sie sich als Administrator des OC4J (Oracle Containers for J2EE) an. Der Username ist normalerweise oc4jadmin; das Passwort haben Sie beim ersten Start des MapViewer festgelegt.

MapViewer Administrationsbereich

Abbildung 3: MapViewer Administrationsbereich

Nach erfolgreichem Login in den MapViewer Administrationsbereich navigieren Sie links oben zu Manage Map Caches, von dort aus wählen Sie Create zum Einrichten eines neuen Map Cache aus.

Neuen Map Cache einrichten (Create Map Cache)

Abbildung 4: Neuen Map Cache einrichten (Create Map Cache)

  • Wählen Sie als Internal als Map Source aus - die Kartendaten kommen aus der Datenbank.
  • Den Namen des Map Cache können Sie frei wählen. Nehmen Sie für dieses Beispiel WELTKARTE.
  • Wählen Sie world als Data Source aus. Diese Data Source haben Sie mit dem Einrichten des MapViewer in der vorletzten Ausgabe erstellt.
  • Nun füllt sich die nächste Auswahlliste Base Map automatisch - Wählen Sie hier die einzig verfügbare Base Map WORLD_SAMPLE aus.
  • Die Hintergrundfarbe können Sie frei wählen oder nichts tun.
  • Belassen Sie die Einstellungen für Cache Storage und Zoom Levels bei den voreingestellten Werten.
  • Tragen Sie 1000000 als Minimum Map Scale und 15000000 bei Maximum Map Scale ein.
  • In den Karten der letzten beiden Ausgaben ergab sich durch die Verwendung von Längen und Breitengraden eine etwas verzerrte Darstellung der Deutschlandkarte. Geben Sie daher als Koordinatensystem (SRID) den Wert 82027 anstelle von 8307 ein. Dadurch wird Deutschland in der Karte so aussehen, wie Sie es gewohnt sind.
  • Geben Sie sowohl für Min X als auch für Min Y den Wert 0, und für Max X und Max Y den Wert 10000000 ein.
  • Die restlichen Angaben können Sie auf den Voreinstellungen belassen.
Angaben für den neuen Map Cache

Abbildung 5: Angaben für den neuen Map Cache

Wenn Sie fertig sind, klicken Sie unten auf die Schaltfläche Submit. Damit ist der Map Cache eingerichtet und Sie können Oracle Maps nun in Ihre Application Express-Anwendung integrieren.

Oracle Maps in Application Express einbinden

Arbeiten Sie auch dieses Mal mit der Anwendung, die bereits in den letzten Ausgaben entstanden ist - fügen Sie ihr eine neue Seite hinzu und versehen Sie diese mit einer neuen Region Karte vom Typ HTML. Diese Seite sollte dann wie folgt aussehen:

Anwendungsseite: (noch) ohne Oracle Maps

Abbildung 6: Anwendungsseite: (noch) ohne Oracle Maps

Navigieren Sie nun wiederum zum Quelltext der HTML-Region und hinterlegen Sie folgenden Code:

<div id="map" style="left:0; top:0;width: 600px; height: 400px">
</div>

Der nötige JavaScript-Code wird im Seiten-Header hinterlegt:

<script src="/mapviewer/fsmc/jslib/oraclemaps.js"></script>
<script type="text/javascript">
  var baseURL  = "http://"+document.location.host+"/mapviewer";
  var mapCenterLon = 10;
  var mapCenterLat = 50;
  var mapZoom      = 0;

  var mapview;
  var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);

  function show_map() {
    mapview = new MVMapView(document.getElementById("map"),baseURL);      
    var basemap  = new MVBaseMap("world.WELTKARTE");
    mapview.addBaseMapLayer(basemap);
    mapview.setCenter(mpoint);
    mapview.setZoomLevel(mapZoom);
    mapview.addNavigationPanel("WEST");
  
    mapview.display();
  }
</script>

Rufen Sie die erzeugte JavaScript-Funktion show_map() im onLoad-Handler des HTML Body Tags auf (Sie müssen zusätzlich das Feld Cursor-Fokus auf Cursor nicht fokussieren stellen):

Aufruf der JavaScript-Funktion im HTML Body Tag
Cursor-Fokus in den Seitenattributen nicht setzen

Aufruf der JavaScript-Funktion im HTML Body Tag und Einrichten des Cursor-Fokus

Die Dokumentation für die JavaScript-Bibliothek ist auf Ihrem MapViewer-Server bereits vorhanden. Geben Sie einfach im Browser folgende URL ein:

http://[mapviewer-host]:[port]/mapviewer/fsmc/apidoc/index.html

Dort finden Sie eine genaue Beschreibung der hier verwendeten und aller verfügbaren JavaScript-Aufrufe. Starten Sie die Seite nun. Wenn Sie den Kartenaufbau verfolgen, fällt Ihnen wahrscheinlich sofort auf, dass die Karte aus mehreren Kacheln besteht. Sie können den Kartenausschnitt nun bequem mit der Maus per Drag & Drop verschieben oder über die Navigationsleiste links oben verschieben - auch das Herein- und Herauszoomen ist mit der Navigationsleiste ganz einfach: Probieren Sie es aus!

Das Ergebnis: Deutschlandkarte mit Oracle Maps - in Application Express

Abbildung 7: Das Ergebnis: Deutschlandkarte mit Oracle Maps - in Application Express

Oracle Maps ermittelt zunächst, welche Kacheln nötig sind, um den angeforderten Kartenausschnitt darzustellen. Ist die Kachel bereits im Map Cache enthalten, so wird sie sofort ausgeliefert, andernfalls wird sie zuerst erstellt. Aus diesem Grund dauert der erste Abruf einer Kachel stets länger.

Um diese Wartezeiten für den Endanwender zu vermeiden, besteht die Möglichkeit, die Kacheln im voraus zu generieren. Wenn Sie im Administrationsbereich des MapViewer zu Manage Map Caches und dort in den Bereich Manage navigieren, sehen Sie den Dialog, der in Abbildung 8 dargestellt ist.

Administrationsbereich des MapViewers: Kacheln im Voraus berechnen

Abbildung 8: Administrationsbereich des MapViewers: Kacheln im Voraus berechnen

Stellen Sie die Zoom-Level und den Kartenausschnitt ein, für den Sie die Kacheln vorberechnen möchten; klicken Sie anschließend auf Submit. Die Kacheln werden dann im Hintergrund berechnet - bis der MapViewer damit fertig ist, kann allerdings einige Zeit vergehen.

Dynamische Elemente hinzufügen: Features Of Interest!

Im letzten Teil geht es nun darum, die in der letzten Ausgabe per Zufallsgenerator erstellten Kunden ebenfalls in die Karte einzubinden. In Oracle Maps geschieht dies durch die Features Of Interest (FOI).

Features Of Interest sind allerdings nicht völlig dynamisch - sie müssen vorher in der Datenbank als MapViewer Theme definiert sein. Dies kann mit dem MapBuilder-Werkzeug erfolgen; dieses Werkzeug ist im MapViewer-Software-Paket als Datei mapbuilder.jar enthalten.

Kartendefinitionen mit dem Oracle Map Builder

Abbildung 9: Kartendefinitionen mit dem Oracle Map Builder

Mit dem MapBuilder kann aus Aussehen der Karten komplett selbst definiert werden. Die Styles definieren, wie etwas gezeichnet wird, die Themes legen fest, wo die Daten herkommen und welcher Style zur Darstellung verwendet wird. Die Base Maps bestehen schließlich aus mehreren übereinandergelegten Themes und bilden so eine vordefinierte Karte. Sie können sich mit dem MapBuilder auch die bereits vorhandenen Kartendefinitionen des NAVTEQ World Sample ansehen und ggfs. verändern.

Map Caches für Oracle Maps können nur aufgrund von definierten Base Maps erstellt werden. Features Of Interest müssen ein vordefiniertes Theme als Grundlage haben. Insofern bietet Oracle Maps zwar wesentlich intuitivere Navigation und bessere Performance, die Kartendarstellung kann jedoch nicht ganz so flexibel und dynamisch gestaltet werden wie mit der MapViewer PL/SQL-API, welche in den letzten beiden Ausgaben vorgestellt wurde.

Das Theme, welches für die dynamische Darstellung der Kunden benötigt wird, soll nun durch ein einfaches SQL INSERT erstellt werden. Setzen Sie das folgende SQL-Kommando von SQL*Plus aus (nicht dem SQL Workshop) ab. Melden Sie sich im SQL*Plus mit dem Parsing Schema Ihrer Application Express-Anwendung an.

insert into user_sdo_themes (
  NAME,
  DESCRIPTION,
  BASE_TABLE,
  GEOMETRY_COLUMN,
  STYLING_RULES
) values (
  'KUNDEN',
  null,
  'KUNDEN',
  'LOKATION',
  '<?xml version="1.0" standalone="yes"?>
     <styling_rules>
       <hidden_info>
         <field column="ID" name="#"/>
         <field column="NAME" name="Name"/>
       </hidden_info>
       <rule>
         <features style="M.CYAN PIN"> </features>
       </rule>
     </styling_rules>'
)
/

Navigieren Sie in Ihrer Application Express-Anwendung wieder zum Seiten-Header und ändern Sie den JavaScript-Code wie folgt um:

<script src="/mapviewer/fsmc/jslib/oraclemaps.js"></script>
<script type="text/javascript">
  var baseURL  = "http://"+document.location.host+"/mapviewer";
  var mapCenterLon = 10;
  var mapCenterLat = 50;
  var mapZoom      = 0;

  var mapview;
  var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);

  function show_map() {
    mapview = new MVMapView(document.getElementById("map"),baseURL);      
    var basemap  = new MVBaseMap("WORLD.WELTKARTE");
    mapview.addBaseMapLayer(basemap);
    mapview.setCenter(mpoint);
    mapview.setZoomLevel(mapZoom);
    mapview.addNavigationPanel("WEST");
    
    var foi_kunden = new MVThemeBasedFOI('foi_kunden','world.kunden');
    foi_kunden.setVisible(false);
    mapview.addThemeBasedFOI(foi_kunden);   
  
    mapview.display();
  }
  
  function setVisible(foi_name) {
    var foi = mapview.getThemeBasedFOI(foi_name); 
    foi.setVisible(!foi.isVisible());
  }
</script>

Um einen Link als "Schalter" für die Kunden einzurichten, ändern Sie den HTML-Code der Region Karte wie folgt:

<div id="map" style="left:0px; top:0px; width:600px; height: 400px">
</div>
<div>
<a href="javascript:setVisible('foi_kunden');">Kunden ein/ausblenden</a>
</div>

Starten Sie die Seite anschließend neu. Klicken Sie dann einmal auf den Link Kunden ein/ausblenden unterhalb der Karte - dann sollte für jeden Kunden eine Stecknadel auf Ihrer Karte erscheinen. Mit nochmaligem Klick auf den Link verschwinden die Stecknadeln wieder.

Das Ergebnis: Die Karte mit dynamisch ein- und ausblendbaren Informationen zu Kunden

Abbildung 10: Das Ergebnis: Die Karte mit dynamisch ein- und ausblendbaren Informationen zu Kunden

Das ist jedoch noch nicht alles. Wenn Sie auf eine der Stecknadeln klicken, wird ein Information Window mit Details zu diesem Kunden eingeblendet - im Moment sind dies lediglich die ID und der Name - mehr Informationen gibt es zu diesen zufällig generierten "Kunden" nicht. Im einer "realen" Applikation können auf diesem Weg weitere Informationen wie die komplette Adresse oder Angaben zum Umsatz angezeigt werden.

Über das hier gesehene hat Oracle Maps noch wesentlich mehr Funktionalität - wenn Sie sich durch die oben erwähnte Dokumentation zur JavaScript-API blättern, erfahren Sie mehr über Möglichkeiten wie ...

  • Markieren eines Rechtecks als neuen Kartenausschnitt
  • Information Windows mit selbstdefiniertem Inhalt (bspw. Bilder)
  • Erstellen neuer Geometrien und Speichern derselben in der Datenbank
  • ...

Mit dieser Ausgabe endet das Geodaten-Tutorial (vorerst). In dieser und den letzten Ausgaben haben Sie erfahren, wo Sie Geodaten zum Testen herbekommen (NAVTEQ World Sample), wie Sie diese in die Datenbank laden, räumliche Berechnungen darauf durchführen, als Karte darstellen und schließlich mit Oracle Maps eine benutzerfreundliche Navigation in dieser Karte ermöglichen.

Wenn Sie mehr über die Geodaten-Technologie erfahren möchten, finden Sie hier weitere Informationen:

Zurück zur Community-Seite