BingKmlParser/src/index.html at master · koldyr/BingKmlParser · 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
<!DOCTYPE html>
<html>
<head>
    <title>BingKmlParser Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.js"></script>
    <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario" async defer></script>

    <script type="text/javascript">
        var map;

        function loadMapScenario() {
            map = new Microsoft.Maps.Map(document.getElementById('bingMap'), {
                credentials: 'your_bing_key'
            });

            Microsoft.Maps.registerModule('BingKmlParser', 'BingKmlParser.js');
            Microsoft.Maps.loadModule('BingKmlParser', bingKmlParserLoaded);
        }

        function bingKmlParserLoaded() {
            var bingKmlParser = new com.koldyr.BingKmlParser();
//            var url = 'http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/sampleData/kml/MaineScubaDiving.kml';
//            var url = 'https://developers.google.com/kml/documentation/KML_Samples.kml';
            var url = 'KML_Samples.kml';
//            var url = 'regions.kml';
            $.get(url).then(function (data, textStatus, jqXHR) {
                var geometries = bingKmlParser.parse(data);

                var allLocations = [];
                $.each(geometries.geometries, function (index, item) {
                    gatherBounds(item, allLocations);

                    if (item) {
                        map.entities.push(item);
                    }
                });

                var viewPort = Microsoft.Maps.LocationRect.fromLocations(allLocations);
                map.setView({bounds: viewPort});

                map.layers.insertAll(geometries.overlays);
            }, function (jqXHR, error) {
                console.log(error);
            });
        }

        function gatherBounds(item, allLocations) {
            if (item instanceof Microsoft.Maps.Pushpin) {
                allLocations.push(item.getLocation());
            } else if (item instanceof Microsoft.Maps.Polyline || item instanceof Microsoft.Maps.Polygon) {
                var locations = item.getLocations();
                for (var i = 0; i < locations.length; i++) {
                    allLocations.push(locations[i]);
                }
            }
        }
    </script>

</head>
<body>

<div id="bingMap" style="width: 90vw; height: 90vh;"></div>

</body>
</html>