banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#1 Sun 03 August 2008 13:09

marjal_
Participant occasionnel
Date d'inscription: 26 Jul 2008
Messages: 14

OpenLayers creer popup pour chaque marker

Bonjour,
voilà un certain temps que j'essaie de créer un popup pour chaque marker que je crée...
Pour cela, j'essaie de généraliser mon code qui ne s'appliquait qu'à deux marqueurs et marchait bien.
En fait, je passe par des tableaux pour créer chaque marqueur, feature et popup.

Le problème est que je clique plusieurs fois sur Marker(i) le popup s'affiche mais au lieu de se fermer lorsque je clique une deuxième fois, il s'agrandit. Je ne peux le fermer que par la closeBox. Il ne veut alors plus s'afficher au clic suivant...

De plus, lorsque je généralise le tout dans une boucle for, le clic sur l'élément n'ouvre plus de popup... Je pense que cela vient du problème de l'appel de la fonction et la transmission de i, indice précisant de quel feature il s'agit...

Pourriez-vous m'aider???
Ou bien me donner des références de code qui permettent d'associer un popup à chaque marker...
Je vous remercie d'avance!!

Voici mon code : N'hésitez pas à me poser des questions si je n'ai pas été assez claire...

<script src="../OpenLayers-2.6/lib/OpenLayers.js"></script>
    <script defer="defer" type="text/javascript">

        var map, layer, popup1, popup2;
        var markers, markers2, feature, marker;
        var i;

        function init(){
            map = new OpenLayers.Map('carte');
            layer = new OpenLayers.Layer.WMS("OpenLayers WMS","photo_globale.gif",{layers: 'basic'},{singleTile: true});
            map.addLayer(layer);

            var panel = new OpenLayers.Control.NavToolbar();
                        map.addControl(panel);

            //ajout du controle de la position de la souris
            map.addControl(new OpenLayers.Control.MousePosition());

            //insertion du panneau d'info sur les couches (+)//centrage de la carte
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            //centrage de la carte
                       map.zoomToMaxExtent();

                        markers = new OpenLayers.Layer.Markers("Topo");
                        map.addLayer(markers);
   

            //déclaration de la couche bloc
            markers2 = new OpenLayers.Layer.Markers("Bloc");
                        map.addLayer(markers2);

            //dÈclaration de la latitude et la longitude des points
            var Coord_Est = 70;
            var Coord_Nord = 80;

                        feature1 = new OpenLayers.Feature(layer, new OpenLayers.LonLat(Coord_Est,Coord_Nord));
                marker1 = feature1.createMarker();

            markers.addMarker(marker1);
            marker1.events.register("mousedown", marker1, mousedown1);

            i=2;
            Coord_Est = new Array() ;
            Coord_Est[i]=71;
            Coord_Nord = new Array() ;
            Coord_Nord[i]= 80;

            Feature = new Array() ;
                        Feature[i] = new OpenLayers.Feature(layer, new OpenLayers.LonLat(Coord_Est[i],Coord_Nord[i]));

            Marker = new Array() ;
                        Marker[i] = Feature[i].createMarker();
         
                        markers.addMarker(Marker[i]);
            Marker[i].events.register("mousedown", Marker[i], function(evt){mousedown(i)});

        }

function mousedown1(evt) {
          if (popup1 == null) {
                popup1 = feature1.createPopup(true);
                popup1.setContentHTML("<a  STYLE='cursor:pointer' onclick='marque_point()' target='_blank'>Pas d'infos</a>");
                popup1.setBackgroundColor("white");
                popup1.setOpacity(0.7);
                markers.map.addPopup(popup1);
           } else {
                popup1.toggle();
           }
       OpenLayers.Event.stop(evt);
}   

function mousedown(i) {
    Popup = new Array() ;
            if (Popup[i] == null) {
                Popup[i] = Feature[i].createPopup(true);
                Popup[i].setContentHTML("<a  STYLE='cursor:pointer' onclick='marque_point()' target='_blank'>Plus d'infos</a>");
                Popup[i].setBackgroundColor("white");
                Popup[i].setOpacity(0.7);
                markers.map.addPopup(Popup[i]);
            } else {
                Popup[i].toggle();
               }
            OpenLayers.Event.stop(evt);
}   
    </script>


