Drawing anything through International dateline
Hi, it will not be a question but rather an info for people, who are struggling with drawing anything like Shapes, Polyline etc. on the border of International dateline. So I was searching the Internet and there is a very little info about this stuff - rather there are always questions how to do it or that people get some artifacts while attempting to draw anything across International dateline.
One of the solution which I found on this forum and in the Internet is to separate a shape/line into several parts/legs. It is possible to do it but it is much more difficult and inefficient to the method which I would like right here introduce.
Probably you already know that in order anything on the map you have change mapPoint with Lat/Long into coordinates of WebMercartor using WebMercatorUtil.geographicToWebMercator method. So i.e. if we want to draw a trip from Barcelona to Osaka with following points:
var coordinates:Array = [ WebMercatorUtil.geographicToWebMercator(new MapPoint(3.5, 42)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-0.9, 37.3)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-8, 36)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-19, 43)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-40, 56)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-52, 62)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-77, 73)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-90, 74.4)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-103.8, 74.05)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-112.7, 73.9)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-118, 72.8)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-120.8, 70.9)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-133.7, 71.2)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-151.7, 71.61)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-158, 71.8)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-165.7, 70.4)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-169.3, 66.5)), WebMercatorUtil.geographicToWebMercator(new MapPoint(-172.1, 64.2)), //-------------------------------------------------------------------------------------------------- crossing WebMercatorUtil.geographicToWebMercator(new MapPoint(177.1, 61.7)), WebMercatorUtil.geographicToWebMercator(new MapPoint(165.4, 57.0)), WebMercatorUtil.geographicToWebMercator(new MapPoint(153.9, 47.9)), WebMercatorUtil.geographicToWebMercator(new MapPoint(142.6, 36.6)), WebMercatorUtil.geographicToWebMercator(new MapPoint(134.1, 33.9)) ];
we will get path like this one:
It is not what we exactly want to achieve because our intention was to cross International datetime line. But from perspective of given to us API... everything works correctly 
For listed above MapPoints, algorithm insinde WebMercatorUtil.geographicToWebMercator method understands that it should return coordinates for single world instance - and that is what it is doing exactly.
Solution to this problem is very easy but not documented at all and not so obvious (at least it wasn't for me). In order to draw anything across dateline we have to extend our longitudes above -180 or 180 limit. So working on the same example as above - fixed longitudes would look like these ones:
WebMercatorUtil.geographicToWebMercator(new MapPoint(-182.9, 61.7)), //177.1 -> -180 - (180-177.1) -> -182.9 WebMercatorUtil.geographicToWebMercator(new MapPoint(-194.6, 57.0)), //165.4 -> -180 - (180-165.4) -> -194.6 WebMercatorUtil.geographicToWebMercator(new MapPoint(-206.1, 47.9)), //153.9 -> -180 - (180-153.9) -> -206.1 WebMercatorUtil.geographicToWebMercator(new MapPoint(-217.4, 36.6)), //142.6 -> -180 - (180-142.6) -> -217.4 WebMercatorUtil.geographicToWebMercator(new MapPoint(-225.9, 33.9)) //134.1 -> -180 - (180-134.1) -> -225.9
So whenever we want to cross a datetime line - we just have to add calculated offset to 180 (when we are going in RIGHT) or subtract it from -180 (when we are going in LEFT direction). With such approach - it is very easy to draw really complex shapes like this one (the white dotted line in International dateline):
Knowing how this stuff works - this should be right now very easy for any developer to draw a complex shapes on the map wrapped around the world I hope that it will help some people
