Adding a label on Polygons and Polylines


  • Is there a built in way to do this?  I've searched for examples of this and haven't found any. I saw that this is possible with PushPins by setting the text property on the PushPinOptions.



    Wednesday, July 03, 2013 2:13 PM


  • Your best option is to add a custom HTML pushpin on top of the polygon or polyline that has your label. For example:

    The main thing you will need to do is determine where to place the label. For polylines simply choose the middle coordinate in the array of coordinates i.e. var location = polylineCoordinates[Math.round(polylineCoordinates.length/2)];

    For polygons its a bit more difficult. I recommend looping through the coordinates and calculating the average latitude and longitude values. i.e.

    var avgLat = 0, avfLong = 0;

    for(var I = 0; I< polyCoords.length; I++){

    avgLat += polyCoords[I].latitude;

    avgLong += polyCoords[I].longitude;

    avgLat /= polyCoords.length;

    avgLong /= polyCoords.length;

    var location = new Microsoft.Maps.Location(avgLat, avgLong);

    Thursday, July 04, 2013 11:29 AM