lynnlangit/index.html

## index.html

<!DOCTYPE html>

<html style="background-image:url(img/watefall01.jpg)">
<head>
    <meta charset="utf-8" />

    <title>Waterfall Express</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />

    <!--
        Waterfall Express Lab 01: Add references to Stylesheets and JavaScript at here.com.
    -->
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

    <script>
        var APPLICATION_ID = '<your id key value>';
        var APPLICATION_CODE = '<your app code key value>';

        var AUTOCOMPLETION_URL = 'https://<your AWS API gateway endpoint>/Stage/geocodesuggest/';
        var GEOCODER_URL = 'https://geocoder.api.here.com/6.2/geocode.json';
        var ROUTING_URL = 'https://<your AWS API gateway endpoint>/Stage/routing';

        var platform;
        var map;
        var behavior;
        var ui;

        $(document).ready(function () {
            $('#olAuto').hide();
            $("#modal_msg").hide();

            // ====== here.com === Start of Developer Lab: Map ======

            var mapContainer = document.getElementById('map');

            // Initialize Communication with Back-end Services
            platform = new H.service.Platform({
                app_id: APPLICATION_ID,
                app_code: APPLICATION_CODE,
                useCIT: true,
                useHTTPS: true
            });

            // Obtain the default map types from the platform object:
            var defaultLayers = platform.createDefaultLayers();

            // Instantiate (and display) a map object
            map = new H.Map(
                mapContainer,
                defaultLayers.normal.map,
                {
                    center: {
                        lat: 65.68413,
                        lng: -17.54896
                    },
                    zoom: 3
                });

            // Adds functionality such as panning and zooming to the map:
            behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

            // Create the default UI including the zoom control, map settings control and scalebar and panorama discovery control:
            ui = H.ui.UI.createDefault(map, defaultLayers);

            // ====== here.com === End of Developer Lab: Map ======


            // ====== here.com === Start of Developer Lab: Geocoder Autocomplete ======

            $("#auto-complete").keyup(function () {

                var searchtext = $("#auto-complete").val();

                $.ajax({
                    url: AUTOCOMPLETION_URL + encodeURIComponent(searchtext),
                    type: 'get',
                    dataType: 'json',
                    success: onAutoCompleteSuccess,
                    error: onAutoCompleteFailed,
                });
            });

            // ====== here.com === End of Developer Lab: Geocoder Autocomplete ======

            $("#show_button").click(function () {
                var main_thing = document.getElementById("main_thing");
                var map_thing = document.getElementById("map_thing");
                if (main_thing.className == "main_area1") {
                    main_thing.className = "main_area1 main_area2";
                    map_thing.className = "map_area1 map_area2"
                } else {
                    main_thing.className = "main_area1";
                    map_thing.className = "map_area1"
                }
                map.getViewPort().resize();
            });

            //handle resize and orientation changing
            function resize(event) {
                map.getViewPort().resize();
            }
            window.addEventListener('resize', resize);
            window.addEventListener('orientationchange', resize);
        });

        function onAutoCompleteSuccess(response) {
            clearOldSuggestions();
            addSuggestionsToPanel(response);
        }

        function onAutoCompleteFailed(response) {
            $("#modal_msg").html("error!");
            $("#modal_msg").show();
        }

        function clearOldSuggestions() {
            var ol = $('#olAuto');
            ol.hide();
            ol.empty();
        }

        function addSuggestionsToPanel(response) {
            var ol = $('#olAuto');
            ol.empty();
            ol.show();

            response.suggestions.forEach(function (item, ix, arr) {
                var data = `<li onclick="clickedSuggestion(this)" data-location-id="${item.locationId}">${item.label}</li>`
                ol.append(data);
            });
        }

        function clickedSuggestion(element) {
            $("#olAuto").hide();

            var txt = $(element).text();
            var locationId = $(element).data('location-id');

            var ul = $("#ulDestinations");

            if (!ul.text().includes(txt)) {
                var li = `<li data-location-id='${locationId}'><span><a href="#">${txt}</a><a href="#" onclick="this.parentElement.parentElement.removeChild(this.parentElement)">x</a></span></li>`
                $("#ulDestinations").append(li);

                resolveLocationId(locationId);
            }

            $("#auto-complete").val('');
            $("#olAuto").empty();
        }

        // ====== here.com === Start of Developer Lab: Routing ======

        function resolveLocationId(locationId)
        {
            var params = '?locationid=' + encodeURIComponent(locationId) +
                '&app_id=' + APPLICATION_ID +
                '&app_code=' + APPLICATION_CODE;

            $.ajax({
                url: GEOCODER_URL + params,
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    addMarkerOntoMap(response);
                    addLocationToRoute(response);
                },
                error: onGeocodeFailed
            });
        }

        var routeLocations = [];
        function addLocationToRoute(response)
        {

            var loc = response.Response.View[0].Result[0].Location.DisplayPosition;
            routeLocations = routeLocations.concat([loc]);

            if (routeLocations.length < 2)
                return;

            var params = '?mode=' +
                    encodeURIComponent('fastest;car;traffic:disabled') +
                    '&routeAttributes=shape';

            routeLocations.forEach(function (v,i)
            {
                params += `&waypoint${i}=geo!${v.Latitude},${v.Longitude}`;
            });

            $.ajax({
                url: ROUTING_URL + params,
                type: 'get',
                dataType: 'json',
                success: onRoutingSuccess,
                error: onRoutingFailed
            });

        }

        // ====== here.com === End of Developer Lab: Routing ======


        function addMarkerOntoMap(response)
        {
            var loc = response.Response.View[0].Result[0].Location.DisplayPosition;
            map.addObject(new H.map.Marker({lat:loc.Latitude,lng:loc.Longitude}));

            // TODO: zoom to all markers: https://developer.here.com/api-explorer/maps-js/v3.0/markers/zoom-to-set-of-markers
        }

        function onGeocodeFailed(response)
        {
            // TODO
        }

        function onRoutingFailed(response)
        {
            // TODO
        }

        function onRoutingSuccess(result) {
            var route,
                routeShape,
                startPoint,
                endPoint,
                linestring;

            if(result.response.route) {

                // Pick the first route from the response:
                route = result.response.route[0];
                // Pick the route's shape:
                routeShape = route.shape;

                // Create a linestring to use as a point source for the route line
                linestring = new H.geo.LineString();

                // Push all the points in the shape into the linestring:
                routeShape.forEach(function(point) {
                    var parts = point.split(',');
                    linestring.pushLatLngAlt(parts[0], parts[1]);
                });

                // Retrieve the mapped positions of the requested waypoints:
                startPoint = route.waypoint[0].mappedPosition;
                endPoint = route.waypoint[1].mappedPosition;

                // Create a polyline to display the route:
                var routeLine = new H.map.Polyline(linestring, {
                    style: { strokeColor: 'blue', lineWidth: 10 }
                });

                // Create a marker for the start point:
                var startMarker = new H.map.Marker({
                    lat: startPoint.latitude,
                    lng: startPoint.longitude
                });

                // Create a marker for the end point:
                var endMarker = new H.map.Marker({
                    lat: endPoint.latitude,
                    lng: endPoint.longitude
                });

                // Add the route polyline and the two markers to the map:
                map.addObjects([routeLine, startMarker, endMarker]);

                // Set the map's viewport to make the whole route visible:
                map.setViewBounds(routeLine.getBounds());
            }
        };
    </script>
    <style>
        html {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-style: normal;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    background-color: rgba(10, 10, 10, 1);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    overflow: hidden
}

