Our website selects establishments from a query and returns the results to the user in batches of 10 locations displaying details in a gridview and locations as user pushpins in bing maps. Hovering the item in the map pops up info panel etc.
My requirements to make this more useable are as follows:-
1) When a user hovers over the item in the gridview list, the corresponding pin on the map should be highlighted.
2) When a user clicks an item in the list, the map zooms to that location. (which I think is relatively simple by redrawing map with different centre and scale)
My thoughts for the first one are to use JavaScript to get the element of the associated pushpin and replace it with a new image in the ‘highlighted’ state and to replace it with the original afterwards.
So my question is:-
Is this the right approach or is there a better one and is there any sample code doing something similar available out there?
Many thanks
Paul
That’s exactly the approach I use 😉 The only slight modification I’d suggest is that, instead of replacing the image with an entirely new one, you make use of a sprite sheet that has both the highlighted and unhighlighted images on it.
Then, in the onmouseover event handler, set the typeName property of the pushpin to assign a CSS class that offsets the image to display only the highlighted state, and in the onmouseout event reset the CSS class again so that the unhighlighted background image is displayed. That way, your page will load quicker and you won’t have to risk a flicker as the old image is replaced with the new.
Reference for typeName property: http://msdn.microsoft.com/en-us/library/gg427629.aspx