Discussion :

[jac83]

bonjour,
j'utilise l'api ign avec openlayers pour l'affichage de mes cartes et cela fonctionne très bien. Dernièrement j'ai rajouté en plus de l'affichage d'un fichier gpx un marker ... qui s'affiche aussi sans problème. Là ou je bute c'est sur la possibilité d'ouvrir une popup en cliquant sur le marker.
le code d'intégration de mon marker qui fonctionne:

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
var couche_markers = new OpenLayers.Layer.Markers("départ sortie");

var dimension_icon = new OpenLayers.Size(32,32);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('http://vttplus.net/numeric/blueD.png', dimension_icon, offset_icon);


lonlat=new OpenLayers.LonLat(<?php echo "".$row['departlong']."" ?>,<?php echo "".$row['departlat']."" ?>).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        );

var mon_marker=new OpenLayers.Marker(lonlat, icon);

couche_markers.addMarker(mon_marker);

olmap.addLayer(couche_markers);

et un de mes essais de popup que j'intègre juste après le marker ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
couche_markers.events.register("click", mon_marker, function(e){ // on click popup
    var popup = new OpenLayers.Popup.FramedCloud(id,
                mon_marker.lonlat,
                new OpenLayers.Size(200,200),
                '<div class="popup">info example</div>',
                null,true);
    olmap.addPopup(popup);
});
var labelepopup = new OpenLayers.Popup(null,
    EPSG,
    new OpenLayers.Size(37,13),
    '<p style="font-size: 8.5px;">blabla</p>'
);
olmap.addPopup(labelepopup);

... bien sur pas de popup qui s'affiche d'où ma question: où se situent les erreurs ??? (je précise que je ne suis pas du tout développeur, je me contente d'assembler des bouts de code pris à droite à gauche sur le net)
merci par avance
jacques

[betechsud]

moi pour afficher le popup je fais comme ci-dessous (j'ai essayé d'adapter le code) :

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
function createPopup(feature)
{
   feature.popup = new OpenLayers.Popup.FramedCloud(
      id,
      feature.geometry.getBounds().getCenterLonLat(),
      new OpenLayers.Size(200,200),
      '<div class="popup">info example</div>',
      null,
      true,
      function() {selControl.unselectAll();}
   );
   olmap.addPopup(feature.popup, true);
}

function destroyPopup(feature)
{
   feature.popup.destroy();
}

selControl = new OpenLayers.Control.SelectFeature(
   [couche_markers],
   {
      clickout: true,
      toggle: false,
      multiple: false,
      hover: false,
      onSelect: createPopup,
      onUnselect: destroyPopup
   }
);

olmap.addControl(selControl);
selControl.activate();

[jac83]

bonjour betechsud
merci pour ta proposition de code pour popup ... que j'ai essayée de suite mais ça ne marche pas .
si ça peut aider, une page où l'on peut voir la carte, la trace gpx et le marker (sans popup ) c'est ici
merci
cordialement jacques

[betechsud]

et en remplaçant :

Code :

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

var couche_markers = new OpenLayers.Layer.Markers("depart sortie");

par :

Code :

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

var couche_markers = new OpenLayers.Layer.Vector("depart sortie");

ça marche mieux ?

[jac83]

re
non ça ne marche pas mieux ... même moins bien car le marker disparait ce qui me semble normal . J'essaie aussi d'autres pistes de mon côté
cordialement

[betechsud]

oups.

il faudrait aussi modifier :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var dimension_icon = new OpenLayers.Size(32,32);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('http://vttplus.net/numeric/blueD.png', dimension_icon, offset_icon);


lonlat=new OpenLayers.LonLat(5.96683614,43.28088080).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        );

var mon_marker=new OpenLayers.Marker(lonlat, icon);

couche_markers.addMarker(mon_marker);

en :

var layerStyle = new OpenLayers.Style({
externalGraphic: "http://vttplus.net/numeric/blueD.png",
graphicWidth: 32,
graphicHeight: 32,
graphicXOffset: -16,
graphicYOffset: -32,
pointRadius: 16
});
var layerStyleMap = new OpenLayers.StyleMap({'default': layerStyle});
couche_markers.styleMap = layerStyleMap;
var features = [];
var mon_marker = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(5.96683614,43.28088080)
);
features.push(mon_marker);
couche_markers.addFeatures(features);

[jac83]

re ...
pour éviter de transformer tous mes fichiers j'ai créé une page d'exemple pour essayer ton nouveau code >> ici . Après avoir mis en place la transformation proposée, le marker semble avoir disparu, en fait il est situé en plein milieu de l’Afrique et si j’intervertis long et lat c'est pareil il reste en plein milieu de l’Afrique. Par contre il y a du mieux car le marker est cliquable ... l'infobulle n'apparait pas mais ça avance

[betechsud]

pour le 1er problème, je pense qu'il faut faire une conversion de projection :

Code :

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

1
2
3
4
5
6
7
var lonlat=new OpenLayers.LonLat(5.96683614,43.28088080).transform(
          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        );
var mon_marker = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat)
);

Pour le 2ème problème, la variable id n'est pas définie et peut être remplacée par la chaîne "depart" par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function createPopup(feature)
{
   feature.popup = new OpenLayers.Popup.FramedCloud(
      "depart",
      feature.geometry.getBounds().getCenterLonLat(),
      new OpenLayers.Size(200,200),
      '<div class="popup">info example</div>',
      null,
      true,
      function() {selControl.unselectAll();}
   );
   olmap.addPopup(feature.popup, true);
}

[jac83]

re ...
pour la conversion de projection j'aurai du y penser car elle était présente dans mon code de départ . Pour la variable id effectivement en la nommant "départ" ... CA MARCHE .
merci pour tout Julien.
cordialement jacques