AzureMapsCodeSamples/Samples/Spatial Analysis/GeoJSON Routing/Route along GeoJSON network.html at main · Azure-Samples/AzureMapsCodeSamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Route along GeoJSON network - Azure Maps Web SDK 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 calculate the shortest route path between two points on a network of lines stored in a GeoJSON file. " />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, shortest path, routing, route, directions, spatial math, maritime trade routes, spatial analysis" />
    <meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
    <meta name="screenshot" content="screenshot.jpg" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <!-- Load turf.js a spatial math library. https://turfjs.org/ -->
    <script src="/lib/turf.min.js"></script>

    <!-- Load the GeoJSON path finder library -->
    <script src="/spatial-analysis/geojson-routing/geojson-path-finder.js"></script>
    <script src="/spatial-analysis/geojson-routing/index.js"></script>

    <style>
        #myMap {
            position: relative;
            width: 100%;
            min-width: 290px;
            height: 600px;
        }

        .controlPanel {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 250px;
            background-color: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0px 24px 74px 0px rgba(0, 0, 0, .32);
            border: 1px solid #ccc;
        }

        fieldset {
            width: calc(100% - 30px);
            min-width: 290px;
            margin-top: 10px;
        }

        #loadingIcon {
            position: absolute;
            top: 270px;
            left: calc(50% - 50px);
        }
    </style>
</head>
<body>
    <div id="myMap"></div>

    <div class="controlPanel">
        Select a route network below and drag the pins on the map to specify the start and end locations.
        <br /><br />

        Route Network: <br />
        <select id="GeoJsonFiles" onchange="loadGeoJSON()"></select>
        <br /><br />
        or upload your own:<br /><br />
        <input id="fileSelector" type="file" />
        <br /><br />
        <table>
            <tr>
                <td>From:</td>
                <td>
                    <input id="fromTbx" type="text" />
                </td>
            </tr>
            <tr>
                <td>To:</td>
                <td>
                    <input id="toTbx" type="text" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input id="snapPins" type="checkbox" checked="checked" /> Snap pins if within 1km of road
                </td>
            </tr>
        </table>
    </div>

    <fieldset>
        <legend>Route along GeoJSON network</legend>
        This sample shows how to calculate the shortest route path between two points on a network of lines stored in a GeoJSON file.
        <br /><br />

        The following open source libraries are used in this sample:
        <ul>
            <li><a href="https://github.com/perliedman/geojson-path-finder">GeoJSON Path Finder</a></li>
            <li><a href="https://turfjs.org/">Turf</a></li>
        </ul>
    </fieldset>

    <img id="loadingIcon" src="/images/loadingIcon.gif" style="display:none;" />
</body>
</html>