Samples/Polylines/Prevent Polylines from Crossing the Anti-Merdian/Prevent Polylines from Crossing the Anti-Merdian.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prevent Polylines from Crossing the Anti-Merdian - Bing Maps Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to modify polylines sby adding an additional midpoint location to each segment of the polyline which is visually accurate to keep the lines looking striaght." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="screenshot.jpg" />
    
    <script>
    var map, originalLocations, line;

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(0, 0),
            zoom: 1
        });

        //Load the Spatial Math module.
        Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath");

        //Create array of locations for a polyline that would cross the anti-merdian.
        originalLocations = [
            new Microsoft.Maps.Location(36.218156, -115.254462),
            new Microsoft.Maps.Location(-33.893142, 151.127501),
            new Microsoft.Maps.Location(43.707167, -79.386728)
        ];

        //Create a polyline to render on the map.
        line = new Microsoft.Maps.Polyline(originalLocations);
        map.entities.push(line);
    }

    function updatePolyline(crossAntiMerdian) {
        if (crossAntiMerdian) {
            //Allowed to cross the anti-merdian, let the map render the polyline as it normally would. In this case update the poolyline with the original locations.
            line.setLocations(originalLocations);
        } else {
            //Don't cross the anti-merdian, calculate visual midpoints for each segment of the polyline.
            var locs = line.getLocations();
            var newLocs = [locs[0]];

            for (var i = 1; i < locs.length; i++) {
                //Calculate global pixel values of current and last location at zoom level 19.
                var p1 = Microsoft.Maps.SpatialMath.Tiles.locationToGlobalPixel(locs[i - 1], 19);
                var p2 = Microsoft.Maps.SpatialMath.Tiles.locationToGlobalPixel(locs[i], 19);

                //Calculate mid-point pixel value.
                var midPoint = new Microsoft.Maps.Point((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);

                //Convert midPoint into location at zoom level 19 and add to array.
                newLocs.push(Microsoft.Maps.SpatialMath.Tiles.globalPixelToLocation(midPoint, 19));

                //Add current location.
                newLocs.push(locs[i]);
            }

            //Update the line with the new locations.
            line.setLocations(newLocs);
        }
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:500px;height:500px;"></div>
    
    <br/>

    Allow crossing anti-merdian:     
    <input type="button" value="No" onclick="updatePolyline(false)" />
    <input type="button" value="Yes" onclick="updatePolyline(true)" />

    <fieldset style="width:800px;margin-top:10px;">
        <legend>Prevent Polylines from Crossing the Anti-Merdian Sample</legend>
        By default, polylines will render such that they take the shortest path between two points. 
        This means that sometimes the shortest path is to cross the anti-merdian (180/-180 longitude). 
        This is spatially accurate however sometimes it may be designered to show the map centered at (0,0) and all lines within within a single map view without crossing the anti-merdian.
        This sample shows how to modify polylines sby adding an additional midpoint location to each segment of the polyline which is visually accurate to keep the lines looking striaght. 
        This is not spatially accurate. 
    </fieldset>

    <script>
        // Dynamic load the Bing Maps Key and Script
        // Get your own Bing Maps key at https://www.microsoft.com/maps
        (async () => {
            let script = document.createElement("script");
            let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
            script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
            document.body.appendChild(script);
        })();
    </script>
</body>
</html>