none
Bing Map V8: Pushpin icon SVG clickable area RRS feed

  • Question

  • Hi

    Here's a sample where I change the pushpin icon to a SVG containing a circle. The goal is to make the circle, and only the circle clickable. As you can see, the circle is clickable outside the circle area in the corners.

    Is there any way to make only the circle clickable?

    Please try this sample and paste in this piece of code in the typescript tab:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#addEventHandler+TS


    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
        credentials: 'Your Bing Maps Key'
    });
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="48" stroke="orange" stroke-width="4" fill="yellow" /></svg>',
        anchor: new Microsoft.Maps.Point(25, 25) });
                                      Microsoft.Maps.Events.addHandler(pushpin, 'click', function () {
             alert("Clicked");
            });
    map.entities.push(pushpin);
    Tuesday, June 7, 2016 11:07 AM

Answers

  • Good news, this feature is now in the experimental branch and ready for testing. I've tried it with a couple of differently shaped pushpins and was happy with the results. This is something I wish we had years ago in older versions of Bing Maps. You will also notice that the hover effect is also limited to this rounded area. To try this set the roundClickableArea pushpin option to true while using the experiemental branch. Here is a code example:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key'
    });
    
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { 
    	icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
        anchor: new Microsoft.Maps.Point(12, 39),
    	roundClickableArea: true });
    	
    Microsoft.Maps.Events.addHandler(pushpin, 'click', function(){
    	alert('here');
    });
    
    map.entities.push(pushpin);

    This will likely be in the next update to the main release branch planned for end of next week.


    [Blog] [twitter] [LinkedIn]


    Wednesday, July 27, 2016 5:59 PM
  • Pushpin click areas are always square. Traditionally pushpins only supported images which always have a square clickable area. In V8, SVGs are converted into images and then drawn on top of an HTML5 canvas. The map is unaware of the shape of your SVG when it comes to clicking.

    That said, if you want clickable area that is a circle, it is possible to achieve this using polygons. Although it is a bit more work and has a number of other limitations.


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 7, 2016 4:35 PM
  • Polygon points would be fixed to coordinates on the map. As you zoom the map the polygon will scale. Pushpins are images that are a fixed pixel size. If you wanted to use a polygon you would have to recalculate its points every time the zoom level changed so that it's pixel size is the desired size. Also, when calculating the points of a circle on a Mercator map, it is important to note that a circle doesn't render as a circle on a Mercator map, it is an ellipse that becomes elongated the closer you get to the poles. One final limitation is that the map will always render polygons below pushpins, so you can't use them as a clickable area.

    The suggestion I was making in my response is to use a polygon instead of a pushpin. If you want a fixed pixel size you would need to recalculate it on each zoom level and most of the other limitations I mentioned above would apply.


    [Blog] [twitter] [LinkedIn]

    Thursday, June 9, 2016 3:47 PM

