[OpenLayers-Users] Ho to add a marker with custom Icon and Text
Subhani Minhas
subhaniminhas at gmail.com
Mon May 3 21:42:39 EDT 2010
hello All, i myself was recently working on the problem of adding a custom
marker with custom text, and with the help of open-layers examples code i
was able to achieve following:
1. Add a marker with a custom icon and label, each time i click on the map.
2. Able to drag markers
I have only this suggestion that this functionality is pretty basic and
should be made part of editing toolbar, along with the option to save and
load KML data.
Here is the complete working code: You can copy paste this code in an html
file in the open-layers 2.9 examples folder and it should work fine :-)
----------------------------------Code to add a custom
marker---------------------
<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 : "${name}",
// Set the external graphic and background graphic
images.
externalGraphic: "${icon}",
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 myMarker = new OpenLayers.Feature.Vector(new
OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat));
var MarkerLabel= document.getElementById("Marker
Label").value;
var MarkerIcon= document.getElementById("Icon").value;
myMarker.attributes = {
name: MarkerLabel,
icon: "../img/" + MarkerIcon + ".png"
};
features.push(myMarker);
layer.addFeatures(features);
}
});
</script>
</head>
<body onload="init()">
<h1 id="title">Click Event Example with Custom Marker</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.It also
shopws how to add a custom marker with custom Icon
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<label for="Marker Label"> -Label</label>
<input id="Marker Label" type="text" size="5" maxlength="5"
name="Marker Label" value="label" onchange="update()"
/>
<label for="Icon">Icon</label>
<select name="Icon" id="Icon">
<option value="marker"
selected="selected">marker-red</option>
<option value="marker-blue">marker-blue</option>
<option value="marker-gold">marker-gold</option>
<option value="marker-green">marker-green</option>
</select>
</div>
</body>
</html>
----------------------------------Code to add a custom
marker---------------------
>Hi everyone,
>I'm working on an application that allows the user to add lines and
vertices
>to the map, to construct routes. In Google Maps, this would simply be
>markers and polylines.
>Using the OpenLayers abstraction layer, should I be using
OpenLayers.Marker?
>What about the line segments? If they're on a separate layer, will they
>still be able to receive clicks?
>I read elsewhere that the use of Marker and Layer.Markers is effectively
>deprecated in the OpenLayers world, in favour of Layer.Vector. Is this
true?
>Is there one of the basic examples that demonstrates dynamically adding and
>removing different objects from a Layer.Vector? Ideally, something like:
>click the map to create a marker, click the marker to delete it.
>Please note that I do not wish to use the standard editing toolbar that
>comes with OpenLayers?my application is fairly specialized, so I will need
>to build up this functionality from scratch.
>Thanks!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100504/2bc3b1b6/attachment.html
More information about the Users
mailing list