Intégration de Google Map dans Oracle Apex 4.2

RCI Informatique - 20 mai 2013 - Présentation

Google Map est devenu une interface très répandue pour ajouter une dimension cartographique et de géo-localisation aux applications Intranet/Internet.

Nous allons ici, au travers de deux petites applications, détailler comment utiliser l’API GoogleMap avec Oracle APEX.

Description de la première application

Dans cette première application, nous allons nous intéresser à deux villes françaises comportant des arrondissements.

Paris comporte 20 arrondissements, chaque arrondissement ayant une mairie.

Marseille comporte 16 arrondissements, organisés en 8 secteurs. Chaque secteur possède une mairie, qui gère deux arrondissements.

L’objectif de cette première application est d’afficher la carte d’une ville, chaque mairie de cette ville étant localisée par un marqueur.

Chaque marqueur comporte le numéro de l’arrondissement (pour Paris) ou celui du secteur (pour Marseille).

Chaque marqueur est dans une couleur rappelant l’appartenance politique du Maire de l’arrondissement ou du secteur.

Les informations affichées proviennent d’une table Oracle structurée de la façon suivante :

D’autres informations sont également stockées dans cette table Oracle, les noms et prénoms des maires, ainsi qu’un lien vers une photo.

Cette carte est interactive, avec possibilité pour l’utilisateur de changer l’échelle, ou d’afficher les rues au lieu d’une photo aérienne.

Lorsque l’utilisateur amènera le curseur de la souris sur un marqueur, le titre sera affiché :

Si l’utilisateur clique sur l’un des curseurs, une fiche comportant une courte description de la mairie, et le portrait du Maire est affiché, dans une région à

droite de la carte :

Tout ceci fonctionne sans qu’il n’y ait de « submit » envoyé. Donc il ne se produit pas, tant que l’on reste sur la carte d’une même ville de rechargement de

l’ensemble de la page. Seule la région d’affichage de la mairie et de son maire est actualisée.

Enfin, une première région propose la sélection de la ville à afficher :

Le nom de la ville est inscrit dans l’entête de région. Les contrôles Google Map sont actifs et utilisables.

Description de la seconde application

Dans cette seconde application, nous allons nous voir comment des marqueurs Google Map peuvent être ajoutés, positionnés de façon interactive, et les

coordonnées de ces marqueurs sauvegardés dans une table Oracle.

L’utilisateur commence par sélectionner une ville, parmi Paris, Lyon et Marseille. C’est une carte avec les noms de rues qui est affichée.

Pour ajouter un nouveau marqueur, l’utilisateur va commencer par introduire le descriptif de ce marqueur dans un champ texte de saisie.

Puis, il va se déplacer dans la carte, zoomer si besoin de façon à placer le lieu à marquer au centre de la carte Google Map.

Enfin, il pourra cliquer sur le bouton « Nouveau Marqueur Google Map ».

Une fois le marqueur ajouté, celui est visible sur la carte

Les nouveaux marqueurs peuvent être déplacés, sans contrainte.

Par exemple, on va déplacer, avec le curseur de la souris, le marqueur des Buttes Chaumont, à la station de métro :

Dès que l’on atteint la localisation souhaitée, il suffit de cliquer sur le marqueur, pour enregistrer dans la table Oracle la position.

La région listant les nouveaux marqueurs présente les marqueurs créés :

L’application permet de créer de multiples marqueurs, et également de déplacer des marqueurs existants.

Voici un exemple après avoir créé quelques marqueurs supplémentaires , sauvegardés dans une table Oracle.

Quelques exemples à Marseille :

Extraits des concepts et scripts utilisés pour les deux exemples d’applications

Utilisation de l’API Google Map

Après s’être inscrit auprès de Google, on obtient une clé d’accès

On accède à l’Api de la version 3.12 de Google Map avec l’URL suivante, où kkk est la clé fournie par Google

https://maps.googleapis.com/maps/api/js?v=3&key=kkk&sensor=false

On place cette référence dans la propriété « File URLs » de l’attribut « JavaScript » de la page Apex destinée à comporter la carte.

Ici, au lieu de saisir directement l’URL, on utilise un élément applicatif qui comporte la valeur de l’ URL :

Affichage d’une carte centrée à une position précise avec un facteur d’échelle (zoom) précis