html {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

body {
    width: 100%;
    height: 100vh;
    display: block;
    margin: 0;
    color: #fff;
    float: left;
    clear: both;
    display: block;
    background: rgba(0, 0, 0, 0.6)
}

a {
    border: 0;
    padding: 0;
    margin: 0;
    text-decoration: none
}

header {
    padding: 30px 20px 20px 20px;
    margin: 0;
    float: left;
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%
}

header ul li {
    float: left;
    display: block;
    padding: 0 20px 0 0
}

header ul li a {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 15px;
    padding: 0;
    margin: 0;
    line-height: 20px;
    float: left;
    display: block;
    letter-spacing: 0px
}

header ul li a.active,
header ul li a:hover {
    color: rgba(255, 255, 255, 1)
}

.trip01 {
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 14px
}

.trip01 span {
    padding: 0 10px 0 5px
}

.main_search {
    position: relative;
    text-align: center
}

.main_search span {
    display: inline;
    margin: 0 2px 0 0
}

.m_search {
    font-size: 24px;
    border: 4px solid #d8d766;
    width: 500px;
    color: #999;
    padding: 0 15px;
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: 300;
    height: 64px;
    margin: 0
}

.m_search:focus {
    outline-color: transparent;
    outline-style: none;
    border: 4px solid d8d766;
    color: #222;
    background-color: #d8d766
}

.add_button {
    font-size: 24px;
    border: 4px solid #d8d766;
    color: #222;
    padding: 0 20px;
    background-color: #d8d766;
    font-weight: 300;
    cursor: pointer;
    height: 72px;
    margin: 0
}

.go {
    margin: 0
}

.go .main_button {
    padding: 0 15px;
    border: 4px solid #939244;
    background-color: #939244;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    cursor: pointer;
    height: 72px;
    margin: 0;
    text-transform: uppercase
}

.trip02 {
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 14px
}

.trip02 span {
    padding: 0 10px 0 0
}

.hits {
    margin-top: 150px;
    text-align: center;
    margin-top: 40px;
    box-sizing: border-box;
}

.hits ul {
    display: table;
    margin: 0 auto;
    text-align: center;
    font-size: 0px
}

.hits ul li {
    margin: 0;
    padding: 5px 10px 5px 0;
    display: inline-block
}

.hits ul li a {
    margin: 0;
    padding: 5px 15px;
    background-color: #b04343;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 20px;
    display: inline-block
}

.hits ul li a:hover {
    background-color: #642a2a
}

.hits ul li a span {
    margin: 0;
    padding: 0 0 0 20px;
    font-weight: 400;
    color: #222
}

.hits ul li a:hover span {
    color: #fff
}

.modal_msg {
    box-sizing: border-box;
    padding: 15px;
    margin: 0;
    font-size: 12px;
    color: #fff;
    background-color: #642a2a;
    font-weight: 700;
    position: absolute
}

.cssmodalhidden {
    display: none
}

.divauto {
    position: relative;
    display: inline;
}

#olAuto {
    position: relative;
    max-width: 730px;
    background: #d8d766;
    color: #666666;
    padding: 10px;
    box-sizing: border-box;

}

