Popup in OpenLayers interaktiv verschieben

Hallo Leute !!

Ich habe ein Standartpopup für meine Kartenmarker erstellt. Funktioniert wunderbar!

Ich möchte aber die einzelnen Popup’s interaktiv in der Karte für eine Druckversion “anfassen” und verschieben können. Der Basispunkt des Popup’s
soll selbstverständlich erhalten bleiben.

Ist ein derart flexibles Popup überhaupt mit JS möglich ?

Für Tip’s bin ich sehr dankbar! :slight_smile:

Gruss Stefan

Nahmd,

Die OL-Popups werden aus folgender Graphik zusammengeschnipselt: http://openlayers.org/api/img/cloud-popup-relative.png (heruntergeladen und in Bildverarbeitung geöffnet sieht man die Transparenz besser).

Die “Anschlusszipfel” haben fixe Höhe, mit diesen Komponenten lässt sich das Popup also allenfalls nach links und rechts verschieben, aber nicht nach oben oder unten.

Um dynamisch interaktiv das Popup zu verschieben, den Zipfel aber an Position zu lassen, änderst Du das “left”-Style-Attribut von zwei

s. Das ist einfach. Die eigentliche Arbeit ist ein brauchbares User-Interface.

Gruß Wolf

Edit: Beispielcode ergänzt
Edit²: gewünscht wurde statisches Verschieben von Tooltips, diese Lösung ist also keine.
Edit³: kann mal bitte jemand den ☈:frowning:@*:skull_and_crossbones:★ Forenserver fixen?

Hallo Netzwolf!!

Habe Dir eine E-Mail geschrieben.

Gruß

Stefan

Danke Netzwolf!

Die Funktionalität reicht leider für meine Anwendung nicht aus. Ich brauche frei positionierbare Popup’s. Geht eventuell was mit Python ? Ich habe noch keine Ahnung. Grande Problemo!
Sollte ich eine Lösung finden gebe ich Rückmeldung!

So, jetzt wird erst einmal ein kleines Nickerchen gemacht.

Gruß

Stefan

Popups sind bei OL immer mit dem Objekt verknüft, auf das sich der Popup bezieht. Daher auch der Anker. Was du wohl meinst, sind “Fensterchen”, die nicht physikalisch/optisch mit dem Objekt verbunden sind.

Nimm Jquery UI, da sind solche Sachen drin. Natürlich innerhalb der OL-Anwendung.

Gruss
walter

siehe: https://osm.wno-edv-service.de/boundaries/ und da einfach was suchen.

Hier der Kern:


<script type="text/javascript" src="js/jquery/jquery-1.10.4.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.10.4.custom.js"></script>

...

      $( "#search_popup" ).dialog({
         autoOpen: false,
         closeText: "Close",
         title: "Select boundary",
         height: 300,
         width: 550
      });

...

 <div id="search_popup"></div>
...

Hallo Walter

Guter Tip. Muss mal sehen, was ich so zurechtfummeln kann. Melde mich bei Vollzug. Ich muss aber irgendwie das Infofenster innerhalb einer for Schleife in ein div packen und mit Arrayeintraegen füttern. Zudem muss automatisch eine ID für das div erzeugt werden um das Infofenster ansprechen zu koennen.

Jquery ui stellt anscheinend eine function zur Verfuegung, die das div Draggable macht. Muss mir das aber erst nochmal genauer ansehen.

Schönes WE

Stefan

Ja, mit Daten füllen mußt du das natürlich:


                  var content = "";
                  content += "<div style='font-size:.7em;'>\n";

                  content += "<table width='500' border='1' cellspacing='1' cellpadding='2'>\n";
                  content += "<th width='10px'></th><th>Name</th><th>AL</th><th>is_in (generated)</th><th>id</th>\n";

                  for (i=0;i<json.length;i++) {
                     var f = json[i];
                     var id = f.id;
                     var country = f.country;
                     var name = f.name; 
                     var is_in = f.is_in;  
                     var level = f.level;
                     var path = f.path;   
                     content += "<tr>\n";
                     content += "<td>\n";
                     content += "<input type='radio' name='jumpTo' value='"+path+"'";
                     if (i == 0) content += " checked='checked'";
                     content += "></input>\n";
                     content += "</td>\n"; 
                     content += "<td>"+name+"</td>\n";
                     content += "<td align='center'>"+level+"</td>\n";
                     content += "<td>"+is_in+"</td>\n";
                     content += "<td align='right'>"+id+"</td>\n";
                     content += "</tr>"; 
                  }
                  content += "</table>\n";
                  content +=       "<input id='goto' type='button' value='Goto'";
                  content +=       " onclick='jumpTo();'";
                  content += "</div>";

                  console.log(content);

                  document.getElementById("search_popup").innerHTML = content;                 // fill with data
                  $("#search_popup").dialog("option", "title", "Select boundary: " + search ); // set title
                  $("#search_popup").dialog("open");                                           // open popup

in meinem Beispiel hat das doch die Id search_popup, die dann von Jquery mit #search_popup angesprochen wird. Kannst du doch so übernehmen.

Nö, ging bei mir so.

Gruss
walter

Hallo Walter !

Schau mal unter http://jorix.github.com/OL-FeaturePopups/examples-geoext/popup-auto-position-FP.html. :smiley:

Evt. bringt mich das der Lösung näher.

Gruss Stefan