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: 1. Click on the map to add any number of vector markers with a fixed style and label. 2. Drag any feature 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.
The code is as following: I want to change the custom style inside the click event . (highlighted in yellow) <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 map,layer; 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.setCenter(new OpenLayers.LonLat(0, 0), 0); map.zoomToMaxExtent(); layer = new OpenLayers.Layer.Vector( "Marker Drop Shadows", { styleMap: new OpenLayers.StyleMap({ //label: "${foo}", // label will be foo attribute value graphicYOffset: -25, // shift graphic up 28 pixels label: "A", // Set the external graphic and background graphic images. externalGraphic: "../img/marker-gold.png", backgroundGraphic: "./marker_shadow.png", // 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 }), isBaseLayer: false, rendererOptions: {yOrdering: true} } ); 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(); } 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 foo=1; var style2 = new OpenLayers.StyleMap({label: "B",externalGraphic: "../img/marker-blue.png"},{}); features.style = OpenLayers.Util.extend({}, style2); features.push( new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat))); layer.addFeatures(features); layer.drawFeature(features,style2); layer.redraw(); //drawFeatures(); } }); </script> </head> <body onload="init()"> <h1 id="title">Click Event Example</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. </p> <div id="map" class="smallmap"></div> <div id="docs"> 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. </div> </body> </html>
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
