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
Mon fichier xml à cette forme
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 = "";
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>
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>
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:
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.
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 vous remercie de votre aide
Bernard
Partager