3

i'm developing a web application with bing map. I used this method to change the waypoint pushpin icon:

directionsManager.setRenderOptions({
        itineraryContainer: document.getElementById('itineraryDiv'),
        waypointPushpinOptions: {
            icon: "/images/citta-nascosta/blue-pushpin.png", 
            height:29, 
            width:25, 
            draggable:false, 
            textOffset:new Microsoft.Maps.Point(-1,3)
        }
});

Then i render the map with:

directionsManager.calculateDirections();

In the site i see the pushpin with my custom icons, but i also want to change the icon in hover (actually i see the hover standard icon, the blue flag).

Someone know how to set a custom hover waypoint pushpin icon? Or prevent the mousehover event?

Ruben Rizzi
  • 342
  • 1
  • 3
  • 20

2 Answers2

2

Try using hoverIcon inside waypointPushPinOptions like so:

directionsManager.setRenderOptions({
        itineraryContainer: document.getElementById('itineraryDiv'),
        waypointPushpinOptions: {
            icon: "/images/citta-nascosta/blue-pushpin.png",
            hoverIcon: "/images/citta-nascosta/blue-pushpin-hover.png", 
            height:29, 
            width:25, 
            draggable:false, 
            textOffset:new Microsoft.Maps.Point(-1,3)
        }
});

This property is undocumented. If Microsoft wants to get their map API adopted more, they should really get their act together instead of paying companies to use it. Very sloppy!

pixelfreak
  • 17,714
  • 12
  • 90
  • 109
0

You can set the typeName property on the options object when creating the pushpin. This gets set as a the class name of the containing the pushpin.

Example - if you set typeName to 'waypoint', then in your css you could have:

div.waypoint {
  /* normal settings */
}
div.waypoint:hover {
  /* hover settings */
}

Alternatively you could subscribe to the mouse events on the pushpin and in response change the typeName property on the pushpin and have different css rules apply (if the :hover pseudo class doesn't work)

Hope that helps.

Nikhil Kothari
  • 5,215
  • 2
  • 22
  • 28
  • Hi Nikhil, I am having the same problem as Ruben. I have tried the approach you have suggested but it doesn't work. The problem is that pushpins that are waypoints on a driving route already have mouseover and mouseout event handlers attached, so even if we give it a css class the event handlers are still firing and changing the pushpin icon. I know how to attach events to pushpins I create myself but I would really like to know how to subscribe to the mouse events for the pushpins that are created automatically as part of driving routes. Can you explain how to do this? – Duncan Gravill May 16 '12 at 03:11