#olAuto>li {
    cursor: pointer;
    color: grey;
    font-size: 200%;
    line-height: initial;
    /* margin-left: 30px; */
    text-align: left;
    list-style-type: none;
}

#olAuto>li:hover {
    color: black;
}

#add_btn {
    margin-left: 12%;
    display: inline-block;
}

#show_btn {
    margin-left: 0.1%;
    display: inline-block;
}

#map {
    height: 40vh;
    width: 95vw;
}


@media all and (orientation:landscape) {
    .main_area2 {
        width: 66.666vw;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease
    }

    .map_area1 {
        position: absolute;
        top: 0;
        right: -33.333vw;
        width: 33.333vw;
        height: 100vh;
        background-color: #222;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
        display: none
    }

    .map_area2 {
        top: 0;
        right: 0;
        display: block
    }

    #map {
        width: 33.333vw;
        height: 100vh
    }

    .modal_msg {
        left: 0;
        top: 120px
    }
}

@media all and (orientation:landscape) and (max-width:1280px) and (min-width:760px) {
    .main_area1 {
        padding: 80px 0 0 0
    }

    .m_search {
        font-size: 20px;
        border: 4px solid #d8d766;
        width: 300px;
        color: #999;
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.1);
        font-weight: 300;
        height: 54px;
        margin: 0
    }

    .add_button {
        font-size: 20px;
        border: 4px solid #d8d766;
        color: #222;
        padding: 0 10px;
        background-color: #d8d766;
        font-weight: 300;
        cursor: pointer;
        height: 62px;
        margin: 0
    }

    .go .main_button {
        padding: 0 10px;
        border: 4px solid #939244;
        background-color: #939244;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
        height: 62px;
        margin: 0
    }
}

@media all and (orientation:portrait) {
    .main_area2 {
        width: 100vw;
        height: 66.666vh;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease
    }

    .map_area1 {
        position: absolute;
        bottom: -33.333vh;
        left: 0;
        height: 33.333vh;
        width: 100vh;
        background-color: #222;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease
    }

    .map_area2 {
        bottom: 0;
        left: 0
    }

    #map {
        height: 33.333vh;
        width: 100vw
    }

    .modal_msg {
        left: 0;
        top: 120px
    }
}

@media all and (orientation:portrait) and (max-width:768px) and (min-width:600px) {
    .m_search {
        font-size: 20px;
        border: 4px solid #d8d766;
        width: 300px;
        color: #999;
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.1);
        font-weight: 300;
        height: 54px;
        margin: 0
    }

    .add_button {
        font-size: 20px;
        border: 4px solid #d8d766;
        color: #222;
        padding: 0 10px;
        background-color: #d8d766;
        font-weight: 300;
        cursor: pointer;
        height: 62px;
        margin: 0
    }

    .go .main_button {
        padding: 0 10px;
        border: 4px solid #939244;
        background-color: #939244;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
        height: 62px;
        margin: 0
    }
}

@media all and (max-width:760px) {

    body,
    html {
        overflow-x: hidden;
        overflow-y: auto
    }

    .main_area1 {
        box-sizing: border-box;
        margin: 0;
        padding: 50px 0 0 0;
        float: left;
        display: block;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: hidden
    }

    .main_area1 h1 {
        float: left;
        display: block;
        clear: both;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 10px 0;
        font-size: 21px;
        font-weight: 400
    }

    .main_area2 {
        width: 100%
    }

    .trip01 {
        float: left;
        display: block;
        clear: both;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 10px 0
    }

    .trip01 span {
        padding: 0 10px 0 5px
    }

    .main_search {
        float: left;
        display: block;
        clear: both;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 100%;
        padding: 0
    }

    .main_search span {
        display: inline;
        margin: 0 2px 0 0
    }

    .m_search {
        font-size: 14px;
        border: 4px solid #d8d766;
        width: 160px;
        color: #999;
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.1);
        font-weight: 300;
        height: 48px;
        margin: 0;
    }

    .m_search:focus {
        outline-color: transparent;
        outline-style: none;
        border: 4px solid d8d766;
        color: #222;
        background-color: #d8d766
    }

    .add_button {
        font-size: 14px;
        border: 4px solid #d8d766;
        color: #222;
        padding: 0 10px;
        background-color: #d8d766;
        font-weight: 300;
        cursor: pointer;
        height: 56px;
        margin: 0
    }

    .go {
        margin: 0
    }

    .trip02 {
        float: left;
        display: block;
        clear: both;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        width: 100%;
        padding: 10px 0;
        font-size: 12px
    }

    .trip02 span {
        padding: 0 10px 0 5px
    }

    .hits {
        float: left;
        display: block;
        clear: both;
        text-align: left;
        position: static;
        transform: translate(0, 0);
        width: 100%;
        padding: 10px 0
    }

    .hits ul {
        display: block;
        margin: 0;
        text-align: center;
        font-size: 0
    }

    .hits ul li {
        margin: 5px 5px 5px 0;
        padding: 0;
        line-height: 20px;
        height: 20px
    }

    .hits ul li a {
        margin: 0;
        padding: 5px 15px;
        background-color: #b04343;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        line-height: 20px;
        line-height: 20px;
        height: 20px
    }

    .go .main_button {
        padding: 0 5px;
        border: 4px solid #939244;
        background-color: #939244;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        height: 56px;
        margin: 0
    }

    .map_area1 {
        position: static;
        height: auto;
        width: 100%;
        background-color: #222;
        float: left;
        display: none;
        clear: both;
        left: 0;
        top: 0;
    }

    .map_area2 {
        float: left;
        display: block;
        clear: both;
        left: 0;
        top: 0;
    }

    .modal_msg {
        left: 0;
        top: 80px;
        float: none;
    }
}

