Geodaten und Application Express: Oracle MAPS mit Google Maps als Hintergrundkarte

Google Maps kennen Sie sicherlich alle. Dieser (achte) Tipp des Tutorials zum Thema APEX und Geodaten zeigt Ihnen, wie Sie Geodaten aus Ihrer Datenbank mit einer Google Maps-Karte kombinieren können. Zwar gibt es schon ein Oracle-Whitepaper, dieses beschreibt allerdings nur die Nutzung der Google API in Application Express. Das Darstellen der Karte ist damit völlig unproblematisch. Wenn es dann jedoch darauf ankommt, Geodaten aus der eigenen Datenbank auf dieser Karte zu platzieren, so muss jedes Element einzeln auf die Karte gesetzt werden - was für wenige Elemente in Ordnung sein mag. Hat man jedoch Hunderte oder gar Tausende von "Features", so ist die Arbeit mit der Google API sehr mühsam: Schließlich muss man die zum Kartenausschnitt passenden "Features" manuell aus der Datenbank lesen und dann per JavaScript auf die Google-Karte platzieren.

Oracle MAPS erleichtert das massiv - schließlich kennt Oracle MAPS den passenden Kartenausschnitt und sucht automatisch die "richtigen" Features aus. Daher zeigt dieser Tipp, wie man mit der kombinierten Nutzung von APEX, Google MAPS und Oracle MAPS einfach und schnell leistungsfähige Anwendungen erstellen kann:

Google Maps, Oracle MAPS und APEX gemeinsam in Aktion

Abbildung 1: Google Maps, Oracle MAPS und APEX gemeinsam in Aktion

  • APEX stellt die Applikation bereit
  • Google MAPS liefert die Hintergrundkarte
  • Oracle MAPS bringt die Google-Karte mit den Geodaten aus der Datenbank zusammen und sorgt für eine konsistente Karte

Exkurs: Der "Google Key" und die Lizenzbestimmungen

Die Google API und damit Google MAPS kann kostenlos genutzt werden. Um die API nutzen zu können, benötigen Sie den sog. Google Key . Diesen können Sie bei Google unter http://code.google.com/apis/maps/signup.html beantragen. Der freie Key ist allerdings an einige Bedingungen geknüpft - so muss Ihre APEX-Applikation unter anderem kostenfrei und öffentlich verfügbar sein. Ein Login ist dann erlaubt, wenn jeder Nutzer einen Zugang bekommt.

Gerade das kommt vielfach (bspw. bei Intranet-Anwendungen) nicht in Frage - die Karte würde man jedoch dennoch gerne nutzen. In diesem Fall kommt Google Maps API Premier in Frage. Diese ist für eine professionelle Nutzung ausgelegt und kann innerhalb eines Unternehmensnetzwerks oder auf kostenpflichtigen Websites genutzt werden. Neben einer erhöhten Performance, einem SLA von 99,9%, dem Enterprise Support, der Ausschaltung von Werbung und dem Tracking und Tracing, können auch sichere Zugänge über https realisiert werden. Somit kommt man auf eine zukunftssichere Business Applikation, die alle Unternehmensteile mit weltweiten Informationen und Diensten unterstützt.

Benötigen Sie einen Google Maps API Premier KEY oder haben Sie weitere Fragen, dann können Sie sich an den offiziellen Google Maps Reseller, die in[k]now wenden - http://maps.inknow.de oder info@inknow.de.

Vorbereitungen

Zur Darstellung der Weltkarte, welche ja eigentlich eine Kugel - oder genauer: ein Ellispoid - ist, verwendet Google eine bestimmte Projektion. Die Längen- und Breitengrade werden nicht "einfach so" gezeichnet, sondern vorher umgerechnet. Ziel ist eine möglichst flächentreue, nicht verzerrte Darstellung der Karte (besonders zu den Polen hin). In Oracle 10g oder Oracle11g Release 1 ist diese Projektion (für die Experten: EPSG:3785) noch nicht vorhanden. Das ist aber kein Problem: Mit diesem SQL-Skript, welches als DBA in die Datenbank eingespielt werden muss, legen Sie das Google-Koordinatensystem an.

