OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

#1 2014-11-25 02:58:26

Bany47
Member
Registered: 2014-11-04
Posts: 28

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! smile

Gruss Stefan

Offline

#2 2014-11-25 03:36:11

Netzwolf
Member
Registered: 2008-04-01
Posts: 1,665

Re: Popup in OpenLayers interaktiv verschieben

Nahmd,

Bany47 wrote:

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.

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.

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

Um dynamisch interaktiv das Popup zu verschieben, den Zipfel aber an Position zu lassen, änderst Du das "left"-Style-Attribut von zwei <div>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 ☈☹@*☠★ Forenserver fixen?

Last edited by Netzwolf (2014-11-27 14:17:48)

Offline

#3 2014-11-27 00:32:12

Bany47
Member
Registered: 2014-11-04
Posts: 28

Re: Popup in OpenLayers interaktiv verschieben

Hallo Netzwolf!!

Habe Dir eine E-Mail geschrieben.

Gruß

Stefan

Offline

#4 2014-11-28 03:36:16

Bany47
Member
Registered: 2014-11-04
Posts: 28

Re: Popup in OpenLayers interaktiv verschieben

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

Offline

#5 2014-11-28 11:08:30

wambacher
Member
From: Schlangenbad/Wambach, Germany
Registered: 2009-12-16
Posts: 16,314
Website

Re: Popup in OpenLayers interaktiv verschieben

Bany47 wrote:

Danke Netzwolf!

Die Funktionalität reicht leider für meine Anwendung nicht aus. Ich brauche frei positionierbare Popup's.

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>
...

Last edited by wambacher (2014-11-28 11:14:25)

Offline

#6 2014-11-29 22:43:31

Bany47
Member
Registered: 2014-11-04
Posts: 28

Re: Popup in OpenLayers interaktiv verschieben

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

Offline

#7 2014-11-30 10:38:18

wambacher
Member
From: Schlangenbad/Wambach, Germany
Registered: 2009-12-16
Posts: 16,314
Website

Re: Popup in OpenLayers interaktiv verschieben

Bany47 wrote:

Ich muss aber irgendwie das Infofenster innerhalb einer for Schleife in ein div packen und mit Arrayeintraegen füttern.

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
Bany47 wrote:

Zudem muss automatisch eine ID für das div erzeugt werden um das Infofenster ansprechen zu koennen.

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

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

Nö, ging bei mir so.

Gruss
walter

Offline

#8 2014-12-04 02:05:04

Bany47
Member
Registered: 2014-11-04
Posts: 28

Re: Popup in OpenLayers interaktiv verschieben

Hallo Walter !

Schau mal unter  http://jorix.github.com/OL-FeaturePopup … on-FP.html. big_smile

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

Gruss Stefan

Offline

Board footer

Powered by FluxBB