Hello All, i am working to 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>
the code is posted below. Now the only problem i am facing it is as follows:<br><br>When ever i activate the dragFeature control, the icons (Vector features) become drag-able, but i cannot select them any more. My desired functionality is heavily dependent on the select feature, as only after selection i can modify and delete the features. How can i work around this problem? Any suggestions are welcome. <br>
<br>Also, is it a good practice to Edit a feature as in point 3? , is there a better way? <br><br>Thanks in advance.<br><br>--------------------------------My Code is as follows-------------------------------------<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 selectedFeatureID = "None";<br><br> var map,layer2, layer, selectedFeature;<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.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><br> <br> var click = new OpenLayers.Control.Click();<br> map.addControl(click);<br> click.activate();<br>
<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><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> var lonlat = map.getLonLatFromViewPortPx(e.xy);<br> //alert("You clicked near " + lonlat.lat + " N, " +lonlat.lon + " E");<br>
<br> //layer.removeFeatures(layer.features);<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> 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">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> { <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><br> </script><br> </head><br> <body onload="init()"><br> <h1 id="title">Click Event Example with Custom Marker</h1><br>
<div id="tags"><br> </div><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>
</p><br> <div id="map" class="smallmap"></div><br> <br> <div id="docs"><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 Selected Marker</button><br /><br> <button onclick="EditMarker();">Edit Selected Marker</button><br /><br>
</div><br> <div id="status"></div><br> </body><br></html><br>------------------------------------------------------------------------------------------------------------------------<br>