Untitled

<!DOCTYPE html>

<html lang="sv">

    <head>
        <title>Uppgift 2</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
        <script>
            function bytaKarta() {
                var latlngs = [[55.70584, 13.19321], [59.33258, 18.0649], [48.85341, 2.3488], [40.71427, -74.00597]];
                var i = document.getElementById("mySelect").selectedIndex;
                mymap.panTo(latlngs[i]);
            }
        </script>
        <style>
            body {
                text-align: center;
            }
            #mapid {
                height: 85vh;
            }
            #select {
                border: 2px solid green;
                width: 600px;
                text-align: left;
            }
        </style>
    </head>

    <body>
        <h1>Interactive map</h1>
        <p id="select">
            <b>Select location:</b>
            <select id="mySelect" onchange="bytaKarta()">
                <option value="lund" >Lund</option>
                <option value="sthlm">Stockholm</option>
                <option value="paris">Paris</option>
                <option value="newyork">New York</option>
            </select>
        </p>
        <div id="mapid"></div>
        <script>
            var mymap = L.map('mapid').setView([55.70584, 13.19321], 13);

            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            accessToken: 'pk.eyJ1IjoidG9iaWFzc2lsZnZlcmJlcmciLCJhIjoiY2s1Z25iMWJ4MDh5czNva2VjdTExandsYSJ9.oCBPyvANrfEIjG7vqzcj9Q'
            }).addTo(mymap);
        </script>
    </body>

</html>