Question

I’m using the Bing Maps Android SDK and I’m looking for a way to click on the polygons that I have created and show an infobox. I’ve been able to accomplish this for a pushpin, but not for a polygon. I have seen this answer, but my app needs will make hundreds of such polygons, and I’m looking for a faster solution using the addHandler method on polygons. I know this is possible for the AJAX v7 flavour of the SDK, which is the underlying base of the Android SDK.

The code I tried for the AJAX version (tested using this emulator.)

map.entities.clear(); 
latlon = map.getCenter(); 

var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(latlon.latitude, latlon.longitude-0.15), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude-0.05), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude+0.05), new Microsoft.Maps.Location(latlon.latitude, latlon.longitude+0.15), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude+0.05), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude-0.05), new Microsoft.Maps.Location(latlon.latitude, latlon.longitude-0.15)], null);  
Microsoft.Maps.Events.addHandler(polygon, 'click', DisplayInfo);

map.setView( {zoom:10}); 
map.entities.push(polygon);

function DisplayInfo (e) {
    var vertices = e.target.getLocations();
    var verticeCenter = new Microsoft.Maps.Location(0,0);

    //Calculating location of center
    for (i=0; i<vertices.length-1; i++) {
        verticeCenter.latitude = verticeCenter.latitude + vertices[i].latitude;
        verticeCenter.longitude = verticeCenter.longitude + vertices[i].longitude;
    }
    verticeCenter.latitude = verticeCenter.latitude / (vertices.length - 1);
    verticeCenter.longitude = verticeCenter.longitude / (vertices.length - 1);
    defaultInfobox = new Microsoft.Maps.Infobox(verticeCenter, {width: 200, height: 50} );    
    map.entities.push(defaultInfobox);
}

However, I pushed a similar code to the BingMapsAndroid.js from the assets folder of the SDK, but that doesn’t work. The handler is attached, as I checked using the hasHandler method. Touches are recorded and their lat and long values are sent to the log, but the polygon event is not evoked even when the touch lies inside a polygon.

Polygon test function in BingMapsAndroid.js:

this.PolygonTest = function() {
    _map.entities.clear(); 
    latlon = new Microsoft.Maps.Location(1,1); 
    console.log("Polygon test function");
    var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(latlon.latitude, latlon.longitude-0.15), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude-0.05), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude+0.05), new Microsoft.Maps.Location(latlon.latitude, latlon.longitude+0.15), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude+0.05), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude-0.05), new Microsoft.Maps.Location(latlon.latitude, latlon.longitude-0.15)], null);  

    try {
    Microsoft.Maps.Events.addHandler(polygon, 'click', function(e) { console.log("Polygon click!"); }); //This is never evoked
    Microsoft.Maps.Events.addHandler(_map, 'click', function(e) { var point = new MM.Point(e.getX(), e.getY()); var loc = e.target.tryPixelToLocation(point); console.log("lat: " + loc.latitude + ", lon: " + loc.longitude); });

    } catch(e) {
        alert("Error");
    }

    _map.setView( {zoom:10}); 
    _map.entities.push(polygon);

    if (Microsoft.Maps.Events.hasHandler(polygon,'click')) {
        console.log("Polygon has click handler."); //This works
    }

    //This function should be added to the click handler for polygon. I'll add it when I know the handler works.
    function DisplayInfo (e) {
        console.log("Polygon has been clicked.");
        var vertices = e.target.getLocations();
        var verticeCenter = new Microsoft.Maps.Location(0,0);
        for (i=0; i<vertices.length-1; i++) {
            verticeCenter.latitude = verticeCenter.latitude + vertices[i].latitude;
            verticeCenter.longitude = verticeCenter.longitude + vertices[i].longitude;
        }
        verticeCenter.latitude = verticeCenter.latitude / (vertices.length - 1);
        verticeCenter.longitude = verticeCenter.longitude / (vertices.length - 1);
        defaultInfobox = new Microsoft.Maps.Infobox(verticeCenter, { width: 200, height: 50 });
        _map.entities.push(defaultInfobox);
    }
}

Answer 1

After much testing, I found the issue lies in Android. I tried the code on Bing Maps Interactive SDK for AjaxV7 and these are my results:

• Desktop browsers: works (as written in the question)
• iPhone 4S: works
• Android 2.3.4 with default browser: does not work
• Android 2.3.4 with Opera: works
• Android ICS with Opera: works
• Android ICS with default browser: does not work