19 March 2012

ADF: use custom image (eigene Bilder) in MapPointTheme

Ein kurzer Tipp zur Nutzung von "eigenen" Bildern als POI in ADF... dieses Beispiel basiert auf JDeveloper 11.1.2.1.
Als alter Schifffahrtskaufmann hatte ich die Herausforderung, auf einer (Welt-) Karte die Schiffspositionen "meiner" Reederei darzustellen. Ich wollte diese nun nicht mittels "Fähnchen" oder den default "Bubbles" markieren, sondern mit einem "richtigen" Schiff.
Hier zunächst das Ergebnis:


Dazu habe ich eine dvt:mapPointTheme verwendet, welches die Schiffspositionen aus der Datenbank ließt. Standardmäßig wird im dvt:mapPointTheme als "Image"  (wie bei den Oracle Offices in DE zu sehen) der rosa Bubble als InBuilt Image genutzt (es stehen da auch noch weitere 20 zur Auswahl wie Flaggen, Zeichen, usw.).
Dann habe ich mir ein "Containershiff" besorgt... und es in mein Images-Verzeichnis meiner Anwendung hochgeladen (C:\...\JDEV11121\mywork\ADF-GEO\ViewController\public_html\images
Im JDeveloper: ..ViewController - Application Sources - Web-Content - images (evtl. neu zu erstellen).
Für den POI gibt es jetzt unter den DVT Komponenten einen: "dvt:PointStyleItem".



Diese Komponente ziehe ich jetzt auf mein dvt:MapPointTheme;

und setze im Point Style Item IsDefault: auf true and selektiere mein Image aus der Liste.
Fertig !


Dies Beispiel beruht übrigens auf der kleinen Übung in meiner ADF News Session und kommt ebenfalls ohne eigene "Geodaten-Infrastruktur" aus...

16 March 2012

ADF News Session - Geodaten Integration - Recap

Eine kurze Zusammenfassung zur ADF News Session vom Freitag, 16.3.2012:

Wir erstellen eine Seite mit einer Karte und Point-Layer/Theme ohne eigene Geodaten Infrastruktur... - wir nutzen lediglich den JDeveloper 11g/12g, ADF und die ADF Data Visualizations.
Die Karte kommt vom Oracle "Elocation Server" - die POI (Points of Interest) entstammen einer eigenen .csv Datei.

Das Ergebnis vorweg: Oracle Niederlassungen auf der Deutschland/Europa Karte













Die Steps dahin:
1. Neue "ADF_GEO.jsf"  anlegen
Einzelschritte:
New Application - ADF Fusion Application - OK -
Application Name: "Map-App" - Finish - warten...
Auf Viewcontroller-Projekt klicken und recht Maustaste: New .. - Page:
Page-Wizard startet..: File Name: Karte.jsf - OK


2. Component Palette (standardmäßig: oben rechts) auswählen: ADF Data Visualizations:




die Komponente "map" auf die Seite ziehen...

der "Create Geographic Map" Wizard startet.















3. Bei "Map Configuration" die Mapviewer url eingeben. In unserem Beispiel war es der
Oracle Mapviewer auf dem "elocation-server":

Mapviewer url: http://elocation.oracle.com/mapviewer  - dann: Test Connection

-- OK

Als Geocoder url verwenden wir ebenfalls die Oracle Instanz:

Geocoder url: http://elocation.oracle.com/geocoder/gcserver - dann: Test Connection

- der "Geocoder" wird unsere Adressdaten aus der .csv Datei in "POI"s auf der Karte umrechnen...

4. Karte zentrieren (Klick auf das Zentrum der Karte) - Zoom-Level über den Slider auf 4 setzen --> OK
Bei Hinweis: "Please specify numeric value", bei den Koordinaten X und Y evtl. das "Komma" mit einem "Punkt" ersetzen (passiert manchmal bei deutschem Character Set). 

Im Property Window (rechts unten) können nachträglich Länge (Y) und Breite (X) sowie das Zoomlevel angepasst werden.

5.Layer hinzufügen. Hier über Placeholder Data Control zur Nutzung einer CSV Datei.
Die Datei hatte die Struktur:  1. Zeile: Name,strasse,land,plz,ort,Land,Anzahl oder Umsatz - ab 2. zeile die Adressen..
File --> New --> From Gallery, Data Control --> Placeholder Data Control --> Name vergeben: Oracle_NDL --> OK
wechseln zu: Data Controls: (Refresh klicken!!) dann rechte Maustaste auf "Oracle_NDL" und: "Create Place Holder Data Type" 
Name des Placeholders vergeben --> - OK.
Update (29.12.2015) für JDEV 12.1.3:
Zunächst über "Data" und "+" die Spalten der Tabelle hinzufügen wie : Name, Strasse, plz, Ort, Land, Anzahl... dann (weiter)...
--> Data --> Import... - csv Datei im Dateisystem suchen..(Filename, Browse..). - Character set: Cp1252 sollte passen...OK --> evtl. Spaltenüberschriften anpassen --> OK
Jetzt Layer/Theme hinzufügen: Das Placeholder Data Control auf die Karte ziehen und der Create Theme Wizard started --> PointTheme selektieren:

Der CreatePoint Theme Wizard startet - Namen vergeben (erscheint im UI des Users!) - Location: Address Type: "International Address" (mit unserem Format) auswählen und "mappings" mit unserer Datenstruktur herstellen. street = Strasse, city = ort, usw. 
Bei Point Data könnten wir "Umsatz" oder "Anzahl" nehmen und als Label "Umsatz" oder "Anzahl Mitarbeiter" eintragen (Category kann leer bleiben) --> OK - speichern... (;-)
Sollte es im Design Window einen Fehler geben (rote Markierung) mit dem Hinweis, daß "Summary" ausgefüllt sein muß, auf den Hinweis klicken und bestätigen, dass es OK ist - dann -->
Deployment:
Linker Hand bei ""Projects" - "Viewcontroller" aus wählen und oben aus dem Hauptmenue "Applications" auswählen .. dann: "Deploy" und den Wizard bis zum Ende durchgehen.
Bei "Popup" der einzubindenden URL von "elocation" und "geocoder" - mit OK bestätigen.
Im Deployment-log (unten) erscheint dann die URL für die Page/Seite wie:
localhost:7101/7Applicationname-ViewController-context-root...
hier ergänzen wir: /faces/Karte.jsf

Updated 4.1.2016:
Kleine Erweiterung (Navigation Bar, Meter-Bar):
Im JDEV im Property Window (standardmäßig unten rechts) in der Sektion "Appearance" ergänzen:
ShowScaleBar: true
Starting X: 10 (geografische Länge - östlich Greenwich - entspricht Hamburg, Lombardsbrücke)
Starting Y: 50 (geografische Breite - Breite nördlich des Äquators, ca. Höhe Frankfurt)
Summary: ... (ist Mußfeld; deswegen kam vorhin der Fehler, weil es hier leer war)
Unit: METERS

"Icons/Pins" anpassen für die Locations:
Default-mäßig ist als Icon oder Pin der orangene "Bubble" gesetzt.
Andere Optionen gibt es auch noch...
Wie? Im "Structure-Window" (unten links) in der Baumstruktur zu dvt:map hangeln und aufklappen - darunter findet man: dvt:MapPointTheme - anklicken und rechts im "Property Window" bei "Appearance" - "BuiltInImage" ein anderes auswählen.
Falls Du "eigene" Pins/Icons verwenden möchtest, siehe bitte diesen BLOG Beitrag mit den Schiffen....

Toolbar hinzufügen:
Man kann z.B. oberhalb der Karte einen nützlichen "Toolbar" einblenden wie folgt:
Aus der "Component Palette" und  " ADF Data Visualisations" wähle man aus der Sektion "Type-specific-Child-Tags" den "Toolbar" und setze ihn oberhalb der Karte - am besten im "Structure Window"...

Viel Spaß und Erfolg weiterhin mit ADF und Geodaten....!!

13 March 2012

ADF DVT Visualisation Components - Map mit Colortheme, Pie- und Bar-Graph

In Vorbereitung auf eine ADF Java News Session am Freitag, 16.3.2012 08:30h habe ich wieder mal in die DVT Komponenten geschaut und coole Grafiken erstellt:

Zoom Level 2:  Pie-Graphs
 Weiter "Rein-Zoomen" und ...
Zoom Level 4: Color Theme plus Bar-Graphs


Zoom Level 5: Color Theme plus Bar-Graphs