none
world wrap issue : polygon and polyline not handling 170 degree to 190 degree longitude as expected (especially when moving a polyline or polygon on map) RRS feed

  • Question

  • var polyline1 = new Microsoft.Maps.Polyline(

    [
    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(175.185902404785)), 
    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(195.185902404785)), 
    ], null); 

    I am looking to draw a line between 175 and 195 but without creating 2 polylines with below code I could't find a better way.And I don't think this workaround will work for polygon

    var polyline1 = new Microsoft.Maps.Polyline(
    [
    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(175.185902404785)), 
    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(180)), 
    ], null); 


    var polyline2 = new Microsoft.Maps.Polyline(
    [

    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(-180)), 
    new Microsoft.Maps.Location(30.620998382568388, Microsoft.Maps.Location.normalizeLongitude(195.185902404785))
    ], null); 

    if you execute the example for about 20 times and pay attention to pacific ocean(where 190 degree will become -170 degree) in below link , you will understand what I mean : http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#deletePolygons+JS



    • Edited by diying Thursday, June 22, 2017 12:04 AM
    Monday, June 5, 2017 7:54 PM

Answers

  • This is known as the "world wrap" issue and is a common hurdle in most mapping APIs. The team started adding some support for this in the experimental branch recently. For example, go to this sample: https://www.bing.com/api/maps/mapcontrol/isdk?autoRedirect=false#addDefaultPolyline+JS

    paste this code and run it:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'Your Bing Maps Key', zoom: 1 }); var polyline = new Microsoft.Maps.Polyline( [ new Microsoft.Maps.Location(30.620998382568388, 175.185902404785),  new Microsoft.Maps.Location(30.620998382568388, 195.185902404785),  ], null); 

    map.entities.push(polyline);

    No need to normalize your coordinates here. 

    The main release branch will be updated with this functionality in the next week or two. You can try this today in your app by adding "&branch=experimental" to the map script URL.


    [Blog] [twitter] [LinkedIn]

    Monday, June 5, 2017 8:03 PM