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

Fri Apr 30 02:30:26 EDT 2010

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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100430/c75210f8/attachment.html