CODEWITHSUNDEEP
bing-mapsbing-api
Ruben Rizzi
Ruben Rizzi

Reputation: 352

Bing map hover waypoint pushpin icons

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?

Upvotes: 3

Views: 2338

Answers (2)

pixelfreak
pixelfreak

Reputation: 17834

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!

Upvotes: 2

Nikhil Kothari
Nikhil Kothari

Reputation: 5225

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.

Upvotes: 0

Related Questions