
<!DOCTYPE html>
<html>
<head>
  <title>Peta Bing Maps & OpenStreetMap</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <style>
    #mapDiv {
      width: 800px;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="mapDiv"></div>

  <script type='text/javascript'>
    function loadMapScenario() {
      // Inisialisasi peta Leaflet
      var map = L.map('mapDiv').setView([47.60357, -122.32945], 12); // Koordinat pusat dan tingkat zoom

      // Tambahkan layer Bing Maps dengan mode satelit
      // var bingLayer = L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=fUxODUXeLHdE745dEVmA', {
      //   subdomains: ['t0', 't1', 't2'],
      //   minZoom: 1,
      //   maxZoom: 19
      // }).addTo(map);
      var bingLayer =  L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=fUxODUXeLHdE745dEVmA', {
      attribution: 'Peta oleh <a href="https://www.maptiler.com/">MapTiler</a>',
      maxZoom: 18,
    }).addTo(map);

      // Tambahkan layer OpenStreetMap
      var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // Buat layer kontrol untuk mengganti tampilan peta
      var baseLayers = {
        'Bing Maps (Satelit)': bingLayer,
        'OpenStreetMap': osmLayer
      };
      L.control.layers(baseLayers).addTo(map);

      // Tambahkan penanda lokasi pada peta
      var marker = L.marker([47.60357, -122.32945]).addTo(map);
      marker.bindPopup("Lokasi saya").openPopup();
    }
  </script>

  <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=AimbuEYMxOhYsh6IdvPCQOAWgzlvqPigaD2Bg-7Kt1sEMLU5KsM6ety2WGKYgT-T&callback=loadMapScenario' async defer></script>
  <script type='text/javascript' src='https://unpkg.com/leaflet@1.7.1/dist/leaflet.js'></script>
</body>
</html>
{{-- <!DOCTYPE html>
<html>
<head>
  <title>Web GIS dengan MapTiler - Mode Satelit</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>Web GIS dengan MapTiler - Mode Satelit</h1>
  
  <div id="map"></div>
  
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>
    var latitude = -6.200000; // Koordinat latitude
    var longitude = 106.816666; // Koordinat longitude
    var zoomLevel = 12; // Tingkat zoom
  
    var map = L.map('map').setView([latitude, longitude], zoomLevel);
    
    L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=fUxODUXeLHdE745dEVmA', {
      attribution: 'Peta oleh <a href="https://www.maptiler.com/">MapTiler</a>',
      maxZoom: 18,
    }).addTo(map);
  </script>
</body>
</html> --}}
