0

I want to rotate my pushPin(marker) based on heading on the Bing Map. Code is : 

var location = new Microsoft.Maps.Location(data[index].latitude, data[index].longitude);
    var pushpinOptions = {
        icon: "/images/carMarker.png",
        width: 50,
        height: 50,
        anchor: new Microsoft.Maps.Point(10, 40),
        typeName: 'carMarker'
    };
    map.entities.remove(carPin);
    carPin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
    map.entities.push(carPin);

I am able to draw the markers over the map but I am unable to rotate the markers. Please any one help. Thankyou.

rbrundritt
  • 16,570
  • 2
  • 21
  • 46
Ishaan Nigam
  • 83
  • 1
  • 10
  • The question regarding openlayer animation has fixed the jsFiddle demo http://stackoverflow.com/questions/20410175/drawing-animated-openlayers-linestring-path/20481018?noredirect=1#comment58636849_20481018 – Juan Carlos Oropeza Feb 18 '16 at 03:39

1 Answers1

0

If you are targeting browsers that support CSS3, you can use the transform property, see: http://www.w3schools.com/cssref/css3_pr_transform.asp

.carMarker {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

If you don't, then you'll have to generate N version of your icon and change it in the icon property and change the anchor to be in the center or your common icon.

See also, Cross browser way to rotate image using CSS?

Community
  • 1
  • 1
Nicolas Boonaert
  • 2,954
  • 1
  • 20
  • 28
  • How to change this rotation via js? – Ishaan Nigam Jan 11 '16 at 17:17
  • Using JS you will want to use htmlContent for the pushpin and then programmatically generate the HTML with inline style values that have the rotate value. Take a look at these examples: https://blogs.bing.com/maps/2013/04/10/html5-canvas-pushpins-in-javascript/ https://blogs.bing.com/maps/2015/02/05/visualizing-point-based-business-intelligence-data-on-bing-maps/ – rbrundritt Jan 11 '16 at 17:43