heremap/demo/demo-touch.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
<html>

<head>
    <title>HERE Touch 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>

        #map {

            width: 100%;
            height:100%;
        }
</style>
</head>

<body>
    <table width="100%" height="100%" border="1">
        <tr>
            <td width="200px" height="800px"></td>
            <td width="800px">
                <div id="map"></div>
            </td>
        </tr>
    </table>


    <!--  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)
                    }
                }
            );

            hm.touch(true, {
                tolerance: 2,
                // keep: true,
                layer: "dummy",
                callback: function (coords) {
                    //    console.log(coords);
                    hm.polyline({
                        coords: coords
                    });
                }
            });
        };


        initMap();
    </script>
</body>


</html>