All replies

  • Pushpin click areas are always square. Traditionally pushpins only supported images which always have a square clickable area. In V8, SVGs are converted into images and then drawn on top of an HTML5 canvas. The map is unaware of the shape of your SVG when it comes to clicking.

    That said, if you want clickable area that is a circle, it is possible to achieve this using polygons. Although it is a bit more work and has a number of other limitations.


    [Blog] [twitter] [LinkedIn]

    Tuesday, June 7, 2016 4:35 PM
  • Hi Ricky

    Thank you for the quick response.

    Could you tell me a bit more about the limitations that polygons might result in?


    • Edited by DV911 Thursday, June 9, 2016 6:44 AM
    Thursday, June 9, 2016 6:11 AM
  • Polygon points would be fixed to coordinates on the map. As you zoom the map the polygon will scale. Pushpins are images that are a fixed pixel size. If you wanted to use a polygon you would have to recalculate its points every time the zoom level changed so that it's pixel size is the desired size. Also, when calculating the points of a circle on a Mercator map, it is important to note that a circle doesn't render as a circle on a Mercator map, it is an ellipse that becomes elongated the closer you get to the poles. One final limitation is that the map will always render polygons below pushpins, so you can't use them as a clickable area.

    The suggestion I was making in my response is to use a polygon instead of a pushpin. If you want a fixed pixel size you would need to recalculate it on each zoom level and most of the other limitations I mentioned above would apply.


    [Blog] [twitter] [LinkedIn]

    Thursday, June 9, 2016 3:47 PM
  • I noticed the default pushpin's clickable area is a circle. Is this an option that could be eventually added to the SVG ones as well? A clickableArea property in the PushpinOptions?
    Thursday, July 14, 2016 12:44 PM
  • I had a chat with the dev team about this. You are correct, the default pushpin has a round clickable area, while all custom pushpins have a rectangular clickable area. The reason for this is that since the HTML5 canvas is used for rendering all map data, SVG's are converted into an image and image elements are rectangular. As such, the shape of the custom pushpin/SVG isn't known.

    That said, I'd like to run an idea by you to see if it would be a suitable solution potentially. I completely understand how a rectangular click area can cause issues for users if there is white space in there and a pushpin below. What if we provide a setting where instead of a rectangular click area and round (ellipse/circle) click area is generated from the rectangular area instead. For example:

    We could expose a simple pushpin option like;

    roundClickableArea: boolean  or  clickableAreaType: Enumeration of possible shapes in case a third shape type is to be supported (less likely).


    [Blog] [twitter] [LinkedIn]


    Thursday, July 14, 2016 6:38 PM
  • Here is an example for one of my current pushpin. The circle area as you described would be better than squares, but not perfect.

    We are also thinking of changing our pushpins and depending on the design we will chose, the rectangular clickable area might be more appropriate for that future version.

    I do not know if that would work for the API, but if possible, I believe the most flexible options for me would be to pass a polygon relative to the SVG extents as the clickable area. I understand that this might have performance impacts though.

    Thanks!

    Thursday, July 14, 2016 9:28 PM
  • Supporting a polygon click area for pushpins would have a noticeable performance impact. Going back to the rounded click area idea, here is the area it would cover for your pushpin:

    Not perfect, but definitely better. Since an ellipse is created using a width/height value which is already used for creating the rectangular clickable area, there shouldn't be much if any performance impact. I think this may be useful to have in the SDK for others as well. Will pass this by my dev team.


    [Blog] [twitter] [LinkedIn]

    Thursday, July 14, 2016 11:20 PM
  • Got it. I think this is a good workaround.
    Friday, July 15, 2016 12:30 AM
  • Good news, this feature is now in the experimental branch and ready for testing. I've tried it with a couple of differently shaped pushpins and was happy with the results. This is something I wish we had years ago in older versions of Bing Maps. You will also notice that the hover effect is also limited to this rounded area. To try this set the roundClickableArea pushpin option to true while using the experiemental branch. Here is a code example:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key'
    });
    
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { 
    	icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
        anchor: new Microsoft.Maps.Point(12, 39),
    	roundClickableArea: true });
    	
    Microsoft.Maps.Events.addHandler(pushpin, 'click', function(){
    	alert('here');
    });
    
    map.entities.push(pushpin);

    This will likely be in the next update to the main release branch planned for end of next week.


    [Blog] [twitter] [LinkedIn]


    Wednesday, July 27, 2016 5:59 PM
  • Great. I was going to give it a shot, but I receive a "Cannot read property 'rings' of undefined" error as soon as I switch the branch to experimental. I updated my code to test it out and will try again later. I am guessing this is a temporary problem.
    Tuesday, August 2, 2016 2:58 PM
  • Just tested experimental and not seeing that error. Can you test again.

    [Blog] [twitter] [LinkedIn]

    Tuesday, August 2, 2016 5:09 PM
  • So it turned out to be my bad... Because of the branch switch, I detected the wrong version and tried to load V7 modules instead of the V8 ones.

    Back on the feature, it works great, exactly as expected!

    Looking forward to have it on the release branch, thanks Ricky!

    Tuesday, August 2, 2016 5:40 PM