Keine Bewegung mehr nach Popupbox auf Openstreetmapkarte

Communities Deutschland (Germany)
1

Hallo,

ich glaube, ich habe einen openstreetmap-bug entdeckt:

wenn ich auf meiner Karte auf einen Marker klicke, kommt ein Popupdialog mit diversen html-formatierungen und bildern hoch. Wenn das Popup ganz am Browserrand hochpoppt, verschiebt sich die Openstreetmapkarte darunter gleich mit, so daß das Popupfenster nicht über den Rand geht.

Mein Problem: Wenn sich die Karte aufgrund des Popups automatisch verschiebt, kann ich die Karte danach nicht mehr bewegen und kann auch nicht mehr zoomen. Das geht dann erst wieder, nachdem ich mit F5 neu geladen habe.

kennt jemand von Euch dieses Problem und hat ggf eine Löusung dafür?

Demonstration des Problems hier:

http://christopherstark.de/extern/karte8zg_test.htm

Viele Grüße Christopher

2

Das Problem kann ich bei mir auch reproduzieren, weiß aber nicht, woher es kommt.
Es scheint aber etwas anderes schon vorher nicht zu stimmen: beim langsamen Verschieben mit der Maus, z.B. nach Norden, und dann wieder zurück, verschiebt sich die Karte eher unkontrollierbar irgendwo hin.
Vielleicht ist im Javascript irgend ein Fehler.

3

ja, vielleicht liegt es daran, daß ich beim Editieren der utils.js-Dateien einen Fehler gemacht habe. Ich schaue mal nach

UPDATE:

Ich bin mir ziemlich sicher, daß das Problem in der html-Datei der Karte liegt. Keine Ahnung, wie das alles zusammenhängt.
Der Code geht so vielleicht erkennt ja jemand von Euch das Problem?

OpenStreetMap: Karte 
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="http://www.openstreetmap.de/ol28/OpenLayers.js"></script>
    <script type="text/javascript" src="http://www.openstreetmap.de/js/OpenStreetMap.js"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript" src="markers-final.js"></script>
    <script type="text/javascript">

var map;

var mlon, mlat;
var baselayer;

var layer_marker;
var layer_local;
var marker;

function init() {
OpenLayers.Lang.setCode(‘de’);
var lon = 11.33;
var lat = 51.37;
var zoom = 6;

parseParams(function(param, v) {
    switch (param) {
        case 'type': baselayer = v;           break;
        case 'lon':        lon = Number(v);   break;
        case 'lat':        lat = Number(v);   break;
        case 'zoom':      zoom = parseInt(v); break;
        case 'z':         zoom = parseInt(v); break;
        case 'mlon':      mlon = Number(v);   break;
        case 'mlat':      mlat = Number(v);   break;
    }
});

map = new OpenLayers.Map('map', {
    projection: projmerc,
    displayProjection: proj4326,
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.MousePosition({ div: jQuery('#customMousePosition')[0] }),
        new OpenLayers.Control.Permalink('permalink'),
        new OpenLayers.Control.OverviewMap(),
        new OpenLayers.Control.PanZoomBar()
    ],
    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
    numZoomLevels: 18,
    maxResolution: 156543,
    units: 'm'
});

map.addLayers([
    new OpenLayers.Layer.OSM.Mapnik("OSM Standard", { attribution: '', keyname: 'mapnik' }),
    new OpenLayers.Layer.OSM.Osmarender("OSM Alternativ", { attribution: '', keyname: 'osmarender' }),
    new OpenLayers.Layer.XYZ("Keine Karte", "", {
        attribution: 'Karte',
        keyname: 'mapnik'
    })
]);

jumpTo(lon, lat, zoom);

layer_local = new OpenLayers.Layer.Markers("Lokale Gruppen", { visibility: true });
map.addLayer(layer_local);
createMarkers();

layer_marker = new OpenLayers.Layer.Markers("Marker");
map.addLayer(layer_marker);

if (mlon != null && mlat != null) {
    setMarker();
}

map.events.register('move', null, mapMoved);
map.events.register('zoomend', null, function() { updateMapKey(false); } );
mapMoved();

jQuery('#mapkey_button').bind('click', function() {
    if (jQuery('#mapkey_area iframe').size() == 0) {
        jQuery('#mapkey_button').html('Legende ausblenden');
        updateMapKey(true);
    } else {
        jQuery('#mapkey_button').html('Legende<br/>einblenden');
        jQuery('#mapkey_area').html('');
    }
});

}

    </script>

    <style type="text/css">

div#map {
position: absolute;
top: 0px;
bottom: 41px;
left: 0px;
right: 0px;
/* for ie */
width:expression((document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth)-200);
height:expression((document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)-86);
padding: 1px;
}

div#mapkey_link {
position: absolute;
top: 420px;
left: 0;
width: 100px;
}

div.left {
z-index: 20000;
}

div#mapkey_area {
z-index: 20001;
}

div#mapkey_area iframe {
position: absolute;
top: 420px;
left: 100px;
width: 400px;
height: 280px;
border: none;
background-color: #ffffff;
border: 1px solid #bfc0d8;
z-index: 20002;
}

div#content {
position: absolute;
padding: 4px;
height: 31px;
bottom: 0px;
left: 0px;
right: 0px;
/* for ie */
width:expression((document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth)-200);
top:expression((document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)-78);
background-color: #bfc0d8;
border-bottom: 1px solid #bfc0d8;
}

div#customMousePosition {
position: absolute;
right: 10px;
padding: 2px;
font-size: xx-small;
}

div#customPermalink {
position: absolute;
right: 10px;
padding: 16px 2px;
font-size: xx-small;
}

div#attribution {
position: absolute;
left: 160px;
right: 160px;
font-size: xx-small;
}

div#attribution img {
float: left;
padding-right: 4px;
}

div#hinweis {
position: absolute;
bottom: 2px;
/* for ie */
top:expression((document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)-26);
text-align: center;
width: 100%;
}

    </style>
</head>
<body onload="init()">

    <div class="menu">


    </div>

    <div class="left">

        <div id="mapkey_link">
            <a id="mapkey_button" href="#"></a>
        </div>

        <div id="mapkey_area">
        </div>
    </div>

    <div class="main" id="main" style="bottom: 25px;">
        <div id="map">
            <noscript>Die Karte funktioniert nicht ohne Javascript. Bitte aktivieren Sie Javascript.</noscript>
        </div>
        <div id="content">

            <div id="attribution">

            </div>
            <div id="customMousePosition"></div>
            <div id="customPermalink"><a href="" id="permalink">Permalink</a></div>

        </div>


    <div class="footer">

    </div>

</body>
4

Hm, weiß denn jemand von Euch wenigstens, wie man dieses automatische Nachfokussieren deaktivieren kann. Wenn ich das täte, würde die Karte zumdindest funktionieren…

5

Problem gelöst. Ich habe zwei Dinge geändert, eines davon ist der Grund gewesen:

im Abschnitt map.addLayers([
war ein Layer, der nicht existierte drin. Rausgelöscht

unter
layer_local
war visibility false eingetragen.
Habe das zu true gemacht

nun geht’s!!!