SUN's Applet-Technologie: JavaFX und Google Maps

In einem früheren Blog-Beitrag hatte ich bereits auf die Erneuerung von SUN's Applet-Technologie hingewiesen und dass dies durchaus Auswirkungen, auch auf Oracle Forms, haben kann!
Anhand eines praktischen Beispieles möchte ich nun ein neues Feature demonstrieren: Eine JavaFX - Applikation inkl. Google Maps wird als Applet im Browser gestartet und läßt sich per Drag auf den Desktop, also ausserhalb des Browser-Fensters, ziehen. Danach kann das Browser-Fenster geschlossen werden, so dass wir hiermit eine Desktop - Applikation erhalten. Nun zum Ausprobieren, Voraussetzung ist das JDK 1.6 Update 10+ :



Start der JavaFX-Applikation in einem neuen Browser-Fenster (Bitte beachten: Dies ist nur ein Testbeispiel!)

JavaFX ist übrigens SUN's Antwort auf Adobe's Flex & AIR und Microsoft's Silverlight, Applikationen, die sowohl im WebBrowser als auch im Desktop laufen.

Mit etwas Anpassung können wir natürlich auch Oracle Maps als JavaFX - RDA (Rich Desktop Application) anwenden.

Beste Grüße und ein erfolgreiches Neues Jahr
Friedhold

Google Maps und Oracle Maps Mashup mit externem Custom Map Tile Layer (8)

Im letzten Teil dieser Serie zu 'Oracle Maps Mashups mit externen Customer Map Tile Layern' möchte ich schliesslich die Lösung mit Google Maps Tiles vorstellen. Die Parameterdefinition zur Kartenprojektion ist wie beim Virtual Earth Demo vorzunehmen.

Die Google Tiles Url hatte ich bereits im Blog "Google Maps Tile - URL mit PL/SQL bilden" vorgestellt, so dass eigentlich nur die 'getTileURL' - Funktion angepasst werden muss:



Letzendlich erhalten wir das Google Maps / Oracle Maps Mashup:



Natürlich lassen sich auch auf der Google Maps - Base Map statische und dynamische Features of Interest Layers (FOIs) darstellen, insbesondere auf der Basis von topologischen Abfragen direkt aus Oracle Spatial.

Grüße,
Friedhold

Google Maps Tile - URL mit PL/SQL bilden

Zum Verständnis von Googles / Virtual Earth's Sperical Mercator möchte ich zunächst die dabei verwendete Mercator-Formel vorstellen :



Möchte man nun auf die einzelnen Google-Tiles zugreifen, so muss die Umrechnung der Latitude - und Longitude - Werte mit der Mercator - Formel zunächst in die World-Pixel Koordinaten erfolgen, um letztendlich die Tiles Koordinaten zu bestimmen.

Hier ein Beispiel zur Verifizierung der von mir erstellten PL/SQL- Prozeduren:



Mit der PL/SQL - Package erstellen wir die Google Tile - URL (angewendet wird die sinus-Gleichung):

