Bonjour,

Je viens de m'inspirer d'un site ou blog pour afficher des données gpx ou xml sur des cartes utilisant OpenLayers.js version 2 : http://www.untourenvelo.ch/Carte_Plein_Ecran.html

Dans le développement de ce site il est possible d'afficher des données gpx qui sont au format xml, pour les points d'intérêt appelés Waypoints, lorsqu'on clique sur l'un d'eux apparaît dans une fenêtre popup le nom de point.

Dans mon utilisation je désirerai afficher une donnée complémentaire qui est comprise entre des balises <desc> et qui comporte un lien hypertexte permettant d'atteindre soit des photos ou une page html.

Je pense avoir localisé dans le fichier "Carte_Plein_Ecran.js" : http://www.untourenvelo.ch/Carte_Plein_Ecran.js où est traité l'affichage de cette fenêtre popup

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
StyleGPX = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
//Icone en fonction du type de waypoint, le nom du fichier png doit être identique au texte dans la balise sym du fichier gpx
                    externalGraphic: "../../images/GPS/${sym}.png",
                    pointRadius: 1,
                    //graphicHeight: 60,
                    graphicYOffset: -25,
                    graphicXOffset: -4,
 
//Valid values for horizontal alignment: “l”=left, “c”=center, “r”=right.  
//Valid values for vertical alignment: “t”=top, “m”=middle, “b”=bottom.  
//Example values: “lt”, “cm”, “rb” 
                    label: "${name}",       
                    labelAlign: 'rb',
                    fontSize: 11,
                    fontFamily: "Arial",
                    fontColor: "black",
                    labelYOffset: 0,
                    labelXOffset: -10,
                    fillColor: "ffcc66",
                    //strokeColor: "#ff00ff",
                    strokeColor: "${CouleurLigne}",
                    strokeWidth: 4, 
                    strokeOpacity: 0.6,
					cursor:"pointer"
//Supported values include “circle”, “square”, “star”, “x”, “cross”, and “triangle”.
//graphicName: "circle",
                },{context: ConditionsStyle} ),
                "select": new OpenLayers.Style({
                    externalGraphic: "../../images/GPS/${sym}.png",
                    graphicYOffset: -32,
                    graphicXOffset: -5,
                    pointRadius: 20,
                    fillColor: "#66ccff",
                    strokeColor: "#3399ff",
                    graphicZIndex: 2,
 
                })
            });
 
 
StyleGPX.styles["default"].defaultStyle.externalGraphic = "";
StyleGPX.styles["default"].defaultStyle.pointRadius = 2;
StyleGPX.styles["default"].defaultStyle.label = "";
Mon fichier xml à cette forme

Code xml : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<gpx version="1.1" creator="Locus Android"
 xmlns="http://www.topografix.com/GPX/1/1"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd"
 xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3"
 xmlns:gpxtrkx="http://www.garmin.com/xmlschemas/TrackStatsExtension/v1"
 xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
 xmlns:locus="http://www.locusmap.eu">
<wpt lat="27.759667" lon="-10.606667">
<name><![CDATA[Nom du waypoint]]></name>
<sym>peinture-1</sym>
<desc><a href="http://lien url vers le site web"" target="_blank">Lien vers le site</a></desc>
</wpt>
<gpx>
C'est un fichier que j'ai déjà utilisé sur Locusmap sur une tablette sous Android. Si nécessaire je peux modifier la syntaxe entre les balises <desc>

Quelles seraient la ou les lignes à ajouter dans ce fichier "Carte_Plein_Ecran.js" qui permettraient l'affichage de ce lien hypertexte ?

Dans d'autres affichages de waypoints sur des cartes que j'ai créées utilisant également OpenLayers.js, ce sont des fichiers html avec des lignes pour chaque waypoints qui me permettent l'affichage de ce lien dans la fenêtre popup

Par exemple:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
vectorLayer5.addFeatures(feature);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-10.609385,26.283814).transform(epsg4326, projectTo),
{description:"MP-Tifariti<br><a style='background-color: #ffcc99;' href='lien html'  target='_blank;'>Lien vers le site</a>"},
{externalGraphic: 'markers/mp-1.png', graphicHeight: 25, graphicWidth: 20, graphicXOffset:-10, graphicYOffset:-25  }
 );
Je m'intéresse à la possibilité d'utiliser des fichiers gpx qui serait plus aisée dans la mise en œuvre, car je dois traiter plusieurs centaines de waypoints avec ces liens.

Je vous remercie de votre aide

Bernard