var mapOptions = {

zoom: 12,

center: new google.maps.LatLng (48.860522,2.34105),

mapTypeId: google.maps.MapTypeId.SATELLITE

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

Création d’un nouveau marqueur dynamique à une position précise, fonction JavaScript

function nouveau_marqueur (xlat, xlng, xtitle, xn, xcouleur) {

// le nouveau marqueur est affiché avec le symbole d'un marqueur dynamique

// d'une couleur précise et comportant un court texte (un ou deux caractères)

var image = "http://chart.apis.google.com/chart?" +

"chst=d_map_pin_letter&chld=" + xn + "|" + xcouleur + "|000000";

// creation du nouveau marqueur

var marker = new google.maps.Marker ({

// a la position issue de la table Oracle

position: new google.maps.LatLng (xlat, xlng),

map: map,

// avec un titre calculé

title: xtitle,

// on ne peut pas dépacer le marqueur

draggable: false,

// l'image est l'image dynamique calculée, en utilisant la bibliothèque Google Chart

icon: image

});

Adjonction d’un gestionnaire d’évènement clic, à un marqueur, fonction JavaScript

function listener_clic (m) {

google.maps.event.addListener( markersArray[m-1], 'click', function() {

$x ('P1_X').value = m;

// appel asynchrone de type Ajax

// le process appelé ne fait rien, le but de cet appel étant d'actualiser la variable de session nommé P1_X

// et ce, avant l'appel de rafraichissement de la région affichant la fiche de la mairie

// dont le marqueur a été cliqué

var ajaxRequest = new htmldb_Get(null, $v("pFlowId"), "APPLICATION_PROCESS=RIEN", $v("pFlowStepId"));

ajaxRequest.add("P1_X", m);

var ajaxReturn = ajaxRequest.get();

// appel de la fonction d actualisation sélective de la région de type Report

visu_refresh();

}

);

} // fin de listener_clic

Une fonction stockée PL/SQL retournant une couleur en fonction de l’appartenance de l’ élu

-- Détermine la couleur du marqueur en fonction

-- de l'appartenance des maires de chaque arrondissement ou chaque secteur

function GetCouleur (xVille in varchar2, xArrdt in integer) return varchar2 is

Cursor C is select Maire_Apparten as d from VILLES_ARRONDISSEMENTS

where Ville = xVille and ARRONDT_SECTEUR = xArrdt;

begin

for m in C loop

if InStr (m.d , 'UMP') > 0 then return couleur_bleu; end if;

if InStr (m.d , 'UDI') > 0 then return couleur_bleu; end if;

if InStr (m.d , 'EELV') > 0 then return couleur_vert; end if;

if InStr (m.d , 'PS') > 0 then return couleur_rose; end if;

if InStr (m.d , 'PRG') > 0 then return couleur_rose; end if;

end loop;

return couleur_jaune;

end; -- GetCouleur

Une procédure stockée PL/SQL qui affiche la carte Google Map dans une région PL/SQL

procedure affichage_carte is

begin

htp.p ('<body>');

htp.p ('<div id="map-canvas"></div>');

htp.p ('</body>');

end; -- affichage_carte

Une fonction stockée PL/SQL construisant le source d’une fonction JavaScript d’actualisation d’une région Apex de type Report Function Get_Script_P1_Report_visu return varchar2 is

begin

wJS := null;

AJS ('

<script type="text/javascript">

function visu_refresh() {

pId = ''#REGION_ID#'';

$a_report(pId.substring(1), ''1'', ''15'');

}

</script>

');

return wJS;

end; -- Get_Script_P1_Report_visu

Une fonction stockée PL/SQL construisant la définition CSS de la carte affichée Google Map

Function Get_css (xWidth in integer, xHeight in integer) return varchar2 is

begin

wJS := null;

AJS ('

html, body, #map-canvas {

margin: 0;

padding: 0;

height: ' || xHeight || 'px;

width: ' || xWidth || 'px;

}

');

return wJS;

end; -- Get_css

La fonction stockée PL/SQL construisant la fiche descriptive d’une mairie d’arrondissement

-- Espaces insécables, pour empêcher des retours à la ligne suivante

function ESP_insec (x in varchar2) return varchar2 is

begin

return replace (x, ' ', '&nbsp;');

end;

-- HTML défini à l'intérieur d'un fonction stockée de ce package

function FicheMairie (xVille in varchar2, xArrdt in integer) return varchar2 is

Cursor C is select * from Villes_arrondissements where

ville = xVille and ARRONDT_SECTEUR = xArrdt;

w1 varchar2(255); w2 varchar2(255);

wSecteur varchar2(255);

begin

for m in C loop

if xVille = 'Marseille' then wSecteur := '<b>Secteur ' || m.ARRONDT_SECTEUR || ' de Marseille</b><br><br>'; end

if;

w1 := Esp_Insec(wSecteur) || Esp_Insec (m.Ville || ' ' || m.mairie || ' arrondt.');

w2 := Esp_Insec (m.maire_prenom || ' ' || upper(m.maire_nom));

return ('<b>' || w1 || '</b><br><br>'

|| Esp_Insec('Maire: ') || '<b>' || w2 || '</b><br><br>'

|| '<img border = "0" src="' || m.maire_photo || '"> <br><br>'

|| Esp_Insec('Appartenance: ') || '<b>' || m.maire_apparten || '</b>' );

end loop;

return null;

end; -- FicheMairie

Pour essayer ces deux applications :

Arrondissements de Paris et Marseille :

https://apex.oracle.com/pls/otn/f?p=24114

Création de nouveaux marqueurs Google Map :

https://apex.oracle.com/pls/otn/f?p=35236

Pour obtenir les sources complets de ces deux applications

En faire la demande, par e-mail, à

RCI Informatique SAS

rci@wanadoo.fr

Pour aller plus loin avec Oracle Apex 2.2 ...

BLOG de RCI Informatique sur Oracle XE et Application Express

RciTools RPDF, bibliothèque de génération par programmation PL/SQL de documents PDF

RciTools RXLS, bibliothèque de génération par programmation PL/SQL de documents Microsoft Excel et Calc Open Office

Dossier technique Oracle Application Express (HTML DB-APEX)

Un exemple complet, pas à pas, de création d'une application APEX 321

Sessions de formation à Oracle Application Express (HTML DB-APEX)

Installation d'Oracle 11g release 1 et activation d'APEX (intégré en standard)

Installation d'Oracle 11g release 2 et activation d'APEX (intégré en standard) Installation d'Oracle 10.2 XE sous Windows (disponible et actualisé depuis 2006) www.rci-informatique.fr

RCI Informatique SAS

rci@wanadoo.fr

02 35 71 24 59