API et GPX : Zoom sur Trace

**patrick.agrain** · 30/07/2010, 15h55

Bonjour à tous,

En zyeutant tous les messages concernant ce sujet, je suis tombé sur du code source qui m'a beaucoup aidé pour démarrer la chose.

Je suis maintenant confronté à un problème pour lequel je commence à être "un peu sec".

Symptômes : le premier chargement de la page montre l'ensemble du monde (zoom: 0). On distingue malgré tout la présence du GPX...
Un rafraîchissement de ladite page (Touche F5, par ex.) recentre la vue sur la trace GPX incluse.
Chaque nouvel accès montre la vue de façon correcte.
Cela repasse à une vue mondiale dès que l'on vide la cache du navigateur.

Ci-joint, le code utilisé.
--------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="Patrick AGRAIN">
<meta name="keywords" content="VTT alsace">
<title>Le Circuit avec Geoportail</title>

<script type="text/javascript"
src="http://api.ign.fr/geoportail/api?v=1.0-e&key=9072066421036500892&instance=MapIGN&">

</script>
<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/js/1.0/Geoportal.js">

</script>

<script type="text/javascript">
function initGeoportalMap() {
// creation de la carte
geoportalLoadMapIGN("plancheCarto", "normal", "FXX");

// ajout des couches auxquelles la licence donne accès après le chargement du gpx : évite de charger la france pour rien..
// MapIGN.addGeoportalLayers();
// OU ajout des couches une à une:
// MapIGN.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS:WMSC',{opacity:1, visibility:false});
MapIGN.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC',{opacity:1, visibility:true});

// ajout d'une couche vide pour éviter le bug du blocage du zoom maxi si carte seul
// MapIGN.getMap().addLayers([new OpenLayers.Layer.Vector('')]);

MapIGN.setInformationPanelVisibility(false);
MapIGN.openLayersPanel(false);
MapIGN.openToolsPanel(false);

olmap = MapIGN.getMap();

// tracage de la couche en important le gpx
nom_couche = "Gpx";
url = "./gpx/geoportail.gpx";
if (url != "0") {
gpxlayer = olmap.addLayer(
"GPX",
nom_couche,
url,
{
// styleMap: styleMap
style: {strokeColor: "#666699", strokeWidth: 5 }
}
);

// transparence du la couche contenant la trace
gpxlayer.setOpacity(0.8);

// zoom sur la trace issue du gpx
gpxlayer.events.register('loadend', gpxlayer, function()
{
this.map.zoomToExtent(this.getDataExtent());
} );

gpxlayer.visibility = true;
}

}
</script>

</head>
<body>
<div id='plancheCarto' style="width:100%;height:500px;"></div>
</body>
</html>
--------

Y aurait-il quelque chose de "choquant" là-dedans ?
D'avance merci pour l'aide que vous pourriez m'apporter.

Cordialement,
Patrick

**dgrichard** · 31/07/2010, 12h49

Envoyé par patrick.agrain

Symptômes : le premier chargement de la page montre l'ensemble du monde (zoom: 0). On distingue malgré tout la présence du GPX...

1. La gestion de l'évènement "loadend" n'est donc pas effectuée ...

Envoyé par patrick.agrain

Un rafraîchissement de ladite page (Touche F5, par ex.) recentre la vue sur la trace GPX incluse.

2. L'API ayant été préalablement chargée, l'évènement "loadend" est intercepté ...

Envoyé par patrick.agrain

Chaque nouvel accès montre la vue de façon correcte.
Cela repasse à une vue mondiale dès que l'on vide la cache du navigateur.

Cf. 1 et 2 ci-dessus ...

Envoyé par patrick.agrain

Ci-joint, le code utilisé.
--------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="Patrick AGRAIN">
<meta name="keywords" content="VTT alsace">
<title>Le Circuit avec Geoportail</title>

<script type="text/javascript"
src="http://api.ign.fr/geoportail/api?v=1.0-e&key=9072066421036500892&instance=MapIGN&">

</script>
<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/js/1.0/Geoportal.js">