Fichier(s) joint(s) :
Pour accéder aux fichiers vous devez vous inscrire.

Hors ligne

 

#2 Sun 03 August 2008 13:46

marjal_
Participant occasionnel
Date d'inscription: 26 Jul 2008
Messages: 14

Re: OpenLayers creer popup pour chaque marker

Pour ce qui est de l'agrandissement des popups, je viens de résoudre le problème en remplaceant les Popup(i) par une seule variable Popup..

Reste à rélger le problème de la fonction lors du clic sur le marqueur, le problème vient du Feature(i)... Le i n'a pas de valeur a ce niveau là...
J'ai essayé Feature("i") mais en vain...

Merci de m'aider! smile

Hors ligne

 

#3 Sun 03 August 2008 20:10

René-Luc D'Hont
Participant assidu
Date d'inscription: 7 Nov 2006
Messages: 328
Site web

Re: OpenLayers creer popup pour chaque marker

ton objet javascript i est ton objet feature, c'est à dire que tu peux faire :

Code:

i.createPopup(true);

Enfin "i" signifie un objet Javascript String de valeur i.

Hors ligne

 

#4 Mon 04 August 2008 07:17

marjal_
Participant occasionnel
Date d'inscription: 26 Jul 2008
Messages: 14

Re: OpenLayers creer popup pour chaque marker

J'ai essayé mais ca ne marche pas..

En fait le problème est que lors de l'appel de la fonction create popup, i est une constante qui a la valeur de la dernière incrémentation de la boucle for...
Il faudrait donc que je force ce i a prendre qu'il a dans la variable Marker[i] surlequel je fait mon clic...

Hors ligne

 

#5 Mon 04 August 2008 07:58

marjal_
Participant occasionnel
Date d'inscription: 26 Jul 2008
Messages: 14

Re: OpenLayers creer popup pour chaque marker

J'ai oublié de mettre mon code mis à jour... Désolé

En fait, dans ma fonction, si je remplace i par 2, a chaque clic sur un élément, le popup s'ouvre à LonLat(2) ce qui est normal. Quand je généralise à i, plus rien ne se passe car LonLat (5) n'a pas de valeur dans mon exemple.

Mais j'aimerais que le i n,'est pas la dernière valeur de la boucle for mais celle de la ligne du Marker sur lequel je clique.

J'ai essayé de stocké la variable avec un getRowCount(thi.Marker[i]) mais en vain...
Avez vous d'autres idées??

Merci!!

Coord_Est = new Array() ;
Coord_Nord = new Array();
Point = new Array();
Marker = new Array() ;
Feature = new Array();
           
for (i=1;i<5;i++){
        Coord_Est[i]=document.getElementById("coordx"+i).value;
        Coord_Nord[i]=document.getElementById("coordy"+i).value;
        Point[i]=document.getElementById("point"+i);
        var size = new OpenLayers.Size(15,15);
        var calculateOffset = function(size) {
            return new OpenLayers.Pixel(-(size.w/2), -size.h);
            };
        var icon = new OpenLayers.Icon('icones/marker.png',size, null, calculateOffset);
                   
        Marker[i] = new OpenLayers.Marker(new OpenLayers.LonLat(Coord_Est[i],Coord_Nord[i]), icon);
        markers.addMarker(Marker[i]);
        Marker[i].events.register("mousedown",Marker[i], function(evt){       
            if (popup == null) {
                Feature[i] = new OpenLayers.Feature(layer, new OpenLayers.LonLat(Coord_Est[i],Coord_Nord[i]));
                popup = Feature[i].createPopup(true);
                popup.setContentHTML("<p>Point[]</p><a  STYLE='cursor:pointer' onclick='marque_point()' target='_blank'>Plus d'infos</a><br>");
                popup.setBackgroundColor("white");
                popup.setOpacity(0.7);
                markers.map.addPopup(popup);
            } else {
                popup.toggle();
            }
            OpenLayers.Event.stop(evt);
        });
    }
}

Hors ligne

 

#6 Mon 04 August 2008 12:16

René-Luc D'Hont
Participant assidu
Date d'inscription: 7 Nov 2006
Messages: 328
Site web

