[OpenLayers-Users] How to Use selectControl and dragFeature
control at the same time?
Ilya Braude
ilya at drakontas.com
Thu May 13 23:32:04 EDT 2010
Try to set the following on the drag control:
dragFeature.handlers['drag'].stopDown = false;
dragFeature.handlers['drag'].stopUp = false;
dragFeature.handlers['drag'].stopClick = false;
dragFeature.handlers['feature'].stopDown = false;
dragFeature.handlers['feature'].stopUp = false;
dragFeature.handlers['feature'].stopClick = false;
--
Ilya
Subhani Minhas wrote:
> 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 <http://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
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
More information about the Users
mailing list