[OpenLayers-Users] FramedCloud Offset Issue

Wed Mar 9 09:18:01 EST 2011

Hi,

I have an example (below) where I add a new marker (specified manually
not via a feature layer). When I add a popup using the marker's icon
as an anchor I'm finding it doesn't line up and I can't figure out
what the issue is.

I know that I can specify an anchor by providing my own object
implementing size and offset, but I'd expect this to work so I'm just
keen to find out what the issue is.

Any help would be appreciated.

<html>
	<head>
		<title>Marker Example</title>
		<script type="text/javascript" src="Template 3.js"></script>
		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<style>
		.smallmap {
			border: 1px solid #CCCCCC;
			height: 426px;
			width: 852px;
		}
		</style>
		<script type="text/javascript">
		var map, layer, markers;

		function setupOpenLayers() {
			map = new OpenLayers.Map('map');
			layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
						"http://vmap0.tiles.osgeo.org/wms/vmap0",
						{layers: 'basic'});
			map.addLayer(layer);
			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);
			var marker = new OpenLayers.Marker(new OpenLayers.LonLat(0, 0), icon);
			marker.events.register('mousedown', marker, function(evt) {
showPopup2(evt, this) });
			markers.addMarker(marker);
			map.zoomToMaxExtent();
		}

		function showPopup2(evt, marker) {
			var popup = new OpenLayers.Popup.FramedCloud(
					"Feature Information", marker.lonlat, new OpenLayers.Size(100, 50),
                    "this is some <b>html</b> text", marker.icon, true);
			markers.map.addPopup(popup);
			OpenLayers.Event.stop(evt);
		}
		</script>
	</head>
	<body onload="setupOpenLayers();">
		<div id="map" class="smallmap"></div>
	</body>
</html>