</script>

<script type="text/javascript">
function initGeoportalMap() {
// creation de la carte
geoportalLoadMapIGN("plancheCarto", "normal", "FXX");

// ajout des couches auxquelles la licence donne accès après le chargement du gpx : évite de charger la france pour rien..
// MapIGN.addGeoportalLayers();
// OU ajout des couches une à une:
// MapIGN.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS:WMSC',{opacity:1, visibility:false});
MapIGN.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC',{opacity:1, visibility:true});

// ajout d'une couche vide pour éviter le bug du blocage du zoom maxi si carte seul
// MapIGN.getMap().addLayers([new OpenLayers.Layer.Vector('')]);

MapIGN.setInformationPanelVisibility(false);
MapIGN.openLayersPanel(false);
MapIGN.openToolsPanel(false);

olmap = MapIGN.getMap();

// tracage de la couche en important le gpx
nom_couche = "Gpx";
url = "./gpx/geoportail.gpx";
if (url != "0") {
gpxlayer = olmap.addLayer(
"GPX",
nom_couche,
url,
{
visibility: true,
opacity:0.8,
// styleMap: styleMap
style: {strokeColor: "#666699", strokeWidth: 5 }
}
);

// transparence du la couche contenant la trace
//gpxlayer.setOpacity(0.8);

// zoom sur la trace issue du gpx
//gpxlayer.events.register('loadend', gpxlayer, function()
// {
// this.map.zoomToExtent(this.getDataExtent());
// } );
//
//gpxlayer.visibility = true;
}

}
</script>

</head>
<body>
<div id='plancheCarto' style="width:100%;height:500px;"></div>
</body>
</html>
--------

J'ai modifié légèrement le code - pourrais-tu tester ?

L'idée est que la couche est rendu visible au chargement et que l'API gère l'évènement "loadend" par défaut en zoomant sur l'emprise.

**patrick.agrain** · 02/08/2010, 14h20

Bonjour,

Tout d'abord, merci d'avoir jeté un coup d'oeil.

J'ai effectué la modification. Mais à présent :
- Pas de zoom sur le GPX.
- Vision du monde (zoom:0) systématique, même après rafraîchissement de la page.

Cordialement,
Patrick

PS : l'essai s'est effectué sous FF 3.6.8.

**mga_geo** · 02/08/2010, 22h17

Dans le code modifié par Didier, j'ai l'impression que le code javascript de l'API est chargé 2 fois: absence de includeEngine=false sur la ligne

J'ai une page qui se centre bien sur un gpx: http://atlasnw.free.fr/geoportail/ex...px_centre.html

**patrick.agrain** · 03/08/2010, 11h01

Bonjour,

@mga_geo:
Merci pour votre réponse.
Effectivement votre page se charge correctement dès la première fois.
J'étudie le code source et vais essayer de le reporter sur mon fichier.

'includeEngine=false' ne modifie pas le comportement.

@tous:
Otez-moi d'un doute.
Puisque les données finissent par arriver (au deuxième coup), il n'y a pas d'histoire de proxy mal ou non défini ?

A+
Patrick

**patrick.agrain** · 03/08/2010, 15h37

Bonjour,

Après moult essais, voici quelques observations qui, j'espère, feront avancer le schmilblick...

