<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>Markers Layer 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 map, layer; function init(){ OpenLayers.ProxyHost="/proxy/?url="; map = new OpenLayers.Map('map'); layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); map.addLayer(layer); map.setCenter(new OpenLayers.LonLat(0, 0), 0); var newl = new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} ); map.addLayer(newl); var markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset); markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon)); var halfIcon = icon.clone(); markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon)); marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone()); marker.setOpacity(0.2); marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); }); markers.addMarker(marker); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); halfIcon.setOpacity(0.5); } </script> </head> <body onload="init()"> <h1 id="title">Markers Layer Example</h1> <div id="tags">Marker, event, mousedown, popup, inco</div> <div id="shortdesc">Show markers layer with different markers</div> <div id="map" class="smallmap"></div> <div id="docs"> <p>This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers. Also demonstrated is registering a mousedown effect on a marker.</p> </div> </body> </html>