Samples/Spatial Math/Select line segment of Polyline/Select line segment of Polyline.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Select line segment of Polyline - 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 use the Spatil Math module to calculate which part of a polyline was selected." />
    <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, highlightLayer;

    function GetMap()
    {
        map = new Microsoft.Maps.Map('#myMap', {});      

        //Load the Spatial Math modules.
        Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
            //Create a random polyline, that has 5 locations and is half the size of the map view.
            var line = Microsoft.Maps.TestDataGenerator.getPolylines(1, map.getBounds(), 5, 0.5, { strokeColor: 'blue', strokeThickness: 3 });
            map.entities.push(line);

            //Add a click event to the polyline.
            Microsoft.Maps.Events.addHandler(line, 'click', lineClicked);

            //create a layer to display the highlight line segment
            highlightLayer = new Microsoft.Maps.Layer();
            map.layers.insert(highlightLayer);
        });
    }

    function lineClicked(e) {
        highlightLayer.clear();

        var clickLocation = e.location;
        var line = e.target;

        var lineSegment = getLineSegment(clickLocation, line);

        if (lineSegment) {
            //Create a polyline to highlight the line segement.
            highlightLayer.add(lineSegment.path);
        }
    }

    function getLineSegment(loc, line){
        var locs = line.getLocations();

        var minDistance = Number.MAX_VALUE;
        var lineSegment = null;
        
        //Loop through each pair of locations in the polyine and calculate the distance from the clicked location.
        for(var  i=0, len = locs.length - 1; i < len; i++){
            var path = new Microsoft.Maps.Polyline([locs[i], locs[i + 1]], { strokeColor: 'red', strokeThickness: 3 });

            var d = Microsoft.Maps.SpatialMath.Geometry.distance(loc, path);

            if (d < minDistance) {
                minDistance = d;
                lineSegment = {
                    startIdx: i,
                    endIdx: i + 1,
                    path: path
                };
            }
        }
        
        return lineSegment;
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>

    <fieldset style="width:800px;margin-top:10px;">
        <legend>Select line segment of Polyline Sample</legend>
        This sample shows how to use the Spatil Math module to calculate which part of a polyline was selected.
    </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>