gis

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
        <style>
        .full-layar{
            width: 100%;
            position:absolute;
            left: 0;
            top: 0;
            bottom: 0;
        }

        .tombol{
            border: none;
            color:#000;
            padding:10px;
            text-align:center;
            display:inline-block;
            font-size: 14px;
            left: 20px;
            border-radius: 8px;
            position:fixed;


        }

        </style>

<script src='data.js'></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
type="text/css"/>


    </head>
<body>
    <div id='blokpeta' class="full-layar"></div>

    <pre  class="tombol" style="background-color: white;top: 20px;width: 300px;height: 150px;text-align:left;">"Lokasi :"
    <a href="#" style="text-decoration: none" onclick="pindah(112.23512066296092,-7.554802216551025)">Toko Sugiyanto</a>
    <a href="#" style="text-decoration: none" onclick="pindah(112.2391912136834,-7.5474306535339934)">Seblak Mantan</a>
    <a href="#" style="text-decoration: none" onclick="pindah(112.2441310754453,-7.541405183902867)">Bang Fadhil Chinesse Food</a>
    <a href="#" style="text-decoration: none" onclick="pindah(112.23242195426462,-7.555790505943435)">Toko Lantiknya</a>
    <a href="#" style="text-decoration: none" onclick="pindah(112.24463154988678,-7.5409645662745675)">Nads Bakery</a>
    </pre>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiYW5pc2FmaXRyaSIsImEiOiJja2Z0MjRqYTAwNTQzMzdxcXF0bnQ2bHB3In0._K1rkqcHXmU4PIkjtpgoXg';
        var petaku = new mapboxgl.Map({ //Buat peta baru  dai mapbox dari id div nya
            container: 'blokpeta', //dimana tempatnya
            style: 'mapbox://styles/mapbox/satellite-v9', //jenis model petanya
            center: [112.23344889101912, -7.55676746650353],
            zoom:18
        });

        //variabel marker
        var tanda = new mapboxgl.Marker({draggable:true}).setLngLat([112.23344889101912, -7.55676746650353]).addTo(petaku);


        function pindah(bujur,lintang){
            petaku.setCenter([bujur, lintang]);
            tanda.setLngLat([bujur, lintang]);

        }


    </script>

</body>
</html>