[OpenLayers-Users] Click to Add a feature with Custom Icon and Label
Subhani Minhas
subhaniminhas at gmail.com
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
More information about the Users
mailing list