Re: OpenLayers creer popup pour chaque marker

oui, remplace ça :

Code:

Feature[i] = new OpenLayers.Feature(layer, new OpenLayers.LonLat(Coord_Est[i],Coord_Nord[i]));
popup = Feature[i].createPopup(true);

par :

Code:

 var feature = new OpenLayers.Feature(null, new OpenLayers.LonLat(this.lonlat.lon,this.lonlat.lat));
popup = feature.createPopup(true);

Bien sûr j'ai supposé que l'objet layer n'existait pas.

Hors ligne

 

#7 Sun 10 August 2008 14:05

superfc
Juste Inscrit !
Date d'inscription: 9 Aug 2008
Messages: 5

Re: OpenLayers creer popup pour chaque marker

Bonjour,
    J'ai moi aussi un problème avec les popups et c'est au niveau des évènements que ça se produits. Je n'arrive pas à inscrire mon évènement mousedown sur le marker.
Ce code

Code:

p_point.marker.events.register("mousedown", feature, markerClick);

ne semble rien faire du tout. Qu'est-ce que je dois faire pour que ça fonctionne ?

    Voila, je ne suis pas un expert en JavaScript mais je commence à pas mal maîtriser, et là je suis totalement bloqué :

Code:

    p_point.marker = new OpenLayers.Marker( p_point.position, p_point.icone );
                   var popupContentHTML = '<img src="http://i.mivi.fr/472d94eb7a5861f72a9df6e1b7a07fe8a4fc9672.jpg" />';
                    
            var popupClass = OpenLayers.Class(
                OpenLayers.Popup.FramedCloud, {
                        'autoSize': true
                    }
            );
            
            var feature = new OpenLayers.Feature( this.markersLayer, p_point.position.clone() );
                    feature.data.popupContentHTML = popupContentHTML;
                    feature.data.overflow = "auto";
                    feature.marker = p_point.marker; 
                    feature.popupClass = popupClass;
            
            var markerClick = function (evt) {
                alert("markerClick"); // CA N'EST JAMAIS EXECUTE
                        if (this.popup == null) {
                                this.popup = this.createPopup(true);
                                lacarte.map.addPopup(this.popup);
                                this.popup.show();
                        } else {
                                this.popup.toggle();
                        }
                        currentPopup = this.popup;
                        OpenLayers.Event.stop(evt);
                    };
                    this.markersLayer.addMarker( p_point.marker );
                    p_point.marker.events.register("mousedown", feature, markerClick);

Précision : Je suis en OpenLayers 2.6

Merci de votre aide

--
Florent Clairambault

Dernière modification par superfc (Mon 11 August 2008 01:51)

Hors ligne

 

#8 Mon 11 August 2008 01:53

superfc
Juste Inscrit !
Date d'inscription: 9 Aug 2008
Messages: 5

Re: OpenLayers creer popup pour chaque marker

J'ai en fait résolu mon problème en simplifiant le code de l'exemple "popupMatrix" et en l'ajoutant dans mon code. Je suis arrivé exactement au même code et chez moi ça ne fonctionnait pas.

En fait, c'est une histoire d'ordre de couches. Je les ai changé d'ordre et là ça fonctionne...

Code:

        var osmLayer = new OpenLayers.Layer.WMS( 
            "OSM", 
            [
                "http://dev-cache-tuiles.mabalise.com/?"     
//                "http://t1.hypercube.telascience.org/tiles?",
//                           "http://t2.hypercube.telascience.org/tiles?",
//                           "http://t3.hypercube.telascience.org/tiles?",
//                           "http://t4.hypercube.telascience.org/tiles?"
                    ], {
                layers: 'osm-4326', 
                format: 'image/png' 
            } 
        );
        this.map.addLayer( osmLayer );
        
         this.vectorsLayer = new OpenLayers.Layer.Vector("Lignes");
        this.map.addLayer(this.vectorsLayer);    
        
        this.markersLayer = new OpenLayers.Layer.Markers( "Points" );
        this.map.addLayer(this.markersLayer);

Mais je n'ai toujours pas résolu mon problème avec VirtualEarth.

Hors ligne

 

Pied de page des forums

Powered by FluxBB