CREATE OR REPLACE PACKAGE BODY PKG_GET_GMAPS_URL AS

  PI          CONSTANT NUMBER   := 3.141592653589793 ;
  DTOR        CONSTANT NUMBER   := PI / 180;
  RTOD        CONSTANT NUMBER   := 180 / PI;
  TILE_SIZE   CONSTANT NUMBER   := 256;
  MERC_BORDER CONSTANT NUMBER   := 85.0511287798066;

  FUNCTION fnc_get_TileCoord (p_lat IN number, p_lon IN number, p_zoom IN number,  
                              p_x OUT NUMBER, p_y OUT NUMBER, p_z OUT NUMBER) RETURN varchar2 IS
    
    l_sin_pi NUMBER;
    l_norm_x NUMBER;
    l_norm_y NUMBER;
    l_col    NUMBER;
    l_row    NUMBER;
 
  BEGIN
    IF abs(p_lat) > MERC_BORDER THEN
      RETURN('Invalide Latitude');
    ELSE
      l_sin_pi := SIN((p_lat) * DTOR);
      l_norm_x := p_lon / 180;
      l_norm_y := (0.5 * LN (  (( 1 + l_sin_pi) / (1 - l_sin_pi)) ) ) / PI;     
      -- column
      p_x := POWER(2, p_zoom) * (( l_norm_x + 1 ) / 2);  
      -- row
      p_y := POWER(2, p_zoom) * (( 1 - l_norm_y ) / 2);      
      p_z:= p_zoom;
      
      RETURN('OK');   
    END IF;
  END fnc_get_TileCoord;
    
  PROCEDURE prc_get_TileCoord (p_lat IN number, p_lon IN number, p_zoom IN number) IS
  
    l_x      NUMBER;
    l_y      NUMBER;
    l_z      NUMBER;
    l_xpos   NUMBER;
    l_ypos   NUMBER;
    l_res    VARCHAR2(2000);
    l_paras  VARCHAR2(500);
       
  BEGIN
    
    l_res:= fnc_get_TileCoord(p_lat, p_lon, p_zoom, l_x, l_y, l_z);
    
    dbms_output.put_line(l_res);
    
    l_xpos:= trunc((l_x - trunc(l_x) ) * TILE_SIZE);
    l_ypos:= trunc((l_y - trunc(l_y) ) * TILE_SIZE);
    
    dbms_output.put_line('x-Pos. in World: '||to_char(trunc(l_x * 256) ) || ' / ' ||
                         'y-Pos. in World: '||to_char(trunc(l_y * 256) ));
     
    dbms_output.put_line('x-Pos. in Tile: '||to_char(l_xpos)|| ' / ' ||
                         'y-Pos. in Tile: '||to_char(l_ypos));
    dbms_output.put_line(' --- ');
    
    l_paras := 'x=' ||to_char( trunc( l_x ) )||
               '&y='||to_char( trunc( l_y ) )||
               '&zoom='||to_char(17-p_zoom);
    
    dbms_output.put_line('http://mt0.google.com/mt?'||l_paras);
    
  END prc_get_TileCoord;
  
END PKG_GET_GMAPS_URL;

Nachfolgend angewendet, erhalten wir die World- und Tile - Pixel Koordinaten und natürlich die Google- Tile URL:

SQL> set serverout on 
SQL> exec pkg_get_gmaps_URL.prc_get_TileCoord (52.514653902014715, 13.350105285644531, 13)
OK
x-Pos. in World: 1126345 / y-Pos. in World: 687822
x-Pos. in Tile: 201 / y-Pos. in Tile: 206
---
http://mt0.google.com/mt?x=4399&y=2686&zoom=4

Eine Differenz von einem World-Pixel zur obigen Tile - Map kann man gelten lassen !

Dank Oracle's PL/SQL !

Friedhold

PS: Googles Mercator wird übrigens 900913 genannt und kommt eigentlich von 600613 - in der SMS-Schrift : Google.

OpenLayers mit Google Maps, Yahoo! Maps und OpenStreetMap

OpenLayers ist eine Open Source JavaScript-Bibliothek mit der sich Karten verschiedener Hersteller darstellen lassen -
vergleichbare Demos habe ich hier einfach angepasst:

• Google Maps
• Yahoo! Maps
• OpenStreetMap

Hierbei wird auf die vorgefertigten Karten-Kacheln dieser Hersteller, den Tiles Renderer Servern, zugegriffen.

In OpenLayers werden diese Base-Map Layer mit folgenden JavaScript-Instanzen gebildet:

var gmap = new OpenLayers.Layer.Google
..
var yahooLayer = new OpenLayers.Layer.Yahoo
..
var mapnik_layer = new OpenLayers.Layer.OSM.Mapnik
..

Grüße,
Friedhold

Mashup Oracle Maps und Google Maps (3)

Nachdem wir im Teil (2) der Mashup Serie dynamische POI's aus dem mvdemo - Schema aktiviert haben, möchte ich nun den Aufruf von Google Maps aus Oracle Maps erklären. Hierbei wird, wie bereits im Beitrag zu Detail Maps .. gezeigt, in Oracle Maps ein InfoWindow mit IFRAME und der URL zu der Google Maps Applikation aufgerufen:


Dabei werden die Koordinaten des Mausklick und die Zoomstufe übermittelt und
in Google Maps in der setCenterMap Function gesetzt:


