Anzeige der Zoom- und Richtungsfelder fehlt

Nabend,

Ich habe das Problem das beim laden einer Karte auf meiner Webseite die Zeichen für Zoom und Richtung kurz angezeigt werden und dann verschwinden sie wieder.

Hat da jemand eine Ahnung woran das liegen kann?

Hier mein Code:

<script type="text/javascript">

        var SHADOW_Z_INDEX = 10;
        var MARKER_Z_INDEX = 11;

        var DIAMETER = 200;
        
        // Position und Zoomstufe der Karte
        var lon = <?php echo $longitude; ?>;
        var lat = <?php echo $latitude; ?>;
        
        var map;
        var zoom = 16;

        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";




            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                numZoomLevels: 18,
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508, 20037508.34)
            };


            map = new OpenLayers.Map('map', options);

            var mapnik = new OpenLayers.Layer.TMS(
                "Base Layer",
                "http://b.tile.openstreetmap.org/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    wrapDateLine: true
                }
            );

            layer = new OpenLayers.Layer.Vector(
                "Das-Deutschlandnetz",
                {
                    styleMap: new OpenLayers.StyleMap({
                        // Set the external graphic and background graphic images.
                        externalGraphic: "http://media.ducktracker.com/img/marker-gold.png",
                        backgroundGraphic: "http://media.ducktracker.com/img/marker_shadow.png",

                        // Makes sure the background graphic is placed correctly relative
                        // to the external graphic.
                        backgroundXOffset: 0,
                        backgroundYOffset: -7,

                        // Set the z-indexes of both graphics to make sure the background
                        // graphics stay in the background (shadows on top of markers looks
                        // odd; let's not do that).
                        graphicZIndex: MARKER_Z_INDEX,
                        backgroundGraphicZIndex: SHADOW_Z_INDEX,

                        pointRadius: 12
                    }),
                    rendererOptions: {yOrdering: true}
                }
            );
  
            var centre = new lonLatToMercator(new OpenLayers.LonLat(lon, lat));
                         //lonLatToMercator(new OpenLayers.LonLat(8.83, 52.016))


            function osm_getTileURL(bounds) {
                var res = this.map.getResolution();
                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                var limit = Math.pow(2, z);

                if (y < 0 || y >= limit) {
                    return OpenLayers.Util.getImagesLocation() + "404.png";
                } else {
                    x = ((x % limit) + limit) % limit;
                    return this.url + z + "/" + x + "/" + y + "." + this.type;
                }
            }

            /*
             * Layer style
             */
            // we want opaque external graphics and non-opaque internal graphics
            var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
            layer_style.fillOpacity = 0.2;
            layer_style.graphicOpacity = 1;

            //var pointList = new Array();
            //var pointimport = [1491681.13396, 6894096.23908];

            map.addLayers([mapnik, layer]);
            //map.addLayer(mapnik);
            map.setCenter(centre, zoom);



            // Add a drag feature control to move features around.
            controls = { drag: new OpenLayers.Control.DragFeature(layer, {'onComplete': onCompleteMove} )};
            map.addControl(controls['drag']);
            controls['drag'].activate();


            drawFeatures();
        }


        function onCompleteMove(feature)
        {
                if(feature)
                {
                        // replace coordinate values in feature attributes
                        var pointX = feature.geometry.x;
                        var pointY = feature.geometry.y;
                        $('[name=geo_lon]').val(pointX);
                        $('[name=geo_lat]').val(pointY);
                }
        }

        function drawFeatures() {

            layer.removeFeatures(layer.features);

            // Create features at random around the center.
            var center = map.getViewPortPxFromLonLat(map.getCenter());

            // Add the ordering features. These are the gold ones that all have the same z-index
            // and succomb to y-ordering.
            var features = [];

                var lonLat = new lonLatToMercator(new OpenLayers.LonLat(lon, lat));
                features.push(
                    new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
                    )
                );

            layer.addFeatures(features);
        }
        

        function lonLatToMercator(ll) {

           var lon = ll.lon * 20037508.34 / 180;
           var lat = Math.log(Math.tan((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
           lat = lat * 20037508.34 / 180;
           return new OpenLayers.LonLat(lon, lat);
        }
        
        
        function MercatorToLonLat(ll) {
          var lon = ll.lon / 20037508.34 * 180;
    
          // Umrechnung Meter -> rad
          var lat = ll.lat / 20037508.34 * 180 * ( Math.PI / 180 );
            // Projektion Mercator -> Erdkugel
          lat = ( Math.pow(Math.E, lat) - Math.pow(Math.E, -lat) ) / 2;   // = Math.sinh(lat)
          lat = Math.atan( lat );
            // Umrechnung rad -> Grad
          lat = lat * 180 / Math.PI;                                                
          return new OpenLayers.LonLat(lon, lat);
        }

    </script>

Danke

Mitch

Hallo Mitch,

ich habe direkt nach dem

map = new Openlayers.map () 

diese Anzeige aktiviert

map.addControl(new OpenLayers.Control.PanZoomBar());        // Zoombalken
map.addControl(new OpenLayers.Control.ScaleLine());        // Anzeige Massstab
map.addControl(new OpenLayers.Control.MousePosition());        // Koordinate des Mauszeigers 

Nein daran scheint es nicht zu liegen. Damit bekomme ich die Koordinaten angezeigt (komisch ist aber so).

Wenn ich meine Seite über Google Chrome öffne sehe ich anstatt der Controls das zeiche für ein fehlendes Bild. Hier kann ich nun aber Zoomen und mich auf der Karte bewegen.
Hat es damit was zu tun?

Mitch

Alles auf zurück,

habe nun festgestellt woran es lag.

Die Grafiken für die Darstellungen lagen bei mir nicht im richtigen Ordner. Seltsam zwar das es vorher geklappt hatte aber nun habe ich es korrigiert und es läuft.

Trotzdem danke für die hilfe.

Schönen Abend.

Mitch