Sorgen Sie außerdem dafür, dass der Oracle MapViewer und Oracle MAPS installiert und einsatzbereit sind. Führen Sie hierzu (wenn noch nicht geschehen) die Schritte 1 bis 5 des Tutorials "Installation und Konfiguration von MapViewer und Oracle MAPS" aus. Achten Sie darauf, dass Sie die MapViewer-Version 11g herunterladen.

Schritt 1: APEX-Applikation erstellen und Google-Karte einbinden

Erstellen Sie eine neue Application Express-Anwendung oder erzeugen Sie in einer bestehenden eine neue Seite. Fügen Sie dieser eine neuen Region namens Karte vom Typ HTML hinzu. Diese Seite sollte dann wie folgt aussehen:

Anwendungsseite: (noch) ohne Oracle Maps

Abbildung 2: 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>

Navigieren Sie dann zum Seiten-Header. Hier wird der nötige JavaScript-Code hinterlegt. Wir beginnen mit dem Einbinden der Google API. Bei einem "normalen" Google-Key gehen Sie so vor: 

<script src="http://maps.google.com/maps?file=api&v=2&key={Google-Key}" type="text/javascript"></script>

Bei Verwendung von Google Maps API Premier gehen Sie so vor: 

<script src="http://maps.google.com/maps?file=api&v=2&client={Google-Key}&sensor=false" type="text/javascript"></script>

Direkt im Anschluß fügen Sie den JavaScript-Code für Oracle MAPS hinzu. Achten Sie auf den rot markierten Bereich - dieser bindet die Google Maps-Karte in Oracle MAPS ein. 

<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      = 6;

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

  function showMap() {
    mapview = new MVMapView(document.getElementById("map"),baseURL);      
    var basemap  = new MVGoogleTileLayer();
    basemap.setMapType(G_NORMAL_MAP);
    mapview.addBaseMapLayer(basemap);
    mapview.setCenter(mpoint);
    mapview.setZoomLevel(mapZoom);
    mapview.addNavigationPanel("WEST");
  
    mapview.display();
  }
</script>

Rufen Sie die erzeugte JavaScript-Funktion showMap() 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

Abbildung 3: 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.

Das Ergebnis: Google MAPS-Karte mit der Navigation von Oracle MAPS - in Application Express

Abbildung 5: Das Ergebnis: Google MAPS-Karte mit der Navigation von Oracle MAPS - in Application Express

Schritt 2: Dynamische Elemente hinzufügen: Features Of Interest!

Nun geht es daran, dynamische Informationen aus der Datenbank auf der Karte zu platzieren. Zuerst sollen die im 3. Tutorial: Die Karte wird erweitert per Zufallsgenerator generierten und in der Tabelle KUNDEN enthaltenen Daten in die Karte einzubinden (SQL-Skript zum Erstellen der Tabelle). Lassen Sie das SQL-Skript im SQL Developer oder in SQL*Plus laufen, nehmen Sie nicht den SQL Workshop in Application Express.

In Oracle Maps werden solche Daten als Features Of Interest (FOI) eingebunden. Features Of Interest müssen vorher in der Datenbank als MapViewer Theme definiert sein. Dies kann mit dem Werkzeug Oracle MapBuilder, welches im Paket der MapViewer-Software enthalten ist (mapbuilder.jar), erfolgen (Abbildung 6).

Kartendefinitionen mit dem Oracle Map Builder

Abbildung 6: 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.

Das Theme, welches für die dynamische Darstellung der Kunden benötigt wird, soll nun durch ein einfaches SQL INSERT erstellt werden - hier verwenden wir den MapBuilder nicht. 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. Neu sind die rot markierten Abschnitte. Achten Sie außerdem darauf, dass die Einbindung der Google-API erhalten bleibt. 

