Hello, i am new to openlayers and work by experimenting in the code in examples. I had already posted my request twice but no response came :-(, may be my question was toooo basic. However i tried , and after release of 2.9 i was able to get some success. basically combining the code of Click example ( Click.HTML) and the marker-shadow.html example i was able to achieve following:<br>
1. Click on the map to add any number of vector markers with a fixed style and label.<br>2. Drag any feature<br>Now i want to be able to change the markers label and icon (may be selecting it from a html drop-down list for icon and an input box for label) once i click on the map. The only way is to define a custom style. I have defined a custom style but the vector markers shape and label remain the same. What is the problem? i cannot figure out. Any help is more than needed. Thanks. <br>
<br>The code is as following: I want to change the custom style inside the click event . (highlighted in yellow)<br><br><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br>
<head><br> <title>OpenLayers Click Event Example</title><br> <br> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /><br>
<link rel="stylesheet" href="style.css" type="text/css" /><br> <script src="../lib/OpenLayers.js"></script><br> <script type="text/javascript"><br>
<br> var SHADOW_Z_INDEX = 10;<br> var MARKER_Z_INDEX = 11;<br> var DIAMETER = 200;<br> var NUMBER_OF_FEATURES = 15;<br><br> var map,layer;<br> function init(){<br> map = new OpenLayers.Map('map');<br>
var ol_wms = 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> var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",<br> "<a href="http://t1.hypercube.telascience.org/cgi-bin/landsat7">http://t1.hypercube.telascience.org/cgi-bin/landsat7</a>", <br>
{layers: "landsat7"});<br><br> jpl_wms.setVisibility(false);<br> map.addLayers([ol_wms, jpl_wms]);<br> map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
// map.setCenter(new OpenLayers.LonLat(0, 0), 0);<br> map.zoomToMaxExtent();<br> <br> layer = new OpenLayers.Layer.Vector(<br> "Marker Drop Shadows",<br> {<br>
styleMap: new OpenLayers.StyleMap({<br> //label: "${foo}", // label will be foo attribute value<br> graphicYOffset: -25, // shift graphic up 28 pixels<br>
label: "A",<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: -2,<br>
backgroundYOffset: -20,<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> pointRadius: 10<br>
}),<br> isBaseLayer: false,<br> rendererOptions: {yOrdering: true}<br> }<br> );<br> map.addLayers([layer]);<br> // Add a drag feature control to move features around.<br>
var dragFeature = new OpenLayers.Control.DragFeature(layer);<br> map.addControl(dragFeature);<br> dragFeature.activate();<br> var click = new OpenLayers.Control.Click();<br>
map.addControl(click);<br> click.activate();<br><br> }<br><br> OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { <br> defaultHandlerOptions: {<br>
'single': true,<br> 'double': false,<br> 'pixelTolerance': 0,<br> 'stopSingle': false,<br> 'stopDouble': false<br>
},<br><br> initialize: function(options) {<br> this.handlerOptions = OpenLayers.Util.extend(<br> {}, this.defaultHandlerOptions<br> );<br>
OpenLayers.Control.prototype.initialize.apply(<br> this, arguments<br> ); <br> this.handler = new OpenLayers.Handler.Click(<br> this, {<br>
'click': this.trigger<br> }, this.handlerOptions<br> );<br> }, <br><br> <span style="background-color: rgb(255, 255, 51);"> trigger: function(e) {</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> var lonlat = map.getLonLatFromViewPortPx(e.xy);</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> //alert("You clicked near " + lonlat.lat + " N, " +lonlat.lon + " E");</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> </span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> //layer.removeFeatures(layer.features);</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> var features = [];</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> var foo=1;</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> var style2 = new OpenLayers.StyleMap({label: "B",externalGraphic: "../img/marker-blue.png"},{});</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> features.style = OpenLayers.Util.extend({}, style2);</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> features.push( new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat)));</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> layer.addFeatures(features);</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> layer.drawFeature(features,style2);</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"></span><span style="background-color: rgb(255, 255, 51);"> layer.redraw();</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"></span><span style="background-color: rgb(255, 255, 51);"> //drawFeatures();</span><br style="background-color: rgb(255, 255, 51);">
<span style="background-color: rgb(255, 255, 51);"> }</span><br style="background-color: rgb(255, 255, 51);"><span style="background-color: rgb(255, 255, 51);"> });</span><br><br> </script><br>
</head><br> <body onload="init()"><br> <h1 id="title">Click Event Example</h1><br><br> <div id="tags"><br> </div><br><br> <p id="shortdesc"><br>
This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click. <br><br> </p><br><br> <div id="map" class="smallmap"></div><br>
<br> <div id="docs"><br> Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get two alerts.) This example click control shows you how to use it. <br>
</div><br> </body><br></html><br><br>