Tout d'abord, l'environnement :
- J'utilise le CMS Joomla 1.5.20.
- Je suis en local (http://localhost)
- La carte apparaît dans l'un des onglets d'un article.

Les observations :
- Lorsque l'onglet Geoportail est sélectionné par défaut, c'est OK, avec ou sans vidange de cache.
- Lorsqu'un autre onglet est sélectionné, et que l'on passe pour la première fois (ex. après vidange du cache) sur l'onglet Geoportail, alors le zoom est à 0 (vision du monde). Ce n'est qu'en faisant F5 (rafraîchissement de la page) que tout rentre dans l'ordre. Les passages suivants d'un onglet à l'autre ne change plus le rendu, c'est toujours OK.

Voilà, si cela peut en éclairer certains...
A+
Patrick

**Zébulon-21** · 03/08/2010, 15h51

@ Patrick

As-tu jeté un oeil sur cette discussion ?

Il y a peut-être une réponse à tes interrogations (j'utilise également la dernière version de Joomla).

**patrick.agrain** · 04/08/2010, 09h25

Merci pour l'info.

J'y jette un oeil et je teste (et j'adapte en conséquence).

A+
Patrick

**trukker** · 04/08/2010, 17h28

Bonjour,

Je voulais résoudre le même problème.

le code est celui de l'exemple du site de l'api :

http://api.ign.fr/geoportail/api/doc...les/index.html
utilisation de GPX

j'ai remplacé la ligne suivante par la seconde

//viewer.getMap().setCenterAtLonLat("-1°46'46.2\"O", "48°16'18.8\"N", 10);

viewer.getMap().zoomToLonLatExtent(getDataExtent("GPX"));

Cela ne fonctionne pas, le zoom se fait sur la carte du monde, mais c'est peut être une erreure de syntaxe, je compreds mal le javascript.

**mga_geo** · 05/08/2010, 06h44

Lorsque l'instruction "zoomToLonLatExtent" est traitée par le javascript, le fichier GPX n'est pas encore chargé dans ton cas.
Ce fichier est chargé de manière asynchrone par le navigateur. A la fin du chargement, un évènement permet de faire des traitements. Il ne faut donc mettre "zoomToLonLatExtent" sur un évènement de type "loadend" cf http://atlasnw.free.fr/geoportail/ex...px_centre.html

**trukker** · 05/08/2010, 10h22

Merci mga geo,

J'ai ajouté l'évènement loadend en recopiant ton code et cela fonctionne parfaitement.

**dgrichard** · 05/08/2010, 11h36

Envoyé par patrick.agrain

Bonjour,

Tout d'abord, merci d'avoir jeté un coup d'oeil.

J'ai effectué la modification. Mais à présent :
- Pas de zoom sur le GPX.
- Vision du monde (zoom:0) systématique, même après rafraîchissement de la page.

Cordialement,
Patrick

PS : l'essai s'est effectué sous FF 3.6.8.

C'est ma faute, j'ai oublié de copier une partie du code (que je refais de tête) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
gpxlayer = olmap.addLayer(
               "GPX",
               nom_couche,
               url,
               {
visibility: true,
opacity:0.8,
                 // styleMap: styleMap
                 style: {strokeColor: "#666699", strokeWidth: 5 },
eventListeners:{
"loadend":function(){
if (this.maxExtent) {
this.map.zoomToExtent(this.maxExtent);
 this.setVisibility(true);
}
}
}
            );

**patrick.agrain** · 16/08/2010, 10h29

Bonjour,

Merci dgrichard pour cette correction. Désolé pour le délai, j'avais un peu décroché...

Malheureusement, les effets sont toujours les mêmes.

Je pense de plus en plus que ce symptôme provient du plugin "Tabs & Slides (in content items)" pour Joomla. Voir message du 03/08 de ce fil de discussion.

En fait, je suis persuadé que les codes fournis par vous tous fonctionnent très bien (je vous en remercie d'ailleurs), mais aucun exemple fourni n'utilise un contenu encapsulé dans un onglet pour affichage.

Un workaround serait de faire en sorte que ce soit systématiquement l'onglet Géoportail qui soit activé par défaut. Pour l'instant, ce n'est pas le cas, l'onglet actif est le dernier consulté.

Je vais creuser côté plugin Joomla, soit pour corriger, soit pour en changer.

Dans tous les cas, encore merci pour le temps passé.

Cordialement,
Patrick

**oliverf1** · 23/08/2010, 23h40

Envoyé par mga_geo

Lorsque l'instruction "zoomToLonLatExtent" est traitée par le javascript, le fichier GPX n'est pas encore chargé dans ton cas.
Ce fichier est chargé de manière asynchrone par le navigateur. A la fin du chargement, un évènement permet de faire des traitements. Il ne faut donc mettre "zoomToLonLatExtent" sur un évènement de type "loadend" cf http://atlasnw.free.fr/geoportail/ex...px_centre.html

Bonjour,
Je pense que j'ai un problème presque similaire mais avec un layer de type OpenLayers.Layer.Markers. Cependant je n'arrive pas à le résoudre avec ta solution.

Pour éviter les longs discours voici de quoi il retourne:
- Mon premier essai qui ne fonctionne pas (zoom worldwide)
http://oliverf1.free.fr/test_ign.html

- En essayant de debugger je me suis rendu compte qu'en ajoutant un "alert" cela fonctionnait (sic) ! Ceci confirme qu'il y a quelque part un problème de synchronisation et m'a orienté sur ce post ...
http://oliverf1.free.fr/test_ign2.html

- J'ai essayé d'intégrer ton code dans cet exemple,mais sans succès:
http://oliverf1.free.fr/test_ign3.html

Si une bonne âme a une idée ca sera le bienvenue !

Cordialement,
--
Olivier

**mga_geo** · 24/08/2010, 06h41

Dans ce cas, la couche "Photos" n'est pas chargée de manière asynchrone: elle n'attend pas le chargement d'un fichier pour créer des marqueurs par exemple.
L'évènement "loadend" ne se déclenche pas!
En faisant ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    myViewer.getMap().addLayer(myLayer);
    myLayer.map.zoomToExtent(myLayer.getDataExtent());

le zoom s'améliore!
J'ai l'impression que le "myLayer.map.zoomOut(2);" n'est plus nécessaire.

**oliverf1** · 24/08/2010, 11h10

Bonjour,

En fait sur cet exemple, j'ai pas un zoom worldwide mais uniquement sur la france.
Par contre le résultat que je veux obtenir c'est le niveau de zoom de l'exemple 2 :
http://oliverf1.free.fr/test_ign2.html mais sans le "alert" bien sûr.

Ce que tu préconises, consiste juste à supprimer le zoomOut de mon premier exemple ? (http://oliverf1.free.fr/test_ign.html)
J'avais déjà tester cela mais sans beaucoup plus de succès.

Pour info on obtient des résultats différents suivant le navigateur :
sous FF 3.6.8 et IE 8: test_ign1.html ne marche jamais ( zoom trop large), test_ign2.html OK
sous IE6 : test_ign1.html hang completement le navigateur, test_ign2.html OK
sous Chrome : test_ign1.html fonctionne après avoir rafraichit la page, test_ign2.html OK

Une autre piste ?

En tout cas merci de ton aide.

--
Olivier

**mga_geo** · 24/08/2010, 11h58

Je viens de faire un essai avec cette séquence:

myViewer.getMap().addLayer(myLayer);
console.log(myLayer.getDataExtent().toString())
myLayer.map.zoomToExtent(myLayer.getDataExtent());
alert("toto");
console.log(myLayer.getDataExtent().toString())
myLayer.map.zoomToExtent(myLayer.getDataExtent());

L'extent trouvé dans les 2 cas est identique:
left-bottom=(533844.3349083231,5116370.033161413) right-top=(533910.9240153829,5117093.83249055)

Je me suis souvenu d'un fil où il fallait déjà initialiser la position de la carte avant de passer ce genre de commandes de centrage.
La tentative suivante fonctionne chez moi avec FF3.5.11:

myViewer.getMap().setCenterAtLonLat(-1.5,48.0,10);
myViewer.getMap().addLayer(myLayer);
console.log(myLayer.getDataExtent().toString())
myLayer.map.zoomToExtent(myLayer.getDataExtent());

**oliverf1** · 24/08/2010, 18h15

Ca fonctionne :-D
http://oliverf1.free.fr/test_ign.html

Enfin reste le cas de IE6 qui se hang complètement, mais bon pour IE6 au pire je rajouterais un popup explicatif et qui incite à migrer vers un navigateur plus récent ...

Merci infiniment pour ton aide.

Cordialement,
--

API et GPX : Zoom sur Trace

IGN API Géoportail

Discussions similaires

Partager

Partager