[OpenLayers-Users] Marker disappears in high zoom levels

Wed Nov 18 09:00:00 EST 2009

Hi everybody,

we stuck on some problem. We tried to move a marker as shown in the example
below but after several zoom-in steps the marker suddenly disappears and
reassigns by zooming out.

Here the entire code. We merged the two examples marker-shadow.html and
draw-feature.html to get there. Does anyone have an idea?

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>OpenLayers: Vector Graphics with Shadows</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css"
/>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        .smallmap {
            width: 300px;
        }

        .docs {
            padding: 0px 5px;
        }

        td {
            vertical-align: top;
        }

    </style>
    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
    <script type="text/javascript">

        var SHADOW_Z_INDEX = 10;
        var MARKER_Z_INDEX = 11;

        var DIAMETER = 200;
        var NUMBER_OF_FEATURES = 15;
          var features = [];
        var map, layer;

        function init() {
            map = new OpenLayers.Map("map");

            layer = new OpenLayers.Layer.Vector(
                "Marker Drop Shadows",
                {
                    styleMap: new OpenLayers.StyleMap({
                        // Set the external graphic and background graphic
images.
                        externalGraphic: "../img/marker-gold.png",
                        backgroundGraphic: "./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: 10
                    }),
                    isBaseLayer: false,
                    rendererOptions: {yOrdering: true}
                }
            );

                        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers
WMS",
                    "http://labs.metacarta.com/wms/vmap0?", {layers:
'basic'});

            map.addLayers([wmsLayer,layer]);

            // Add a drag feature control to move features around.
            var dragFeature = new OpenLayers.Control.DragFeature(layer);

            map.addControl(dragFeature);
         map.addControl(new OpenLayers.Control.LayerSwitcher());
                map.addControl(new OpenLayers.Control.MousePosition());

            dragFeature.activate();

            map.zoomToMaxExtent();

            drawFeatures();
        }

        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.

                // Calculate a random x/y. Subtract half the diameter to
make some

                var pixel = new OpenLayers.Pixel(center.x, center.y);

                var lonLat = map.getLonLatFromViewPortPx(pixel);
                features.push(
                    new OpenLayers.Feature.Vector(
                        new OpenLayers.Geometry.Point(lonLat.lon,
lonLat.lat)
                    )
                );

            layer.addFeatures(features[0]);
        features[0].geometry.x = 12;
        features[0].geometry.y = 7;

        }

    </script>
  </head>
  <body onload="init()">
        <h1 id="title">Marker Shadows using Background
Graphics/Z-Indexes</h1>

        <div id="tags">
        </div>

        <p id="shortdesc">
           This example shows off marker shadows using background graphics
and z-indexes. Move the features around to show the shadows' interaction.
        </p>

        <br>

        <table>
            <tr>
                <td>
                    <div id="map" class="smallmap"></div>
                </td>
                <td>

            </tr>
            <tr>
                <td>
                    <button onclick="drawFeatures()">Redraw
Features</button>
                </td>
            </tr>
        </table>

    </body>
</html>

Regards, mehmet
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20091118/6b86391e/attachment.html