[OpenLayers-Users] Click to Add a feature with Custom Icon and Label

Fri Apr 30 03:18:59 EDT 2010

On Friday, April 30, 2010, Subhani Minhas <subhaniminhas at 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.lemoine at camptocamp.com
http://www.camptocamp.com