<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      = 6;

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

  function showMap() {
    mapview = new MVMapView(document.getElementById("map"),baseURL);      
    var basemap  = new MVGoogleTileLayer();
    basemap.setMapType(G_NORMAL_MAP);
    mapview.addBaseMapLayer(basemap);
    mapview.setCenter(mpoint);
    mapview.setZoomLevel(mapZoom);
    mapview.addNavigationPanel("WEST");
  
    var foi_kunden = new MVThemeBasedFOI('foi_kunden','geows.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>

Navigieren Sie nun noch zur Quelle der HTML Region mit der Karte und ändern Sie den HTML-Code wie folgt um - wiederum ist der neue Abschnitt rot markiert. 

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

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 7: 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. Dies übernimmt Oracle MAPS alles völlig automatisch; die Einbindung dynamischer Informationen ist so sehr einfach.

Schritt 3: Variationen: Kartentyp ändern

Neben der einfachen Google-Karte können Sie natürlich auch die anderen Kartentypen von Google nutzen. Ändern Sie den JavaScript-Code im Seiten-Header nochmals wie folgt um (hier ist nun nur ein Ausschnitt dargestellt). 

    :
    mapview = new MVMapView(document.getElementById("map"),baseURL);      
    var basemap  = new MVGoogleTileLayer();
    basemap.setMapType(G_HYBRID_MAP);
    mapview.addBaseMapLayer(basemap);
     :

Nach dem Neustart sieht Ihr Kartenbild dann etwa wie in Abbildung 8 aus ...

Google Kartentyp "HYBRID"

Abbildung 8: Google Kartentyp "Hybrid"

Sie können vier Kartentypen auswählen: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP oder G_PHYSICAL_MAP.

Schritt 3: Variationen: Polygone anstelle von Punkten als Features Of Interest anzeigen

Die Darstellung der dynamischen Features Of Interest ist nicht auf Punktgeometrien aus der Datenbank beschränkt - auch Polygone (bspw. Vertriebsgebiete) können so über die Google-Karte gelegt werden. Wenn Sie die im ersten Tipp dieses Tutorials vorgestellten NAVTEQ-Demodaten in Ihre Datenbank einspielen (Download des WORLD_SAMPLE hier), können Sie auch diese Daten auf die Karte projizieren. Ändern Sie dazu den JavaScript-Code im Seiten Header wie folgt um: 

    :
    mapview.setZoomLevel(mapZoom);
    mapview.addNavigationPanel("WEST");
  
    var foi_state = new MVThemeBasedFOI('foi_state','geows.world_state_bndy_s1');
    foi_state.setVisible(false);
    mapview.addThemeBasedFOI(foi_state);   

    var foi_kunden = new MVThemeBasedFOI('foi_kunden','geows.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>

Nun noch einen Link in der HTML-Region mit der Karte hinzufügen ... 

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

Sie können dann nochmals die Grenzen der Bundesländer auf die Karte legen lassen (Abbildungen 9 und 10). Die Ländergrenzen sind in der Google-Karte eigentlich schon drin - daher ist der Effekt nicht so gut sichtbar. Oracle MAPS erlaubt es Ihnen demnach, beliebige Informationen aus Ihrer APEX-Datenbank mit wenigen JavaScript-Zeilen zur Karte hinzuzufügen; Oracle MAPS sorgt stets dafür, dass die Karte konsistent bleibt.

Google Karte mit dynamisch angezeigten Kunden ...

Abbildung 9: Google Karte mit dynamisch angezeigten Kunden ...

Google Karte mit dynamisch angezeigten Kunden und den Grenzen der Bundesländer

Abbildung 10: Google Karte mit dynamisch angezeigten Kunden und den Grenzen der Bundesländer

Fazit und Ausblick

In diesem Tipp haben Sie gesehen, wie Sie eine Google-Karte in Oracle MAPS und schließlich in Application Express einbinden. Während die Karte im Hintergrund von Google geladen wird, findet die Verarbeitung der lokalen Daten in Oracle MAPS - und damit in der eigenen IT-Infrastruktur statt. Die Integration ist zudem sehr einfach. Mit der Karte können nun noch wesentlich mehr Dinge geschehen: Im 5. Tutorial der Reihe finden Sie noch weitere Anregungen - so ist dort beschrieben, wie Sie die Karte mit einem APEX-Bericht auf die Tabelle KUNDEN kombinieren oder wie Sie die "Kundendaten" per Mausklick bearbeiten können.

Die APEX Community bedankt sich bei Arnd Spiering von G.ON experience für die Unterstützung beim Einbinden der Google API in Oracle MAPS und bei Jörg Kappel von in[k]now für die freundliche Bereitstellung eines Google-Key zum Testen.

Zurück zur Community-Seite