
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <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;


        function init(){

            map = new OpenLayers.Map('map');

            var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 

                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );

            map.addLayer(layer);


            // create markers layer

            var markers = new OpenLayers.Layer.Markers( "Markers" );

            map.addLayer(markers);


            // create icon

            var size = new OpenLayers.Size(10, 17);

            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

            var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png', size, offset);


            // function to create a named marker and add it to layer

            var addMarker = function(lonlat, name) {

                var marker = new OpenLayers.Marker(lonlat, icon.clone());

                marker.name = name;

                marker.events.register('mouseover', marker, function(evt) {

                    alert(this.name);

                });

                markers.addMarker(marker);

            };


            // add three named markers

            addMarker(new OpenLayers.LonLat(0, 0), 'first');

            addMarker(new OpenLayers.LonLat(0, 45), 'second');

            addMarker(new OpenLayers.LonLat(90, 10), 'third');


            map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.zoomToMaxExtent();

        }

    </script>

  </head>

  <body onload="init()">

    <div id="title">Marker Example</div>

    <div id="tags"></div>

    <div id="shortdesc">Makers with mouseover events</div>

    <div id="map" class="smallmap"></div>

  </body>

</html>