none
Map cursor not always changing as it is told. RRS feed

  • Question

  • I have a listener on the map which checks to see what entity type the cursor is over and changes the cursor to a pointer if it is over certain markers.

    When the mouse goes over a marker it always changes to a pointer. When it moves back over the map, it usually does not change back to a hand, until I click the map somewhere.

    My cursor changing code is:

     

        changeCursor: function(map, cursor) {
    
            var mapElem = map.getRootElement();
    
            mapElem.style.cursor = cursor;
    
            console.log("Changed cursor to " + cursor)
    
        },
    
    I used the console.log to make sure the code was actually firing correctly and it is.

     

    Thanks for the extra set of eyes on this!

    Brad

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 12:49 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, January 17, 2012 7:16 PM

Answers

  • This is a hack of the API and will definately break at some point. An easier and supported method for changing the cusor of the pushpin is to assign a typeName property to the pushpin options and then create a CSS class with the same name and define the cursor value there. This way you don't need to mess with events.
    http://rbrundritt.wordpress.com
    Tuesday, January 17, 2012 9:02 PM
  • It took me a little bit of work to figure out how to actually implement this as some things are not as they seem. I wanted to give the details to help the next person who needed to do this.

    You need to include the typeName property when you create your pushpin: 

    var pin = new Microsoft.Maps.Pushpin(center,{

    icon:"BluePushpin.png", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50), draggable: true, typeName: "homeMarker"});

    The typeName property DOES NOT give the marker an ID, it adds a class, the homeMarker class in this case.

    Next we need to add some simple CSS:

    .homeMarker
    {
        cursor: pointer!important;
    }
    
    .homeMarker :hover
    {
        cursor: 'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur")!important;
    }
    

    The !important modifier is critical of else it will get overridden by the element's cursor style. That does it.

    What I am still missing is a list of the available cursors. I guess you need to supply your own if you want to make sure they do not change which is annoying.

    - Brad

    • Marked as answer by Brad Mathews Tuesday, October 23, 2012 5:22 PM
    Tuesday, October 23, 2012 5:22 PM

All replies

  • This is a hack of the API and will definately break at some point. An easier and supported method for changing the cusor of the pushpin is to assign a typeName property to the pushpin options and then create a CSS class with the same name and define the cursor value there. This way you don't need to mess with events.
    http://rbrundritt.wordpress.com
    Tuesday, January 17, 2012 9:02 PM
  • It took me a little bit of work to figure out how to actually implement this as some things are not as they seem. I wanted to give the details to help the next person who needed to do this.

    You need to include the typeName property when you create your pushpin: 

    var pin = new Microsoft.Maps.Pushpin(center,{

    icon:"BluePushpin.png", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50), draggable: true, typeName: "homeMarker"});

    The typeName property DOES NOT give the marker an ID, it adds a class, the homeMarker class in this case.

    Next we need to add some simple CSS:

    .homeMarker
    {
        cursor: pointer!important;
    }
    
    .homeMarker :hover
    {
        cursor: 'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur")!important;
    }
    

    The !important modifier is critical of else it will get overridden by the element's cursor style. That does it.

    What I am still missing is a list of the available cursors. I guess you need to supply your own if you want to make sure they do not change which is annoying.

    - Brad

    • Marked as answer by Brad Mathews Tuesday, October 23, 2012 5:22 PM
    Tuesday, October 23, 2012 5:22 PM