@media all and (max-width:360px) {
    header ul li {
        float: left;
        display: block;
        padding: 0 20px 0 0
    }

    header ul li a {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 700;
        font-size: 13px;
        padding: 0;
        margin: 0;
        line-height: 20px;
        float: left;
        display: block;
        letter-spacing: 0px
    }

    .main_area1 {
        box-sizing: border-box;
        margin: 0;
        padding: 20px 0 0 0;
        float: left;
        display: block;
        text-align: center;
        position: static;
        transform: translate(0, 0);
        top: 0;
        left: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: hidden
    }

    .trip01 {
        font-size: 11px
    }

    .m_search {
        font-size: 14px;
        border: 4px solid #d8d766;
        width: 140px;
        color: #999;
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.1);
        font-weight: 300;
        height: 48px;
        margin: 0;
    }

    .add_button {
        font-size: 14px;
        border: 4px solid #d8d766;
        color: #222;
        padding: 0 10px;
        background-color: #d8d766;
        font-weight: 300;
        cursor: pointer;
        height: 56px;
        margin: 0
    }

    .go .main_button {
        padding: 0 10px;
        border: 4px solid #939244;
        background-color: #939244;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        height: 56px;
        margin: 0
    }

    .trip02 {
        font-size: 10px
    }

    .trip02 span {
        padding: 0 5px
    }

    .hits ul li a {
        font-size: 12px
    }

    .map_area1 {
        position: static;
        height: auto;
        width: 100%;
        background-color: #222;
        float: left;
        display: none;
        clear: both;
        left: 0;
        top: 0;
    }

    .map_area2 {
        float: left;
        display: block;
        clear: both;
        left: 0;
        top: 0;
    }

    .modal_msg {
        left: 0;
        top: 80px
    }
}

@media all and (orientation:landscape) and (max-width:760px) {
    .main_area1 {
        padding: 0;
    }
}

    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" class="active">Waterfall Express</a></li>
                <li><a href="https://www.here.com/en/partners/find-partner/strategic-alliances/amazon/aws-serverless">About</a></li>
                <li><a href="https://www.here.com/en/partners/find-partner/strategic-alliances/amazon/aws-serverless">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <form action="">
            <div class="main_area1" id="main_thing">
                <center>
                    <h1>Let's take a trip!</h1>
                    <div class="trip01">
                        <input name="rb01" type="radio" value="round" checked><span>round trip</span>
                        <input name="rb01" type="radio" value="destination"><span>destination</span>
                    </div>
                    <br />
                    <div class="trip02">
                        <input name="transportmode" type="radio" value="pedestrian">
                        <span>Pedestrian</span>
                        <input name="transportmode" type="radio" value="cycling">
                        <span>Cycling</span>
                        <input name="transportmode" type="radio" value="driving" checked>
                        <span>Driving</span>
                        <input name="transportmode" type="radio" value="publictransport">
                        <span>Public Transport</span>
                    </div>
                    <br />
                    <div class="main_search">
                        <input id="auto-complete" name="auto-complete" type="text" placeholder="Destination" class="m_search" />
                        <div class="go" id="show_btn">
                            <input id="show_button" name="show_button" type="button" value="Show!" class="main_button" />
                        </div>
                        <center>
                            <ol id="olAuto"></ol>
                        </center>
                    </div>
                    <div class="hits">
                        <ul id="ulDestinations">
                                            <!--
                            Include when editing CSS:
                            <li><a href="#">Waterfall 01 <span>x</span></a></li>
                            <li><a href="#">Waterfall 02 <span>x</span></a></li>
                            <li><a href="#">Waterfall 03 <span>x</span></a></li>
                            -->
                        </ul>
                    </div>
                </center>
            </div>
        </form>
    </main>
    <div class="map_area1" id="map_thing">
        <div id="map"></div>
    </div>
    <div id="modal_msg">error messages, warnings, etc.</div>
