Discussion :

[martink]

J'ai une carte où je veux placer des marqueurs autour d'un marqueur central, chaque marqueur ayant un popup qui apparaît lorsqu'on clique sur le marqueur. Autour du marqueur central, il y a aussi une boîte bleue (un "Feature").
Or, je suis tombé sur le problème suivant: si je ne dessine pas la boîte bleue, ça marche impec', les marqueurs sont bien placés et quand je clique sur un marqueur le popup apparaît comme il faut.
Par contre, si je dessine la boîte (peu importe si c'est après le placement des marqueurs, ou avant, tout marche sauf que les popup ne "popuppent" plus...
Voici mon code: tout d'abord, la partie qui initialise la carte

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
               OpenLayers.Lang.setCode('fr');
                geoportalLoadviewer("map_canvas","normal");
                if(viewer){
                    viewer.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS:WMSC');                              // Photos aériennes
                    viewer.addGeoportalLayer('TRANSPORTNETWORKS.ROADS:WMSC', {visibility: true});           // Plans des routes
                    viewer.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC', {visibility: false});     // Cartes IGN
                }
                // Set map at center
                // Note, we are not using longitude/latitude but metres for the map projection
                lonlat= new OpenLayers.LonLat(lng, lat);
                viewer.getMap().setCenter(lonlat,16,false,false);

                // Make the tools folded
                // onglet "couches" affiché (true=oui  false=non)
                viewer.setLayersPanelVisibility(true);
                // onglet "couches" développé (true=oui  false=non)
                viewer.openLayersPanel(false);
                // onglet "outils" affiché (true=oui  false=non)
                viewer.setToolsPanelVisibility(true);
                // onglet "outils" développé (true=oui  false=non)
                viewer.openToolsPanel(false);
                // Add marker at center
                markers = new OpenLayers.Layer.Markers("Marqueurs");
                markers.displayInLayerSwitcher=false;
                viewer.getMap().addLayer(markers);
                prepMarkers(); // Fonction pour créer les marqueurs à placer sur la carte
                var popupClass = OpenLayers.Popup.FramedCloud;
                var popupContentHTML = '<p>My test marker</p>';
                addMarker(lonlat, popupClass, popupContentHTML, true, 0);
                // Draw random markers
                for (var i = 1; i < 6; i++) {
                    randomMarkers[i] = addRandomMarker(lonlat, rad, i);
                }
                drawSquare(rad);

Il y a trois fonctions ici: "addRandomMarker" rajoute les marqueurs autour du marqueur central, et elle appelle pour ce faire "addMarker". Ensuite, "drawSquare" dessine la boîte autour du marqueur central.
"addRandomMarker"

Code :

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

1
2
3
4
5
6
7
8
9
            function addRandomMarker(lonlat, radius, i) {
                var random_lonlat = lonlat.clone();
                random_lonlat.lon = random_lonlat.lon + ((Math.random() - 0.5) * radius);
                random_lonlat.lat = random_lonlat.lat + ((Math.random() - 0.5) * radius);
                var popupClass = OpenLayers.Popup.FramedCloud;
                var popupContentHTML = '<p>My test marker</p>';
                var newMarker = addMarker(random_lonlat,popupClass,popupContentHTML,true, i);
                return newMarker;
            }

"addMarker"

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
function addMarker(ll, popupClass, popupContentHTML, closeBox, ix, overflow) {
    // Taken straight from the examples...
    var feature = new OpenLayers.Feature(markers, ll);
    feature.closeBox = closeBox;
    feature.popupClass = popupClass;
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = (overflow) ? "auto" : "hidden";
    feature.data.icon = icons[ix];

    var marker = feature.createMarker();

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            this.popup.panMapIfOutOfView = true; 
            viewer.getMap().addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("click", feature, markerClick);

    markers.addMarker(marker);
    return marker;
}

et enfin, "drawSquare"

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
function drawSquare(radius) {
    // Note that the "centerpoint" is already in the map projection, so no conversion

    /* Drawing square */
    if (square_is_overlaid) {
        viewer.getMap().removeLayer(cercleLayer);
    }

    // Draw the box (don't worry about it being called a circle, I cribbed the code
    // for a circle and you just need to change the number of sides to "4" when creating the polygon
    cercleLayer = new OpenLayers.Layer.Vector('cercle');
    cercleLayer.displayInLayerSwitcher=false;
    viewer.getMap().addLayer(cercleLayer);
    var mapCenter = lonlat.clone();
    var cercleOrigine = new OpenLayers.Geometry.Point(mapCenter.lon, mapCenter.lat);
    var styleCercle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    styleCercle.strokeColor = "blue";
    styleCercle.fillColor = "blue";
    styleCercle.fillOpacity = "0.2";
    var cercleFeature = new OpenLayers.Feature.Vector(
        OpenLayers.Geometry.Polygon.createRegularPolygon( cercleOrigine, radius, 4, 0 ),
        null,
        styleCercle
        );
    cercleLayer.addFeatures( [cercleFeature] );
    if (radius == 100) viewer.getMap().zoomTo(17);
    if (radius == 200) viewer.getMap().zoomTo(16);
    if (radius == 500) viewer.getMap().zoomTo(15);
    if (radius == 1000) viewer.getMap().zoomTo(13);
    if (radius == 2000) viewer.getMap().zoomTo(11);
    if (radius == 5000) viewer.getMap().zoomTo(10.5);
    if (radius == 10000) viewer.getMap().zoomTo(9.5);
    if (radius == 20000) viewer.getMap().zoomTo(9);
    if (radius == 30000) viewer.getMap().zoomTo(8.5);
    viewer.getMap().panTo(lonlat);
    square_is_overlaid = true;

    $("#rad").attr("value", radius);
    $("#rad_mx").attr("value", radius);
}

Je serais très reconnaissant si quelqu'un pourrait me donner un coup de main, j'ai passé des heures dessus et je suis