Gestion d’une carte miniature

Pour faciliter la navigation sur la carte du P.O.S., nous utilisons une carte miniature indiquant la région

actuellement affichée sur la grande carte. Cette carte miniature est un autre document SVG composé simplement

de deux objets. Le premier est une image au format GIF représentant l’ensemble de la carte. Le deuxième est un

rectangle transparent bleu indiquant quelle partie de la carte est actuellement représentée. On peut déplacer ce

rectangle en cliquant dessus et en le faisant glisser jusqu’à l’endroit désiré. Lorsqu’on relâche le bouton de la

souris, la vue principale est redessinée en fonction de la nouvelle position du rectangle. Si l’on navigue

directement sur la carte en utilisant les fonctions de zoom du visualisateur, la position du rectangle sur la carte

miniature est recalculée automatiquement.

Toutes ces opérations sont réalisées grâce aux attributs « currentTranslate » et « currentScale » du

document SVG, qui permettent de connaître ou de modifier la position actuelle dans la carte. Pour modifier la

position du rectangle, on utilise la fonction suivante qui se déclenche avec les évènements « onzoom » et

« onscroll » du document SVG :

function changeMinimap(evt) {

var docelem = document.svgMap.getSVGDocument().getDocumentElement(); var guide = document.svgMiniMap.getSVGDocument().getElementById("guide");

guide.setAttribute("x", new String((3000 - docelem.currentTranslate.x*4 /docelem.currentScale)/8400*200));

guide.setAttribute("y", new String((1200 - docelem.currentTranslate.y*4 /docelem.currentScale)/6300*150));

guide.setAttribute("width", new String(2400/8400*200/docelem.currentScale)); guide.setAttribute("height", new String(1800/6300*150/docelem.currentScale)); }

On calcule simplement les nouvelles valeurs des attributs « x », « y », « width » et « height » du

rectangle en fonction de la nouvelle position de la carte indiquée par les variables « currentTranslate » et

« currentScale ».

3.7.5 Zoom sur une parcelle

Une des fonctionnalités de la maquette est de pouvoir sélectionner une parcelle par son numéro et de

zoomer sur celle-ci. Il faut noter que nous atteignons ici une des limites du visualisateur Adobe SVG Viewer. En

effet, les possibilités de zoom avec celui-ci sont limitées. Les parcelles étant souvent très petites par rapport au

reste de la carte, il n’est pas possible de zoomer sur celles-ci en manipulant simplement les variables

« currentScale » et « currentTranslate » comme précédemment.

Nous sommes donc obligés de changer la « viewBox » de la carte, que nous calculons à partir des

coordonnées de la parcelle sur laquelle nous souhaitons zoomer. Nous avons donc ajouté un bouton permettant

de revenir à la vue normale. Nous avons également supprimé les possibilités de navigation et de repérage sur la

carte miniature qui seraient devenues trop complexes à gérer dans ce cas. Cette fonction de zoom sur une

parcelle se déroule alors en trois étapes :

1. Recherche de la parcelle et affichage d’un message d’erreur si elle n’existe pas.

2. Calcul du rectangle englobant.

3. Changement de la « viewBox » pour afficher la parcelle et ses alentours.

Celles-ci sont réalisées avec la fonction Javascript suivante :

function zoomParcelle(text) {

var doc = document.svgMap.getSVGDocument(); var parc = doc.getElementById(text);

if (parc==null) {

alert("Cette parcelle n'existe pas"); } else {

var minX=1000000; var minY=1000000;

var maxX=0;

var maxY=0;

var path = parc.getAttribute("d");

searchValue=new RegExp("M|L|Z|\n|\r","g"); searchValue.global = true; path = path.replace(searchValue, ""); searchValue=new RegExp(" +","g"); searchValue.global = true; path = path.replace(searchValue, " "); var coords = path.split(" ");

for (var i=0;i<coords.length;i=i+2) { var x = new Number();

var y = new Number(); x = eval(coords[i]); y = eval(coords[i+1]); if (x<minX) minX=x; if (x>maxX) maxX=x; if (y<minY) minY=y; if (y>maxY) maxY=y; }

var width = maxX-minX; var height = maxY-minY;

doc.getDocumentElement().setCurrentScale(1); doc.getDocumentElement().currentTranslate.x=0; doc.getDocumentElement().currentTranslate.y=0;

doc.getDocumentElement().setAttribute("viewBox", "" + (minX-width/2) + " " + (minY-height/2) + " " + (width*2) + " " + (height*2));

var outerStroke = doc.getElementById("OuterStroke");

outerStroke.style.setProperty('stroke-width', '0.2'); var innerStroke = doc.getElementById("InnerStroke");

innerStroke.style.setProperty('stroke-width', '0.2');

innerStroke.style.setProperty('stroke-dasharray', '0.4,0.4'); var bluePath = doc.getElementById("bluepath");

bluePath.setAttribute("d", parc.getAttribute("d")); bluePath.style.setProperty('visibility', 'visible');

var guide = document.svgMiniMap.getSVGDocument().getElementById("guide"); guide.style.setProperty("visibility", "hidden");

} }

3.8 LIENS AVEC XLINK

XLink est un mécanisme permettant de créer et de décrire des liens entre des ressources. Ces liens

peuvent être des simples liens hypertexte comme en HTML, ou plus complexes. Nous avons déjà vu un exemple

d’utilisation de XLink à la section 3.7.3 pour la réalisation d’un double trait comme contour de secteur

géographique. Le but était d’appliquer plusieurs styles différents à un même chemin sans réécrire la définition

de ce chemin. Dans ce cas, on crée à chaque fois un lien avec l’objet graphique qui définit le chemin en utilisant

XLink. C’est une utilisation typique avec le langage SVG, mais XLink peut être utilisé dans bien d’autres cas.

Une des applications les plus intéressantes de XLink est de décrire des liens hypertextes plus complexes

que ce qui est possible aujourd’hui avec l’élément HTML <A>. Ce dernier permet uniquement de définir un lien

entre deux ressources, et ce lien doit être décrit dans l’une de celles-ci. XLink permet de définir des liens entre

plus de deux ressources et ceux-ci peuvent être décrits dans un autre document (ce qui permet de séparer le

contenu d’un document et ses liens avec d’autres documents).

XLink fait l’objet d’une recommandation du W3C depuis le 27 Juin 2001. Celle-ci est consultable à

l’adresse suivante :

http://www.w3.org/TR/xlink/ : Recommandation du W3C pour XLink

Le lien vers le document Word du règlement est réalisé dans le SVG de la légende grâce à XLink. Le code qui

permet cela se présente ainsi :

<a xlink:href="reglement.doc" target="docwindow">

<text id="liendoc" x="30" y="295" style="font-family:Arial;font-size:14;"> Règlement Word (.doc)

</text> </a>