Hi everybody,<br><br>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.<br><br>Here the entire code. We merged the two examples marker-shadow.html and draw-feature.html to get there. Does anyone have an idea?<br>
<br><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <title>OpenLayers: Vector Graphics with Shadows</title><br> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /><br>
<link rel="stylesheet" href="style.css" type="text/css" /><br> <style type="text/css"><br> .smallmap {<br> width: 300px;<br> }<br> <br>
.docs {<br> padding: 0px 5px;<br> }<br> <br> td {<br> vertical-align: top;<br> }<br> <br> </style><br> <script src="../lib/OpenLayers.js" type="text/javascript"></script><br>
<script type="text/javascript"><br> <br> var SHADOW_Z_INDEX = 10;<br> var MARKER_Z_INDEX = 11;<br> <br> var DIAMETER = 200;<br> var NUMBER_OF_FEATURES = 15;<br>
var features = []; <br> var map, layer; <br> <br> function init() {<br> map = new OpenLayers.Map("map");<br> <br> layer = new OpenLayers.Layer.Vector(<br>
"Marker Drop Shadows",<br> {<br> styleMap: new OpenLayers.StyleMap({<br> // Set the external graphic and background graphic images.<br> externalGraphic: "../img/marker-gold.png",<br>
backgroundGraphic: "./marker_shadow.png",<br> <br> // Makes sure the background graphic is placed correctly relative<br> // to the external graphic.<br>
backgroundXOffset: 0,<br> backgroundYOffset: -7,<br> <br> // Set the z-indexes of both graphics to make sure the background<br> // graphics stay in the background (shadows on top of markers looks<br>
// odd; let's not do that).<br> graphicZIndex: MARKER_Z_INDEX,<br> backgroundGraphicZIndex: SHADOW_Z_INDEX,<br> <br> pointRadius: 10<br>
}),<br> isBaseLayer: false,<br> rendererOptions: {yOrdering: true}<br> }<br> );<br> <br> var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",<br>
"<a href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</a>?", {layers: 'basic'});<br> <br> map.addLayers([wmsLayer,layer]);<br> <br>
// Add a drag feature control to move features around.<br> var dragFeature = new OpenLayers.Control.DragFeature(layer);<br> <br> map.addControl(dragFeature);<br> map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
map.addControl(new OpenLayers.Control.MousePosition());<br> <br> dragFeature.activate();<br> <br> map.zoomToMaxExtent();<br> <br> drawFeatures();<br>
}<br> <br> function drawFeatures() {<br> <br> layer.removeFeatures(layer.features);<br> <br> // Create features at random around the center.<br> var center = map.getViewPortPxFromLonLat(map.getCenter());<br>
<br> // Add the ordering features. These are the gold ones that all have the same z-index<br> // and succomb to y-ordering.<br> <br> <br> <br> // Calculate a random x/y. Subtract half the diameter to make some<br>
<br> var pixel = new OpenLayers.Pixel(center.x, center.y);<br> <br> var lonLat = map.getLonLatFromViewPortPx(pixel);<br> features.push(<br> new OpenLayers.Feature.Vector(<br>
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)<br> )<br> );<br> <br> <br> layer.addFeatures(features[0]);<br> features[0].geometry.x = 12;<br>
features[0].geometry.y = 7;<br> <br> }<br> <br> </script><br> </head><br> <body onload="init()"><br> <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1><br>
<br> <div id="tags"><br> </div><br><br> <p id="shortdesc"><br> This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.<br>
</p><br> <br> <br><br><br> <table><br> <tr><br> <td><br> <div id="map" class="smallmap"></div><br>
</td><br> <td><br><br> </tr><br> <tr><br> <td><br> <button onclick="drawFeatures()">Redraw Features</button><br>
</td><br> </tr><br> </table><br> <br> <br> </body><br></html><br><br>Regards, mehmet<br>