Wie popup für waypoints?

janmartin3 · 2009-08-02T16:59:40.000Z

Hallo,
**
nachfolgende Seite zeigt Waypoints aus einer .gpx Datei an.**

Besondere Features:

auto-zoom
auto-center
**
Was muss ich ändern um beim Anklicken der Waypoints ein popup zu kriegen?**
Das Popup soll name und desc anzeigen.

Danke,
Jan

Die Waypoints sehen so aus:

170.555686
2009-08-01T17:29:29Z
00000001
00000001
00000001

<html>
    <head>
    <title>I want popups!</title>

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

        <script type="text/javascript">
            var map;
            function init() {
                map = new OpenLayers.Map ("map", {
                    controls:[
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher(),
                        new OpenLayers.Control.Attribution()],
                    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                    maxResolution: 156543.0399,
                    numZoomLevels: 19,
                    units: 'm',
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326")
                } );

                layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
                map.addLayer(layerMapnik);
                layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
                map.addLayer(layerTilesAtHome);
                layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
                map.addLayer(layerCycleMap);

    var dataExtent;
    var setExtent = function() {
       if(dataExtent) {
           dataExtent.extend(this.getDataExtent());
       } else {
           dataExtent = this.getDataExtent();
       }
       map.zoomToExtent(dataExtent);
    };
                    lgpx = new OpenLayers.Layer.GML (
                               "wpt.gpx (red)",
                               "wpt.gpx",
                               {                                               
                        projection: new  OpenLayers.Projection("EPSG:4326"),
    //                    style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.8},
                        format: OpenLayers.Format.GPX,
                               }
                        );
                    lgpx.events.register("loadend", lgpx, setExtent);    
                    map.addLayer(lgpx);
    
            map.setCenter(null, null);
            };
    </script>
    </head>

    <body onload="init();">
    <div style="width:90%; height:90%" id="map"></div>

    </body>
    </html>

MHohmann · 2009-12-24T14:22:51.000Z

Momentan habe ich ein ganz ähnliches Problem:

http://manuelhohmann.dyndns.org/orpheus/G8Map.html

Das ist meine Karte mit den beiden GPX-Layern. Nun würde ich gerne Popups (öffnen sich beim Anklicken) oder Tooltips (öffnen sich beim Darüberfahren) hinzufügen, die Informationen aus der GPX-Datei enthalten, z.B. name, cmt oder desc. Das ganze sollte in etwa so aussehen:

http://aardbodem.nl/?q=node/37/

Leider konnte ich diese Lösung noch nicht rekonstruieren, da ein ziemlicher Wust von JavaScript-Dateien / -Bibliotheken eingebunden wird und ich noch nicht erkennen konnte, welcher Code nun diese Popups erzeugt.

Auf OpenLayers heißt es weiterhin, dass OpenLayers.Layer.GML deprecated ist, d.h. nicht mehr benutzt werden sollte. Stattdessen wird auf OpenLayers.Layer.Vector verwiesen. Allerdings konnte ich noch keine Information darüber finden, wie man damit eine GPX-Datei einbindet.

MHohmann · 2009-12-25T13:39:32.000Z

Inzwischen habe ich es hinbekommen, und zwar tatsächlich mit OpenLayers.Layer.Vector. Hier ist das Ergebnis:

http://manuelhohmann.dyndns.org/orpheus/G8Map.html

Der Code basiert auf dieser Demo, in der die wesentlichen Schritte zu sehen sind:

http://edgemaster.dev.openstreetmap.org/oldemo/9.htm
http://www.soc.org.uk/southampton09/presentations/OpenLayers.pdf