Hurray, the code suggested by you works great :-)<br>Here is the final code which can achieve following:<br>1. Click to add a vector feature with custom icon and label at the point
of click (Completed)<br>2. Click to select any drawn feature and delete
it (Completed)<br>3. Click to select any drawn feature and Modify it. (
By deleting and re-creating the a new feature at the same place with
new icon and label) (Completed)<br>4. Drag Any selected or un-selected icon. (completed with the gracious help of Mr. Ilya Braude, All credit goes to him)<br><br>My next goal is to save this layer as kml. Hope i will post results soon<br>
<br>----------------the Code is as following- Sharing with every one in the hope that sme one can benefit from it -------------------------<br><br><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">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 selectedFeatureID = "None";<br><br> var map,layer2, layer, selectedFeature, dragFeature, selectControl ;<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" target="_blank">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" target="_blank">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("Vector Layer 1", {<br> styleMap: new OpenLayers.StyleMap({<br>
"default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({<br> externalGraphic: "${icon}",<br> label : "${name}",<br> graphicOpacity: 1,<br>
backgroundGraphic: "./marker_shadow.png",<br> graphicYOffset: -25, // shift graphic up 28 pixels<br> // Makes sure the background graphic is placed correctly relative<br>
// to the external graphic.<br> backgroundXOffset: -2,<br> backgroundYOffset: -20,<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> }, OpenLayers.Feature.Vector.style["default"])),<br> "select": new OpenLayers.Style({<br> //externalGraphic: "../img/marker-blue.png",<br>
pointRadius: 15,<br> graphicYOffset: -35, <br> backgroundXOffset: -2,<br> backgroundYOffset: -30<br> })<br> })<br>
});<br> <br> map.addLayers([layer]);<br> <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>//-------------Coe suggested by Mr Ilya Braude -------------<br>dragFeature.handlers['drag'].stopDown = false;<br>dragFeature.handlers['drag'].stopUp = false;<br>
dragFeature.handlers['drag'].stopClick = false;<br>dragFeature.handlers['feature'].stopDown = false;<br>dragFeature.handlers['feature'].stopUp = false;<br>dragFeature.handlers['feature'].stopClick = false; <br>
//-------------Coe suggested by Mr Ilya Braude-------------<br> <br> var click = new OpenLayers.Control.Click();<br> map.addControl(click);<br> click.activate();<br><br>
//vlayer = new OpenLayers.Layer.Vector( "Editable Vector Overlay" );<br> //map.addLayer(vlayer);<br> //map.addControl(new OpenLayers.Control.EditingToolbar(vlayer)); <br> selectControl = new OpenLayers.Control.SelectFeature(<br>
[layer],<br> {<br> clickout: true, toggle: false,<br> multiple: false, hover: false,<br> toggleKey: "ctrlKey", // ctrl key removes from selection<br>
multipleKey: "shiftKey" // shift key adds to selection<br> }<br> );<br> map.addControl(selectControl);<br> selectControl.activate();<br> layer.events.on({<br>
"featureselected": function(e) {<br> var lonlat = map.getLonLatFromViewPortPx(e.xy);<br> showSelectedStatus(e.feature);<br> },<br> "featureunselected": function(e) {<br>
showUnSelectedStatus(e.feature);<br> }<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> trigger: function(e) {<br> if (document.getElementById('pointToggle').checked == true)<br>
{ var lonlat = map.getLonLatFromViewPortPx(e.xy);<br> var features = [];<br> var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat)); <br>
var MarkerLabel= document.getElementById("Marker Label").value;<br> var MarkerIcon= document.getElementById("Icon").value;<br> myMarker.attributes = {<br>
name: MarkerLabel,<br>
icon: "../img/" + MarkerIcon + ".png",<br> radius:10<br> };<br> features.push(myMarker);<br>
layer.addFeatures(features);<br> }<br> }<br> <br> });<br><br> function showSelectedStatus(feature) {<br> selectedFeature = feature;<br> document.getElementById("status").innerHTML = "selected feature "+feature.geometry.getBounds().getCenterLonLat() +" on Vector Layer 1"; <br>
}<br><br> function showUnSelectedStatus(feature) {<br> document.getElementById("status").innerHTML = "Un selected feature "+<a href="http://feature.id" target="_blank">feature.id</a>+" on Vector Layer 1"; <br>
selectedFeature = "None";<br> }<br><br> function DelMarker()<br>{<br> layer.removeFeatures(layer.selectedFeatures);<br>}<br> <br> function EditMarker()<br> { if ( selectedFeature != "None")<br>
{<br> layer.removeFeatures(layer.selectedFeatures);<br> var features = [];<br> var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(selectedFeature.geometry.getBounds().getCenterLonLat().lon , selectedFeature.geometry.getBounds().getCenterLonLat().lat)); <br>
var MarkerLabel= document.getElementById("Marker Label").value;<br> var MarkerIcon= document.getElementById("Icon").value;<br> myMarker.attributes = {<br>
name: MarkerLabel,<br>
icon: "../img/" + MarkerIcon + ".png",<br> radius:10<br> };<br> features.push(myMarker);<br>
layer.addFeatures(features);<br> }<br> } <br>//----------Nor being used really------------<br> function toggleControl(element) {<br> for(key in controls) {<br> var control = controls[key];<br>
if(element.value == key && element.checked) {<br> control.activate();<br> } else {<br> control.deactivate();<br> }<br> }<br>
}<br><br> </script><br> </head><br> <body onload="init()"><br> <h1 id="title">Click Event Example with Custom Marker</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.It also shows how to add a custom marker with custom Icon <br>
<br> </p><br><br> <div id="map" class="smallmap"></div><br> <br> <div id="docs"><br> <input type="radio" name="type" value="none" id="noneToggle"<br>
onclick="toggleControl(this);" checked="checked" /><br> <label for="noneToggle">navigate</label><br> <br> <input type="radio" name="type" value="point" id="pointToggle" onclick="DrawFeratures();" /><br>
<label for="pointToggle">draw point</label><br> <label for="Marker Label"> -Label</label><br> <input id="Marker Label" type="text" size="5" maxlength="5"<br>
name="Marker Label" value="label" onchange="update()" /><br><br> <label for="Icon">Icon</label><br> <select name="Icon" id="Icon"><br>
<option value="marker" selected="selected">marker-red</option><br> <option value="marker-blue">marker-blue</option><br> <option value="marker-gold">marker-gold</option><br>
<option value="marker-green">marker-green</option><br> </select><br> <button onclick="DelMarker();">Delete</button><br> <button onclick="EditMarker();">Edit</button><br /><br>
<br> </div><br> <div id="status"></div><br> </body><br></html><br><br><br>