Hello All, i am working to achieve following, 1. Click to add a vector feature with custom icon and label at the point of click (Completed) 2. Click to select any drawn feature and delete it (Completed) 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) the code is posted below. Now the only problem i am facing it is as follows:
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. Also, is it a good practice to Edit a feature as in point 3? , is there a better way? Thanks in advance. --------------------------------My Code is as follows------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml";> <head> <title>OpenLayers Click Event Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var SHADOW_Z_INDEX = 10; var MARKER_Z_INDEX = 11; var DIAMETER = 200; var NUMBER_OF_FEATURES = 15; var selectedFeatureID = "None"; var map,layer2, layer, selectedFeature; function init(){ map = new OpenLayers.Map('map'); var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0?";, {layers: 'basic'} ); var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic", "http://t1.hypercube.telascience.org/cgi-bin/landsat7";, {layers: "landsat7"}); jpl_wms.setVisibility(false); map.addLayers([ol_wms, jpl_wms]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); layer = new OpenLayers.Layer.Vector("Vector Layer 1", { styleMap: new OpenLayers.StyleMap({ "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({ externalGraphic: "${icon}", label : "${name}", graphicOpacity: 1, backgroundGraphic: "./marker_shadow.png", graphicYOffset: -25, // shift graphic up 28 pixels // Makes sure the background graphic is placed correctly relative // to the external graphic. backgroundXOffset: -2, backgroundYOffset: -20, // 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 }, OpenLayers.Feature.Vector.style["default"])), "select": new OpenLayers.Style({ //externalGraphic: "../img/marker-blue.png", pointRadius: 15, graphicYOffset: -35, backgroundXOffset: -2, backgroundYOffset: -30 }) }) }); map.addLayers([layer]); // Add a drag feature control to move features around. var dragFeature = new OpenLayers.Control.DragFeature(layer); map.addControl(dragFeature); //dragFeature.activate(); var click = new OpenLayers.Control.Click(); map.addControl(click); click.activate(); selectControl = new OpenLayers.Control.SelectFeature( [layer], { clickout: true, toggle: false, multiple: false, hover: false, toggleKey: "ctrlKey", // ctrl key removes from selection multipleKey: "shiftKey" // shift key adds to selection } ); map.addControl(selectControl); selectControl.activate(); layer.events.on({ "featureselected": function(e) { var lonlat = map.getLonLatFromViewPortPx(e.xy); showSelectedStatus(e.feature); }, "featureunselected": function(e) { showUnSelectedStatus(e.feature); } }); } OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger }, this.handlerOptions ); }, trigger: function(e) { var lonlat = map.getLonLatFromViewPortPx(e.xy); //alert("You clicked near " + lonlat.lat + " N, " +lonlat.lon + " E"); //layer.removeFeatures(layer.features); var features = []; var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat)); var MarkerLabel= document.getElementById("Marker Label").value; var MarkerIcon= document.getElementById("Icon").value; myMarker.attributes = { name: MarkerLabel, icon: "../img/" + MarkerIcon + ".png", radius:10 }; features.push(myMarker); layer.addFeatures(features); } }); function showSelectedStatus(feature) { selectedFeature = feature; document.getElementById("status").innerHTML = "selected feature "+feature.geometry.getBounds().getCenterLonLat() +" on Vector Layer 1"; } function showUnSelectedStatus(feature) { document.getElementById("status").innerHTML = "Un selected feature "+feature.id+" on Vector Layer 1"; selectedFeature = "None"; } function DelMarker() { layer.removeFeatures(layer.selectedFeatures); } function EditMarker() { if ( selectedFeature != "None") { layer.removeFeatures(layer.selectedFeatures); var features = []; var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(selectedFeature.geometry.getBounds().getCenterLonLat().lon , selectedFeature.geometry.getBounds().getCenterLonLat().lat)); var MarkerLabel= document.getElementById("Marker Label").value; var MarkerIcon= document.getElementById("Icon").value; myMarker.attributes = { name: MarkerLabel, icon: "../img/" + MarkerIcon + ".png", radius:10 }; features.push(myMarker); layer.addFeatures(features); } } </script> </head> <body onload="init()"> <h1 id="title">Click Event Example with Custom Marker</h1> <div id="tags"> </div> <p id="shortdesc"> 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 </p> <div id="map" class="smallmap"></div> <div id="docs"> <label for="Marker Label"> -Label</label> <input id="Marker Label" type="text" size="5" maxlength="5" name="Marker Label" value="label" onchange="update()" /> <label for="Icon">Icon</label> <select name="Icon" id="Icon"> <option value="marker" selected="selected">marker-red</option> <option value="marker-blue">marker-blue</option> <option value="marker-gold">marker-gold</option> <option value="marker-green">marker-green</option> </select> <button onclick="DelMarker();">Delete Selected Marker</button><br /> <button onclick="EditMarker();">Edit Selected Marker</button><br /> </div> <div id="status"></div> </body> </html> ------------------------------------------------------------------------------------------------------------------------
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