</body>
</html>

	<!DOCTYPE html>

	<html style="background-image:url(img/watefall01.jpg)">
	<head>
	<meta charset="utf-8" />

	<title>Waterfall Express</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />

	<!--
	Waterfall Express Lab 01: Add references to Stylesheets and JavaScript at here.com.
	-->
	<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
	<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
	<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
	<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
	<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

	<script>
	var APPLICATION_ID = '<your id key value>';
	var APPLICATION_CODE = '<your app code key value>';

	var AUTOCOMPLETION_URL = 'https://<your AWS API gateway endpoint>/Stage/geocodesuggest/';
	var GEOCODER_URL = 'https://geocoder.api.here.com/6.2/geocode.json';
	var ROUTING_URL = 'https://<your AWS API gateway endpoint>/Stage/routing';

	var platform;
	var map;
	var behavior;
	var ui;

	$(document).ready(function () {
	$('#olAuto').hide();
	$("#modal_msg").hide();

	// ====== here.com === Start of Developer Lab: Map ======

	var mapContainer = document.getElementById('map');

	// Initialize Communication with Back-end Services
	platform = new H.service.Platform({
	app_id: APPLICATION_ID,
	app_code: APPLICATION_CODE,
	useCIT: true,
	useHTTPS: true
	});

	// Obtain the default map types from the platform object:
	var defaultLayers = platform.createDefaultLayers();

	// Instantiate (and display) a map object
	map = new H.Map(
	mapContainer,
	defaultLayers.normal.map,
	{
	center: {
	lat: 65.68413,
	lng: -17.54896
	},
	zoom: 3
	});

	// Adds functionality such as panning and zooming to the map:
	behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

	// Create the default UI including the zoom control, map settings control and scalebar and panorama discovery control:
	ui = H.ui.UI.createDefault(map, defaultLayers);

	// ====== here.com === End of Developer Lab: Map ======



	// ====== here.com === Start of Developer Lab: Geocoder Autocomplete ======

	$("#auto-complete").keyup(function () {

	var searchtext = $("#auto-complete").val();

	$.ajax({
	url: AUTOCOMPLETION_URL + encodeURIComponent(searchtext),
	type: 'get',
	dataType: 'json',
	success: onAutoCompleteSuccess,
	error: onAutoCompleteFailed,
	});
	});

	// ====== here.com === End of Developer Lab: Geocoder Autocomplete ======

	$("#show_button").click(function () {
	var main_thing = document.getElementById("main_thing");
	var map_thing = document.getElementById("map_thing");
	if (main_thing.className == "main_area1") {
	main_thing.className = "main_area1 main_area2";
	map_thing.className = "map_area1 map_area2"
	} else {
	main_thing.className = "main_area1";
	map_thing.className = "map_area1"
	}
	map.getViewPort().resize();
	});

	//handle resize and orientation changing
	function resize(event) {
	map.getViewPort().resize();
	}
	window.addEventListener('resize', resize);
	window.addEventListener('orientationchange', resize);
	});

	function onAutoCompleteSuccess(response) {
	clearOldSuggestions();
	addSuggestionsToPanel(response);
	}

	function onAutoCompleteFailed(response) {
	$("#modal_msg").html("error!");
	$("#modal_msg").show();
	}

	function clearOldSuggestions() {
	var ol = $('#olAuto');
	ol.hide();
	ol.empty();
	}

	function addSuggestionsToPanel(response) {
	var ol = $('#olAuto');
	ol.empty();
	ol.show();

	response.suggestions.forEach(function (item, ix, arr) {
	var data = `<li onclick="clickedSuggestion(this)" data-location-id="${item.locationId}">${item.label}</li>`
	ol.append(data);
	});
	}

	function clickedSuggestion(element) {
	$("#olAuto").hide();

	var txt = $(element).text();
	var locationId = $(element).data('location-id');

	var ul = $("#ulDestinations");

	if (!ul.text().includes(txt)) {
	var li = `<li data-location-id='${locationId}'><span><a href="#">${txt}</a><a href="#" onclick="this.parentElement.parentElement.removeChild(this.parentElement)">x</a></span></li>`
	$("#ulDestinations").append(li);

	resolveLocationId(locationId);
	}

	$("#auto-complete").val('');
	$("#olAuto").empty();
	}

	// ====== here.com === Start of Developer Lab: Routing ======

	function resolveLocationId(locationId)
	{
	var params = '?locationid=' + encodeURIComponent(locationId) +
	'&app_id=' + APPLICATION_ID +
	'&app_code=' + APPLICATION_CODE;

	$.ajax({
	url: GEOCODER_URL + params,
	type: 'get',
	dataType: 'json',
	success: function (response) {
	addMarkerOntoMap(response);
	addLocationToRoute(response);
	},
	error: onGeocodeFailed
	});
	}

	var routeLocations = [];
	function addLocationToRoute(response)
	{

	var loc = response.Response.View[0].Result[0].Location.DisplayPosition;
	routeLocations = routeLocations.concat([loc]);

	if (routeLocations.length < 2)
	return;

	var params = '?mode=' +
	encodeURIComponent('fastest;car;traffic:disabled') +
	'&routeAttributes=shape';

	routeLocations.forEach(function (v,i)
	{
	params += `&waypoint${i}=geo!${v.Latitude},${v.Longitude}`;
	});

	$.ajax({
	url: ROUTING_URL + params,
	type: 'get',
	dataType: 'json',
	success: onRoutingSuccess,
	error: onRoutingFailed
	});

	}

	// ====== here.com === End of Developer Lab: Routing ======


	function addMarkerOntoMap(response)
	{
	var loc = response.Response.View[0].Result[0].Location.DisplayPosition;
	map.addObject(new H.map.Marker({lat:loc.Latitude,lng:loc.Longitude}));

	// TODO: zoom to all markers: https://developer.here.com/api-explorer/maps-js/v3.0/markers/zoom-to-set-of-markers
	}

	function onGeocodeFailed(response)
	{
	// TODO
	}

	function onRoutingFailed(response)
	{
	// TODO
	}

	function onRoutingSuccess(result) {
	var route,
	routeShape,
	startPoint,
	endPoint,
	linestring;

	if(result.response.route) {

	// Pick the first route from the response:
	route = result.response.route[0];
	// Pick the route's shape:
	routeShape = route.shape;

	// Create a linestring to use as a point source for the route line
	linestring = new H.geo.LineString();

	// Push all the points in the shape into the linestring:
	routeShape.forEach(function(point) {
	var parts = point.split(',');
	linestring.pushLatLngAlt(parts[0], parts[1]);
	});

	// Retrieve the mapped positions of the requested waypoints:
	startPoint = route.waypoint[0].mappedPosition;
	endPoint = route.waypoint[1].mappedPosition;

	// Create a polyline to display the route:
	var routeLine = new H.map.Polyline(linestring, {
	style: { strokeColor: 'blue', lineWidth: 10 }
	});

	// Create a marker for the start point:
	var startMarker = new H.map.Marker({
	lat: startPoint.latitude,
	lng: startPoint.longitude
	});

	// Create a marker for the end point:
	var endMarker = new H.map.Marker({
	lat: endPoint.latitude,
	lng: endPoint.longitude
	});

	// Add the route polyline and the two markers to the map:
	map.addObjects([routeLine, startMarker, endMarker]);

	// Set the map's viewport to make the whole route visible:
	map.setViewBounds(routeLine.getBounds());
	}
	};
	</script>
	<style>
	html {
	font-family: 'Roboto', sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: 20px;
	font-weight: 400;
	color: #fff;
	background-color: rgba(10, 10, 10, 1);
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: none;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	overflow: hidden
	}

	html {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center
	}

	body {
	width: 100%;
	height: 100vh;
	display: block;
	margin: 0;
	color: #fff;
	float: left;
	clear: both;
	display: block;
	background: rgba(0, 0, 0, 0.6)
	}

	a {
	border: 0;
	padding: 0;
	margin: 0;
	text-decoration: none
	}

	header {
	padding: 30px 20px 20px 20px;
	margin: 0;
	float: left;
	display: block;
	clear: both;
	box-sizing: border-box;
	width: 100%
	}

	header ul li {
	float: left;
	display: block;
	padding: 0 20px 0 0
	}

	header ul li a {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 700;
	font-size: 15px;
	padding: 0;
	margin: 0;
	line-height: 20px;
	float: left;
	display: block;
	letter-spacing: 0px
	}

	header ul li a.active,
	header ul li a:hover {
	color: rgba(255, 255, 255, 1)
	}

	.trip01 {
	text-align: center;
	height: 20px;
	line-height: 20px;
	font-size: 14px
	}

	.trip01 span {
	padding: 0 10px 0 5px
	}

	.main_search {
	position: relative;
	text-align: center
	}

	.main_search span {
	display: inline;
	margin: 0 2px 0 0
	}

	.m_search {
	font-size: 24px;
	border: 4px solid #d8d766;
	width: 500px;
	color: #999;
	padding: 0 15px;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: 300;
	height: 64px;
	margin: 0
	}

	.m_search:focus {
	outline-color: transparent;
	outline-style: none;
	border: 4px solid d8d766;
	color: #222;
	background-color: #d8d766
	}

	.add_button {
	font-size: 24px;
	border: 4px solid #d8d766;
	color: #222;
	padding: 0 20px;
	background-color: #d8d766;
	font-weight: 300;
	cursor: pointer;
	height: 72px;
	margin: 0
	}

	.go {
	margin: 0
	}

	.go .main_button {
	padding: 0 15px;
	border: 4px solid #939244;
	background-color: #939244;
	color: #fff;
	font-size: 24px;
	font-weight: 400;
	cursor: pointer;
	height: 72px;
	margin: 0;
	text-transform: uppercase
	}

	.trip02 {
	text-align: center;
	height: 20px;
	line-height: 20px;
	font-size: 14px
	}

	.trip02 span {
	padding: 0 10px 0 0
	}

	.hits {
	margin-top: 150px;
	text-align: center;
	margin-top: 40px;
	box-sizing: border-box;
	}

	.hits ul {
	display: table;
	margin: 0 auto;
	text-align: center;
	font-size: 0px
	}

	.hits ul li {
	margin: 0;
	padding: 5px 10px 5px 0;
	display: inline-block
	}

	.hits ul li a {
	margin: 0;
	padding: 5px 15px;
	background-color: #b04343;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 20px;
	display: inline-block
	}

	.hits ul li a:hover {
	background-color: #642a2a
	}

	.hits ul li a span {
	margin: 0;
	padding: 0 0 0 20px;
	font-weight: 400;
	color: #222
	}

	.hits ul li a:hover span {
	color: #fff
	}

	.modal_msg {
	box-sizing: border-box;
	padding: 15px;
	margin: 0;
	font-size: 12px;
	color: #fff;
	background-color: #642a2a;
	font-weight: 700;
	position: absolute
	}

	.cssmodalhidden {
	display: none
	}

	.divauto {
	position: relative;
	display: inline;
	}

	#olAuto {
	position: relative;
	max-width: 730px;
	background: #d8d766;
	color: #666666;
	padding: 10px;
	box-sizing: border-box;

	}

	#olAuto>li {
	cursor: pointer;
	color: grey;
	font-size: 200%;
	line-height: initial;
	/* margin-left: 30px; */
	text-align: left;
	list-style-type: none;
	}

	#olAuto>li:hover {
	color: black;
	}

	#add_btn {
	margin-left: 12%;
	display: inline-block;
	}

	#show_btn {
	margin-left: 0.1%;
	display: inline-block;
	}

	#map {
	height: 40vh;
	width: 95vw;
	}


	@media all and (orientation:landscape) {
	.main_area2 {
	width: 66.666vw;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease
	}

	.map_area1 {
	position: absolute;
	top: 0;
	right: -33.333vw;
	width: 33.333vw;
	height: 100vh;
	background-color: #222;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	display: none
	}

	.map_area2 {
	top: 0;
	right: 0;
	display: block
	}

	#map {
	width: 33.333vw;
	height: 100vh
	}

	.modal_msg {
	left: 0;
	top: 120px
	}
	}

	@media all and (orientation:landscape) and (max-width:1280px) and (min-width:760px) {
	.main_area1 {
	padding: 80px 0 0 0
	}

	.m_search {
	font-size: 20px;
	border: 4px solid #d8d766;
	width: 300px;
	color: #999;
	padding: 0 10px;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: 300;
	height: 54px;
	margin: 0
	}

	.add_button {
	font-size: 20px;
	border: 4px solid #d8d766;
	color: #222;
	padding: 0 10px;
	background-color: #d8d766;
	font-weight: 300;
	cursor: pointer;
	height: 62px;
	margin: 0
	}

	.go .main_button {
	padding: 0 10px;
	border: 4px solid #939244;
	background-color: #939244;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	cursor: pointer;
	height: 62px;
	margin: 0
	}
	}

	@media all and (orientation:portrait) {
	.main_area2 {
	width: 100vw;
	height: 66.666vh;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease
	}

	.map_area1 {
	position: absolute;
	bottom: -33.333vh;
	left: 0;
	height: 33.333vh;
	width: 100vh;
	background-color: #222;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease
	}

	.map_area2 {
	bottom: 0;
	left: 0
	}

	#map {
	height: 33.333vh;
	width: 100vw
	}

	.modal_msg {
	left: 0;
	top: 120px
	}
	}

	@media all and (orientation:portrait) and (max-width:768px) and (min-width:600px) {
	.m_search {
	font-size: 20px;
	border: 4px solid #d8d766;
	width: 300px;
	color: #999;
	padding: 0 10px;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: 300;
	height: 54px;
	margin: 0
	}

	.add_button {
	font-size: 20px;
	border: 4px solid #d8d766;
	color: #222;
	padding: 0 10px;
	background-color: #d8d766;
	font-weight: 300;
	cursor: pointer;
	height: 62px;
	margin: 0
	}

	.go .main_button {
	padding: 0 10px;
	border: 4px solid #939244;
	background-color: #939244;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	cursor: pointer;
	height: 62px;
	margin: 0
	}
	}

	@media all and (max-width:760px) {

	body,
	html {
	overflow-x: hidden;
	overflow-y: auto
	}

	.main_area1 {
	box-sizing: border-box;
	margin: 0;
	padding: 50px 0 0 0;
	float: left;
	display: block;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	top: 0;
	left: 0;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden
	}

	.main_area1 h1 {
	float: left;
	display: block;
	clear: both;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 10px 0;
	font-size: 21px;
	font-weight: 400
	}

	.main_area2 {
	width: 100%
	}

	.trip01 {
	float: left;
	display: block;
	clear: both;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 10px 0
	}

	.trip01 span {
	padding: 0 10px 0 5px
	}

	.main_search {
	float: left;
	display: block;
	clear: both;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	top: 0;
	left: 0;
	width: 100%;
	padding: 0
	}

	.main_search span {
	display: inline;
	margin: 0 2px 0 0
	}

	.m_search {
	font-size: 14px;
	border: 4px solid #d8d766;
	width: 160px;
	color: #999;
	padding: 0 10px;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: 300;
	height: 48px;
	margin: 0;
	}

	.m_search:focus {
	outline-color: transparent;
	outline-style: none;
	border: 4px solid d8d766;
	color: #222;
	background-color: #d8d766
	}

	.add_button {
	font-size: 14px;
	border: 4px solid #d8d766;
	color: #222;
	padding: 0 10px;
	background-color: #d8d766;
	font-weight: 300;
	cursor: pointer;
	height: 56px;
	margin: 0
	}

	.go {
	margin: 0
	}

	.trip02 {
	float: left;
	display: block;
	clear: both;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	width: 100%;
	padding: 10px 0;
	font-size: 12px
	}

	.trip02 span {
	padding: 0 10px 0 5px
	}

	.hits {
	float: left;
	display: block;
	clear: both;
	text-align: left;
	position: static;
	transform: translate(0, 0);
	width: 100%;
	padding: 10px 0
	}

	.hits ul {
	display: block;
	margin: 0;
	text-align: center;
	font-size: 0
	}

	.hits ul li {
	margin: 5px 5px 5px 0;
	padding: 0;
	line-height: 20px;
	height: 20px
	}

	.hits ul li a {
	margin: 0;
	padding: 5px 15px;
	background-color: #b04343;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	line-height: 20px;
	line-height: 20px;
	height: 20px
	}

	.go .main_button {
	padding: 0 5px;
	border: 4px solid #939244;
	background-color: #939244;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	height: 56px;
	margin: 0
	}

	.map_area1 {
	position: static;
	height: auto;
	width: 100%;
	background-color: #222;
	float: left;
	display: none;
	clear: both;
	left: 0;
	top: 0;
	}

	.map_area2 {
	float: left;
	display: block;
	clear: both;
	left: 0;
	top: 0;
	}

	.modal_msg {
	left: 0;
	top: 80px;
	float: none;
	}
	}

	@media all and (max-width:360px) {
	header ul li {
	float: left;
	display: block;
	padding: 0 20px 0 0
	}

	header ul li a {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 700;
	font-size: 13px;
	padding: 0;
	margin: 0;
	line-height: 20px;
	float: left;
	display: block;
	letter-spacing: 0px
	}

	.main_area1 {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 0 0 0;
	float: left;
	display: block;
	text-align: center;
	position: static;
	transform: translate(0, 0);
	top: 0;
	left: 0;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden
	}

	.trip01 {
	font-size: 11px
	}

	.m_search {
	font-size: 14px;
	border: 4px solid #d8d766;
	width: 140px;
	color: #999;
	padding: 0 10px;
	background-color: rgba(0, 0, 0, 0.1);
	font-weight: 300;
	height: 48px;
	margin: 0;
	}

	.add_button {
	font-size: 14px;
	border: 4px solid #d8d766;
	color: #222;
	padding: 0 10px;
	background-color: #d8d766;
	font-weight: 300;
	cursor: pointer;
	height: 56px;
	margin: 0
	}

	.go .main_button {
	padding: 0 10px;
	border: 4px solid #939244;
	background-color: #939244;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	height: 56px;
	margin: 0
	}

	.trip02 {
	font-size: 10px
	}

	.trip02 span {
	padding: 0 5px
	}

	.hits ul li a {
	font-size: 12px
	}

	.map_area1 {
	position: static;
	height: auto;
	width: 100%;
	background-color: #222;
	float: left;
	display: none;
	clear: both;
	left: 0;
	top: 0;
	}

	.map_area2 {
	float: left;
	display: block;
	clear: both;
	left: 0;
	top: 0;
	}

	.modal_msg {
	left: 0;
	top: 80px
	}
	}

	@media all and (orientation:landscape) and (max-width:760px) {
	.main_area1 {
	padding: 0;
	}
	}

	</style>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li><a href="#" class="active">Waterfall Express</a></li>
	<li><a href="https://www.here.com/en/partners/find-partner/strategic-alliances/amazon/aws-serverless">About</a></li>
	<li><a href="https://www.here.com/en/partners/find-partner/strategic-alliances/amazon/aws-serverless">Contact</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<form action="">
	<div class="main_area1" id="main_thing">
	<center>
	<h1>Let's take a trip!</h1>
	<div class="trip01">
	<input name="rb01" type="radio" value="round" checked><span>round trip</span>
	<input name="rb01" type="radio" value="destination"><span>destination</span>
	</div>
	<br />
	<div class="trip02">
	<input name="transportmode" type="radio" value="pedestrian">
	<span>Pedestrian</span>
	<input name="transportmode" type="radio" value="cycling">
	<span>Cycling</span>
	<input name="transportmode" type="radio" value="driving" checked>
	<span>Driving</span>
	<input name="transportmode" type="radio" value="publictransport">
	<span>Public Transport</span>
	</div>
	<br />
	<div class="main_search">
	<input id="auto-complete" name="auto-complete" type="text" placeholder="Destination" class="m_search" />
	<div class="go" id="show_btn">
	<input id="show_button" name="show_button" type="button" value="Show!" class="main_button" />
	</div>
	<center>
	<ol id="olAuto"></ol>
	</center>
	</div>
	<div class="hits">
	<ul id="ulDestinations">
	<!--
	Include when editing CSS:
	<li><a href="#">Waterfall 01 <span>x</span></a></li>
	<li><a href="#">Waterfall 02 <span>x</span></a></li>
	<li><a href="#">Waterfall 03 <span>x</span></a></li>
	-->
	</ul>
	</div>
	</center>
	</div>
	</form>
	</main>
	<div class="map_area1" id="map_thing">
	<div id="map"></div>
	</div>
	<div id="modal_msg">error messages, warnings, etc.</div>
	</body>
	</html>