[OpenLayers-Users] markers and info bubbles
bradleyspencer
brad at cubewerx.com.au
Wed Apr 25 18:52:50 EDT 2007
I am still having problems with this – can anyone help me?
I want to create a bunch of markers that show information (info bubble) when
you roll the mouse over them. I have not used the popup functions preferring
to create a marker then create its rollover event. I can get the markers
onto the map just fine but the info in the info bubble on each marker is the
same as the last marker info in the list. I have been advised that I should
make the event unique but I do not know how to do this in javascript/OL.
To see how this is not working go to my application at
http://koalas.cubewerx.getmyip.com/koala_demo.html you will need to select
‘Dickson’ in the Electoral Bdy Select box (lower left) and mouseover the
Koala icons on the map.
The code I use to create the marker in my application is as follows:
// OK now go and fetch the data from mySQL DB if query string present
if (query != "?")
{ ajaxMySQL(mySQL, query, file);
if (!ajaxRequest.responseXML) {alert ("No matches in
Koala Sighting database for this query"); return false; }
var j=0;
var m=[];
var koalaSitings =
ajaxRequest.responseXML.getElementsByTagName("Sitings");
// Initialise Marker layer
if (markers) { markers.removeMarker(markers);
markers.clearMarkers(); }
markers = new OpenLayers.Layer.Markers( "Koala
Sightings" );
map.addLayer(markers);
var size = new OpenLayers.Size(20,20);
var offset = new
OpenLayers.Pixel(-(size.w/2), -size.h/2);
var icon = new
OpenLayers.Icon(koalaIcon,size,offset);
// process each Koala siting
//alert(koalaSitings.length);
for (i=0; i<koalaSitings.length; i++)
{
// Get cordinates of Siting
var siteLon=
koalaSitings[i].getAttribute("lng");
var siteLat=
koalaSitings[i].getAttribute("lat");
//alert (siteLon+" : "+siteLat);
// Get attribute data of Siting
if
(koalaSitings[i].getElementsByTagName("Name")[0])
{var sitingName=
koalaSitings[i].getElementsByTagName("Name")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Contact")[0])
{var sitingContact=
koalaSitings[i].getElementsByTagName("Contact")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Date")[0])
{var sitingDate=
koalaSitings[i].getElementsByTagName("Date")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Time")[0])
{var sitingTime=
koalaSitings[i].getElementsByTagName("Time")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Type")[0])
{var sitingType=
koalaSitings[i].getElementsByTagName("Type")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("ElectoralBdy")[0])
{var sitingElectoralBdy=
koalaSitings[i].getElementsByTagName("ElectoralBdy")[0].firstChild.nodeValue
;}
if
(koalaSitings[i].getElementsByTagName("LocalGovt")[0])
{var sitingLocalGovt=
koalaSitings[i].getElementsByTagName("LocalGovt")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Suburbs")[0])
{var sitingSuburbs=
koalaSitings[i].getElementsByTagName("Suburbs")[0].firstChild.nodeValue;}
if
(koalaSitings[i].getElementsByTagName("Description")[0])
{var sitingDescription=
koalaSitings[i].getElementsByTagName("Description")[0].firstChild.nodeValue;
}
if
(koalaSitings[i].getElementsByTagName("Photo")[0])
{var sitingPhoto=
koalaSitings[i].getElementsByTagName("Photo")[0].firstChild.nodeValue;}
//alert(sitingDescription);
// Build the Marker for each Siting
marker= new OpenLayers.Marker(new
OpenLayers.LonLat(siteLon,siteLat), icon.clone());
marker.setOpacity(1.0);
// this event creates the mini report of
attibutes
marker.events.register('mouseover',
marker, function(evt)
{
// Get the location of the
mouse when entering object
var mx=0; var my=0;
if(document.all)
{ mx=
window.event.clientX; my=window.event.clientY; }
else
{ mx= evt.pageX;
my= evt.pageY;}
var posx = mx+"px"; var posy
= my+"px";
// set up the mini report of
attributes for the tooltip
var atts =
document.getElementById("attributes");
atts.innerHTML = "<img
src='"+sitingPhoto+"' align='center' /><br/>";
atts.innerHTML += "<b>Name :
</b>"+sitingName+"<br/><b>Contact : </b>"+sitingContact+"<br/><b>siting
Date: </b>"+sitingDate+"<br/><b>Time of day :
</b>"+sitingTime+"<br/><b>Sighting Type : </b>"+sitingType+"<br/><b>Comm
Election Bdy : </b>"+sitingElectoralBdy+"<br/><b>Local Govt :
</b>"+sitingLocalGovt+"<br/><b>Suburb :
</b>"+sitingSuburbs+"<br/><b>Description : </b>"+sitingDescription;
// make adjustment to the
div within thge map div
atts.style.position='absolut
e';
atts.style.top=posy;
atts.style.left=posx;
atts.style.display='block';
Event.stop(evt);
});
// this event just clears out the
attribute data
marker.events.register('mouseout',
marker, function(evt)
{
var atts =
document.getElementById("attributes");
atts.innerHTML="";
atts.style.display='none';
Event.stop(evt);
});
// now add marker to map
markers.addMarker(marker);
}
}
}
Brad Spencer
General Manager
CubeWerx Australia Pty Ltd
ABN: 37 115 163 285
Mob: +61 (0)404 841 131
Tel/Fax: +61 (0)2 9481 7024
mailto:brad at cubewerx.com.au
http://www.cubewerx.com.au
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20070426/eee9d40c/attachment.html
More information about the Users
mailing list