<div style="margin-left: 40px;">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:<br>1. Add a marker with a custom icon and label, each time i click on the map. <br>
2. Able to drag markers<br><br>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. <br><br>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 :-)<br>
----------------------------------Code to add a custom marker---------------------<br><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <title>OpenLayers Click Event Example</title><br>
<br> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /><br> <link rel="stylesheet" href="style.css" type="text/css" /><br>
<script src="../lib/OpenLayers.js"></script><br> <script type="text/javascript"><br> <br> var SHADOW_Z_INDEX = 10;<br> var MARKER_Z_INDEX = 11;<br> var DIAMETER = 200;<br>
var NUMBER_OF_FEATURES = 15;<br><br> var map,layer;<br> function init(){<br> map = new OpenLayers.Map('map');<br> var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",<br>
"<a href="http://labs.metacarta.com/wms/vmap0">http://labs.metacarta.com/wms/vmap0</a>?", {layers: 'basic'} );<br><br> var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",<br>
"<a href="http://t1.hypercube.telascience.org/cgi-bin/landsat7">http://t1.hypercube.telascience.org/cgi-bin/landsat7</a>", <br> {layers: "landsat7"});<br><br> jpl_wms.setVisibility(false);<br>
map.addLayers([ol_wms, jpl_wms]);<br> map.addControl(new OpenLayers.Control.LayerSwitcher());<br> // map.setCenter(new OpenLayers.LonLat(0, 0), 0);<br> map.zoomToMaxExtent();<br>
<br> layer = new OpenLayers.Layer.Vector(<br> "Marker Drop Shadows",<br> {<br> styleMap: new OpenLayers.StyleMap({<br> //label: "${foo}", // label will be foo attribute value<br>
graphicYOffset: -25, // shift graphic up 28 pixels<br> label : "${name}",<br> // Set the external graphic and background graphic images.<br> externalGraphic: "${icon}",<br>
backgroundGraphic: "./marker_shadow.png",<br> <br> // Makes sure the background graphic is placed correctly relative<br> // to the external graphic.<br>
backgroundXOffset: -2,<br> backgroundYOffset: -20,<br> <br> // Set the z-indexes of both graphics to make sure the background<br>
// graphics stay in the background (shadows on top of markers looks<br> // odd; let's not do that).<br> graphicZIndex: MARKER_Z_INDEX,<br> backgroundGraphicZIndex: SHADOW_Z_INDEX,<br>
pointRadius: 10<br> }),<br> isBaseLayer: false,<br> rendererOptions: {yOrdering: true}<br> }<br> );<br> <br>
map.addLayers([layer]);<br> <br> // Add a drag feature control to move features around.<br> var dragFeature = new OpenLayers.Control.DragFeature(layer);<br> <br> map.addControl(dragFeature);<br>
<br> dragFeature.activate();<br> <br> var click = new OpenLayers.Control.Click();<br> map.addControl(click);<br> click.activate();<br><br> }<br>
<br> OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { <br> defaultHandlerOptions: {<br> 'single': true,<br> 'double': false,<br>
'pixelTolerance': 0,<br> 'stopSingle': false,<br> 'stopDouble': false<br> },<br><br> initialize: function(options) {<br>
this.handlerOptions = OpenLayers.Util.extend(<br> {}, this.defaultHandlerOptions<br> );<br> OpenLayers.Control.prototype.initialize.apply(<br>
this, arguments<br> ); <br> this.handler = new OpenLayers.Handler.Click(<br> this, {<br> 'click': this.trigger<br>
}, this.handlerOptions<br> );<br> }, <br><br> trigger: function(e) {<br> var lonlat = map.getLonLatFromViewPortPx(e.xy);<br> //alert("You clicked near " + lonlat.lat + " N, " +lonlat.lon + " E");<br>
<br> //layer.removeFeatures(layer.features);<br> var features = [];<br> var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon , lonlat.lat)); <br>
var MarkerLabel= document.getElementById("Marker Label").value;<br> var MarkerIcon= document.getElementById("Icon").value;<br> myMarker.attributes = {<br> name: MarkerLabel,<br>
icon: "../img/" + MarkerIcon + ".png"<br> };<br> features.push(myMarker);<br> layer.addFeatures(features);<br>
}<br><br> });<br><br> </script><br> </head><br> <body onload="init()"><br> <h1 id="title">Click Event Example with Custom Marker</h1><br>
<br> <div id="tags"><br> </div><br><br> <p id="shortdesc"><br> 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 <br>
<br> </p><br><br> <div id="map" class="smallmap"></div><br> <br> <div id="docs"><br> <label for="Marker Label"> -Label</label><br>
<input id="Marker Label" type="text" size="5" maxlength="5"<br> name="Marker Label" value="label" onchange="update()" /><br>
<br> <label for="Icon">Icon</label><br> <select name="Icon" id="Icon"><br> <option value="marker" selected="selected">marker-red</option><br>
<option value="marker-blue">marker-blue</option><br> <option value="marker-gold">marker-gold</option><br> <option value="marker-green">marker-green</option><br>
</select><br> </div><br> </body><br></html><br><br>----------------------------------Code to add a custom
marker---------------------<br></div>>Hi everyone,<br><br>
>I'm working on an application that allows the user to add lines and
vertices<br>
>to the map, to construct routes. In Google Maps, this would simply be<br>
>markers and polylines.<br><br>
>Using the OpenLayers abstraction layer, should I be using
OpenLayers.Marker?<br>
>What about the line segments? If they're on a separate layer, will they<br>
>still be able to receive clicks?<br><br>
>I read elsewhere that the use of Marker and Layer.Markers is effectively<br>
>deprecated in the OpenLayers world, in favour of Layer.Vector. Is this
true?<br>
>Is there one of the basic examples that demonstrates dynamically adding
and<br>
>removing different objects from a Layer.Vector? Ideally, something like:<br>
>click the map to create a marker, click the marker to delete it.<br><br>
>Please note that I do not wish to use the standard editing toolbar that<br>
>comes with OpenLayers?my application is fairly specialized, so I will
need<br>
>to build up this functionality from scratch.<br><br>
>Thanks!