Die POI Infos sehen wir in Oracle Maps :



und natürlich auch in Google Maps:



Viel Spaß mit den Mashups!
Friedhold

Google Maps Mashup mit AJAX - PL/SQL- DAD (2)

Nachdem wir im Teil 1 die Funktionsweise des Google Maps Clients anhand der XML-Datei nachgewiesen haben, ersetzen wir im Teil 2 die XML-Datei durch den bewährten PL/SQL-DAD Zugriff.

Im mvdemo - Schema implementieren wir folgende Procedure zur serverseitigen Bereitstellung der AJAX-Daten:



Diese Procedure testen wir mit der URL: http://localhost:7777/pls/mvdemo/PLSQLAJAX_GENXML_CA

und erhalten die bereits mit der XML-Datei aus Teil 1 simulierten Daten, nun jedoch im dynamischen PL/SQL - Zugriff:



Im Teil 1 erfolgte der Funktionsnachweis der AJAX-Clientseite und jetzt können wir die dynamischen XML-Daten aus der Datenbank visuell verifizieren.
So brauchen wir nur noch die Datenquelle in der GDownloadUrl - Funktion auswechseln:

GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) { .. }
//GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

und wir erhalten:



Einfacher geht es eigentlich nicht, zumal mit dem PL/SQL-DAD Zugriff die performanteste Technologie angewendet wird.

Friedhold

Google Maps POI's mit AJAX - XML-Datei (1)

Die Möglichkeit zur Integration von Oracle Maps und Google Maps, sogenanntes Mashup, möchte ich mit der Darstellung von "Points of Interest" (POI) in Google Maps auf Basis des Oracle-DB - Zugriffes beginnen.
Der serverseitige Datenzugriff für AJAX-Clients wird häufig mit Java Servlets, PHP oder neuerdings mit Ruby on Rails realisiert.

Oracle stellt mit dem PL/SQL Toolkit, sozusagen im Database Core, umfangreiche HTTP-Funktionen bereit, mit denen sich AJAX und PL/SQL Datenzugriffe recht elegant verbinden lassen. Letztendlich werden diese Funktionen u.a. in APEX angewendet. Die APEX Community hat zum Thema APEX und AJAX eine sehr gut nachvollziehbare TODO-Folge veröffentlicht.

Mit der AJAX-Technologie können Datenschnittstellen abgefragt werden, die sinnvollerweise Daten in einem für Javascript gut verarbeitbarem Format, z.B. in XML oder JSON, liefern.
Zur Entwicklung des AJAX-Clients habe ich die Daten der POI's im XML- Format bereitgestellt:



Diese Datei (plsql_genxml.xml) legt man unter:%ORACLE_HTTP_SERVER%\Apache\Apache\htdocs ab, die URL zu dieser Adresse lautet: http://localhost:7777/plsql_genxml.xml .

Nun kann man mit der Google Maps - Function :

GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) { .. }

die XML-Daten lesen:



Die Google Maps Seite wird unter : %ORACLE_HTTP_SERVER%\Apache\Apache\htdocs abgelegt und der Start erfolgt mit der URL: http://localhost:7777/plsqlajax_gmap.html

Der Javascript - Code ist sehr kompakt, übersichtlich und gut lesbar:

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        //map.addControl(new GSmallMapControl());
        //map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl()) ;
        map.addControl(new GOverviewMapControl()) ;
        
        // Logging
        var sTemp = self.location.href 
        GLog.write(sTemp);
      
        map.setCenter(new GLatLng(37.7725, -122.39607), 13);
        
        map.enableScrollWheelZoom();
        
        //GDownloadUrl("http://localhost:7777/pls/mvdemo/plsqlajax_genxml_ca", function(data) {
        GDownloadUrl("http://localhost:7777/plsqlajax_genxml2.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            // Logging 
            GLog.write(point+ " / " + address + " / " + type );
            map.addOverlay(marker);
          }
        });
        
      }
    }

    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, {title: name, icon: customIcons[type]} );
      var html = name + " / " + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
..

Das Ergebnis sieht dann in Firefox und Firebug so aus:



Die gelieferten Daten können im Google Logger und in der Response - Ausgabe des Firebug betrachtet werden.

Friedhold