On Friday, April 30, 2010, Subhani Minhas <subhanimin...@gmail.com> wrote: > 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);
try feature.style = OpenLayers.util.extend( layer.styleMap.createSymbolizer(feature), { label: "B", externalGraphic: "../img/marker-blue.png } ); Hope it helps, -- Eric Lemoine Camptocamp France SAS Savoie Technolac, BP 352 73377 Le Bourget du Lac, Cedex Tel : 00 33 4 79 44 44 96 Mail : eric.lemo...@camptocamp.com http://www.camptocamp.com _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users