heremap/demo/demo-screenshot.html at master · devbab/heremap · 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
108
109
110
111
112
113
114
115
116
117
118
119
<html>

<head>
    <title>HERE Screenshot demo</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    <link rel="stylesheet" type="text/css" href="../dist/css/heremap.css" />

    <style>

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height:100%;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height:100%;
            z-index: 0
        }

        #button1 {
            position: absolute;
            top: 50px;
            left: 10px;
            z-index: 2
        }

    </style>
</head>

<body>
    <div id="container">
        <div id="button1"> <button type="button" onclick="photo();">Screenshot</button></div>
        <div id='map'></div>
        <br />
        <div>

            <!--  our business logic -->
            <script src="../dist/libhere.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="../dist/heremap.min.js" type="text/javascript" charset="utf-8"></script>

            <!--  convenient way to define APP_ID and APP_CODE and bnot expose it to the whole world... -->
            <script src="credentials.js" type="text/javascript" charset="utf-8"></script>

            <script>
                var hm = window.heremap;


                function initMap() {

                    //configure APP_ID and APP_CODE
                    hm.config({
                        app_id: APP_ID,
                        app_code: APP_CODE
                    });

                    // show map fragment
                    // to see console message, open debugger window
                    hm.map(
                        "map", {
                            zoom: 6,
                            viewChange: (zoom, coord) => {
                                console.log("viewchange", zoom, coord)
                            },
                            click: (coord, button, key) => {
                                console.log("click", coord, button, key)
                            },
                            keydown: (key) => {
                                console.log("key down", key)
                            }
                        }
                    );

                };

                async function drawSomeStuff() {
                    // add a simple marker on Paris
                    hm.marker({
                        coord: [48.85, 2.3]
                    });

                    // show a route from lille to Bordeaux
                    const lille = await hm.geocode("lille, France");
                    const bordeaux = await hm.geocode("bordeaux, France");
                    hm.marker({
                        coord: lille.coord,
                        svg: "@svg/marker.svg",
                        color: "green",
                        size: "21x27"
                    });
                    hm.marker(bordeaux.coord);
                    const route = await hm.route(lille.coord, bordeaux.coord);
                    hm.polyline({
                        coords: route.coords
                    });
                }

                initMap();
                drawSomeStuff();

                async function photo() {
                    let data = hm.screenshot({
                        name: 'screenshot.png',
                        ui: true
                    });
                }
            </script>
</body>


</html>