push pins and background

mhodder

Hi,

with the help of this forum I have managed to get pins to display on the map > Change the background when clicked to indicate it has been selected - then when clicked again the backgound is removed to inicate is is not selected.

Now I want to load the page with all the pins initially selected

So i do :-

AddClickablePin(1,-0.459610397815704,51.6549480199814,"./bcirclesm.png","Name 1","A3");

then I set the background using :-

document.getElementById(1).style.backgroundColor="yellow";

When dipalyed they all have the right background.

The thing is that when i now click on them the backgorund does not change even though the test for colour seems to work.

Has anyone else seen this or am I doing something wrong

Thanks

martin

Derek Chan

Martin,

A couple of things I'm noticing:

1) Assuming your using the code from the wiki, your method signature isn't matching:
AddClickablePin(location, icon_url, title, details, iconStyle)

Using your signature below will generate an error:
AddClickablePin(1,-0.459610397815704,51.6549480199814,"./bcirclesm.png","Name 1","A3");

2) I'm able to get a background change running off a pinID on page load. I suspect that its a bug somewhere in your code. If I could see a sample code that duplicates the problem that your having that would help.

Thanks,

mhodder

Hi Derek,

Thanks for your reply.

This code illustrates the problem:-

// set up a map and initial type
map = new VEMap('myMap');
map.LoadMap(new VELatLong(53.23234504,-1.54907227),7,'h', false);

// Attach a click event to the map
// map.AttachEvent('onclick', HandleClick);

AddClickablePin(1,-0.459610397815704,51.6549480199814,"","Panel Name 1","A3<br>B2<br>C2<br>D1");
AddClickablePin(2,-0.437193460464478,51.672523868084,"","Panel Name 2","A1<br>B3<br>C3<br>D3");
AddClickablePin(3,-0.508752627372742,51.6899113297462,"","Panel Name 3","A3<br>B2<br>C3<br>D3");
AddClickablePin(4,-0.401508350372314,51.5937400221825,"","Panel Name 4","A2<br>B2<br>C3<br>D1");
AddClickablePin(5,-0.464131588935852,51.6659603238106,"","Panel Name 5","A1<br>B2<br>C2<br>D1");
AddClickablePin(6,-0.474626798629761,51.6390231013298,"","Panel Name 6","A3<br>B2<br>C3<br>D3");

// Get basic Background colour
originalcolour = document.getElementById(6).style.backgroundColor;

// Set background to yelloW initally - IF YOU COMMENT OUT THIS BLOCK YOU WILL SEE THE EFFECT I HAVE WORKING
document.getElementById(1).style.backgroundColor="yellow";
document.getElementById(2).style.backgroundColor="yellow";
document.getElementById(3).style.backgroundColor="yellow";
document.getElementById(4).style.backgroundColor="yellow";
document.getElementById(5).style.backgroundColor="yellow";
document.getElementById(6).style.backgroundColor="yellow";

// now set the view to all the pins

map.SetMapView(locs);
}

// Add a clickable pin

function AddClickablePin(pinID, x,y, icon_url, title, details)
{
var loc = new VELatLong(y,x);
locs.push(loc);
var pin = new VEPushpin(pinID, loc, icon_url, title, details);
map.AddPushpin(pin);
var element = document.getElementById(pinID);
element.onclick = EventHandlerOnClick;
element.title = details;
}

//get the information from the pin

function EventHandlerOnClick(e)
{

if (e!=null)
{
document.getElementById(e.currentTarget.id + "_" + map.GUID).onmouseover();
}
else
{

//alert(window.event.srcElement.id)

if(originalcolour == document.getElementById(window.event.srcElement.id).style.backgroundColor)
{
alert("turning point yellow");
document.getElementById(window.event.srcElement.id).style.backgroundColor="yellow";
}
else
{
alert("point is yellow");
document.getElementById(window.event.srcElement.id).style.backgroundColor=originalcolour;
};

}
}

</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:absolute; left:1px; top:1px; width:100%; height:100%;"></div>
</body>
</html>

See if that helps you see the problem

Derek Chan

Anyhow, rather than storing the originalColour that way, you can manually set the colour. In this case, its "transparent" so you can change your lines to look like this:

document.getElementById(window.event.srcElement.id).style.backgroundColor="transparent";

Hope that helps.

mhodder

Hi Derek,

Thanks again for your input.

I did change the line but it had no effect - it seems the matching is working ie it knows the point is yellow but the change background has no effect!

I am still looking into this - but just in case you had any other ideas!

Thanks

Derek Chan

Okay it seems to be some strange rendering issues with internet explorer. If I take out the comments in your commented section, your code will work if I switch between yellow and red, but fails for yellow and transparent. However, inside the code it understands that the window has changed to transparent colour (because it switches between the if statements and displays different alerts), however the browser is unable to render it properly.

mhodder

Hi Derek,

Thanks for your help. That is the conclusion I came to but was hoping i had done something wrong. It there a place where we can report bugs

Regards

push pins and background

Re: push pins and background

Re: push pins and background

Re: push pins and background

Re: push pins and background

Re: push pins and background

Re: push pins and background