CODEWITHSUNDEEP
javascriptbing-maps
Duncan Gravill
Duncan Gravill

Reputation: 4672

Is it possible to capture events of internally created bing maps entities?

I am using the Bing Maps AJAX Control 7.0

I would like to add a custom event handler to the pushpins that are part of a driving route.

I know how to add custom events to map entities I have created myself and have a reference to. But the entities that make up a driving route are created internally and automatically added to the map. Is there a way I can attach and event handler either before or after they are added to the map?

Specifically I would like to add a custom onmouseover event to the waypoint pushpins that are on the driving route so that a custom icon is displayed when hovered over. I have read a suggestion to add a css class with pseudo :hover selector to the pushpins through the typeName property in the PushpinOptions but this does not work. The AJAX control itself uses the javascript event to change the icon image on mouse over, so setting the background css property on :hover never works, it gets covered up by the default hover icon.

I need to add a custom onmouseover event to the driving waypoint pushpins so that I can display a custom icon and disable the default behaviour. How do I do this? Thanks.

Upvotes: 0

Views: 534

Answers (2)

Duncan Gravill
Duncan Gravill

Reputation: 4672

I have discovered that there is an undocumented property of the PushpinOptions object - hoverIcon

I added some code to the directionsUpdated event of the DirectionsManager object that iterated through the entities on the map. I looked at the Waypoint entities and saw they have both _icon and _hoverIcon internal properties. As there is an icon property in the PushpinOptions I checked to see if a hoverIcon property could be used as well, and it can!

As far as I know the hoverIcon property is not documented. But this is a much easier way and probably the proper way to add a custom hover image to a pushpin.

It would help if this was reported to Micorsoft so they can update their documentation. I have never reported a documentation error to Microsoft before so if you know the best way to do this please let me know.

Upvotes: 1

Bojin Li
Bojin Li

Reputation: 5799

The only solution I can think of is to examine the HTML output of the drive route pushpins and hack their event bubbling. I examined the HTML of the drive route pushpins, and with V7 ajax api their id all seem to start with the prefix DDWaypointPushpin. So the hacky solution will be to find these pushpins in the DOM and override the default event handlers on them somehow. For example, if you wanted to prevent the default behavior of the mouseover event on the pushpins, you can match the id string using jquery and bind to the mouseover event, and prevent it from bubbling up.

        $("div[id*='DDWaypointPushpin']").bind('mouseover', function (e) {
            //$(this) will match your pushpin div, do whatever you want with it
            // Stop the event from bubbling up, so the default MS mouseover behavior is prevented
            e.stopPropagation();
        });

If you want to display a custom icon, in your mouseover handler look for the <img> element under $(this), and change its src attribute to whatever you like.

Upvotes: 1

Related Questions