Recherche syntaxe pour balises xml : description <desc> avec liens hypertextes dans popup

Version imprimable

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:

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:

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:

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

1 pièce(s) jointe(s)

Bonjour,

Je pense que l'affichage de cette popup n'est pas géré où je le pensais mais à ce niveau dans le fichier : http://www.untourenvelo.ch/Carte_Plein_Ecran.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function onFeatureSelect(event) {
            var feature = event.feature;
            // Since KML is user-generated, do naive protection against Javascript
            //var content = "<h4>"+feature.attributes.name + "</h4>" + feature.attributes.description;
            var content = feature.attributes.name;
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
            }
            popup = new OpenLayers.Popup.FramedCloud("MyPopUp", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                     content,
                                     null, 
                                     true, 
                                     onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }

J'ai modifié la ligne : var content = feature.attributes.name + feature.attributes.description;

Ainsi que le fichier gpx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?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="30.765091" lon="-5.712607">
<name><![CDATA[GR-Abdi n'Ilemchane]]></name>
<sym>gravure-1</sym>
<desc>site</desc>
 <link href="lien html">
 <text> "Lien site" </text>
 <type>lien</type>
 </link>
</wpt>
</gpx>

En ce moment quand je clique sur ce waypoint j'ai cette fenêtre popup

Pièce jointe 579785

Il semble y avoir du mieux mais je ne suis pas encore arrivé au but recherché...

Bernard

21/09/2020, 17h51
NoSmoking

Bonjour,
~~j'ai l'impression que c'est cette ligne label: "${name}" qui prend en compte ce qui doit s'afficher, ligne #13 du premier code que tu as inséré.~~

[Edit]
Effectivement !! mais si l'on regarde

Code:

var content = "<h4>"+feature.attributes.name + "</h4>" + feature.attributes.description;

il n'existe pas de champ description mais desc et autres dans ton fichier.
21/09/2020, 22h30
Manard82

Bonjour NoSmooking,

Je te remercie, j'avais vu ta première réponse et découvre ta deuxième.

Comme tu l'écris il n'y a que des balises <desc> </desc>, j'ai essayé de remplacer dans le fichier xml cette balise par <description> </description>, je n'ai plus l'erreur "undefined" par contre je n'arrive pas trouver la syntaxe à introduire pour que ce soit reconnu comme un lien.

Dans mes fichiers html qui fonctionnent également sous openlayers.js version 2.13 la syntaxe est celle indiquée ci-dessous que j'ai mise en bas du premier post

Code:

{description:"MP-Tifariti<br><a style='background-color: #ffcc99;' href='lien html' target='_blank;'>Lien vers le site</a>"},

J'ai essayé plusieurs combinaisons dans le fichier xml entre les balises <description>, mais pour le moment j'ai en affichage soit du texte, soit mes waypoints n'apparaissent plus la carte, mais plus cette erreur "undefined"

Un petit pas de plus vers la solution, enfin j'espère... Je ne me décourage pas comme ça

Bonne soirée et merci de t'être penché sur ma recherche

Bernard
22/09/2020, 19h51
NoSmoking

Tu devrais écrire dans ton XML en passant par une section CDATA

Code:

<desc><![CDATA[<a href="http://lien url vers le site web"" target="_blank">Lien vers le site</a>]]></desc>
22/09/2020, 20h28
Manard82

Bonsoir NoSmooking,

Je te remercie de ta réponse, je viens d'essayer la syntaxe proposée dans le fichier xml, j'ai dans la fenêtre popup en plus du nom du waypoint : "Undefined"

Pour le moment toutes les syntaxes que j'ai essayées ont échoué...

Pourtant cette API peut gérer l'affichage de liens dans les fenêtres popup, car en html ça fonctionne. C'est probablement l'interprétation en javascript qui doit poser problème

Bonne soirée

Bernard

Bonsoir NoSmooking,

Ça y est ça fonctionne :)

En poursuivant mes recherches j'ai trouvé des lignes de codes différentes pour gérer la fenêtre popup

Code:

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
function onFeatureSelect(event) {
    var feature = event.feature;
    var layerName = event.feature.layer.name;
    var content = "unInitialized";
    // alert ('selected this feature='+feature.id+ '<br/>Atributos: '+feature.attributes.description);
    if ( (feature.attributes.name > '') || (feature.attributes.description > '') ) {
        content = feature.attributes.name + '<br/>'+feature.attributes.description;
    } else {
        if (feature.cluster) {
            content = feature.attributes.count + ' ' + layerName ;
            for (var i = 0; i < feature.attributes.count; i++) {
                    var feat = feature.cluster[i];
                    content += '<br/>'+feat.attributes.name;
            }
        } else {
            content = 'NOT a cluster either';
        }
    }
 
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
                             feature.geometry.getBounds().getCenterLonLat(),
                             new OpenLayers.Size(100,100),
                             content,
                             null, true, onFeatureUnselect);
    popup.setBackgroundColor('white');
    feature.popup = popup;
    map.addPopup(popup);
	    // GLOBAL variable, in case popup is destroyed by clicking CLOSE box
    lastfeature = feature;
    // alert ('select'+lastfeature.name);
}

Puis en utilisant la syntaxe que tu m'as proposée en mettant les balises <description> à la place de <desc> maintenant j'ai bien le lien hypertexte dans la fenêtre, ouf... comme quoi il ne faut pas perdre espoir d'aboutir

La difficulté est de rechercher la solution en modifiant le fichier en javascript et la syntaxe du lien dans le fichier xml, ça fait énormément de combinaisons à essayer

Encore merci et bonne soirée

Bernard