demo/demo-basic.html

<html>

<head>
    <title>HERE Generic map</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" />

</head>

<body>
    <div id="map"></div>

    <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>

    <!--  our business logic -->
    <script>

        var hm = window.heremap;


        function initMap() {

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

            hm.getAvailableMapStyle().then(style => {
                console.log("Style ", style);
            });

            // show map fragment
            // to see console message, open debugger window
            hm.map(
                "map", {
                zoom: 6,
                scheme:"satellite.day",
                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({
                coord: bordeaux.coord,
                svg: "@svg/marker.svg",
                color: "red",
                ratio: 2
            });
            const route = await hm.route(lille.coord, bordeaux.coord);
            hm.polyline({
                coords: route.coords
            });
        }

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


</html>