//LINK LIBRARY YG DIBUTUHKAN

<!-- Leaflet -->

<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<script type="text/javascript"
src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
<script src="https:://unpkg.com/maplibre-gl@1.13.0-rc.3/dist/mapbox-gl.js"></
script>
<link href="https://unpkg.com/maplibre-gl@1.13.0-rc.3/dist/mapbox-gl.css"/>
<script type="text/javascript" src="https://rawgit.com/mapbox/mapbox-gl-
leaflet/master/leaflet-mapbox-gl.js"></script>
<!-- End -->

//CONTAINER MAP NYA

<div class="container map-sagasitas-indonesia text-center">
<h1>PELATIHAN CLOUD COMPUTING</h1>
<div id="my-map" style="width:150%;height:580px;"></div>
<!-- <img src="assets/map/Indonesia-fullhd.png" alt="" id="map-indonesia"> -->
</div>

//SCRIPT MAPNYA ABAIKAN YANG DI COMMENT :) MUMET COORDINATE

<!-- Script For Map -->
<script type="text/javascript">
// The Leaflet map Object
var map = L.map('my-map').setView([0.659, 121.113], 5);
var imagePath = 'C:\Users\Alfi\Documents\WEB\Web-Sagasitas-AWSPage\
toner.json';
// the attribution is required for the Geoapify Free tariff plan
// map.attributionControl.setPrefix('').addAttribution('Powered by <a
href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a
href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>');

// Get your own API Key on https://myprojects.geoapify.com

// var myAPIKey = "0de2b275f1be4be5848338b7cb8ad4f9";
var ini = L.mapboxGL({
style: `https://json.extendsclass.com/bin/9fa787ed4f0b`,
}).addTo(map);
// Pop UP Zoom Marker
var yogyakarta = L.marker([-7.8033, 110.3541]);

var yogyakartamarkers = new L.FeatureGroup();

yogyakartamarkers.addLayer(yogyakarta);
map.on('zoomend', function() {
if (map.getZoom() <6){
map.removeLayer(yogyakartamarkers);
}
else {
map.addLayer(yogyakartamarkers);
}
});

L.marker([-0.9318, 100.3322]).addTo(map)
 .bindPopup('Yogyakarta')
.openPopup();
L.marker([-6.1742, 106.8275]).addTo(map)
.bindPopup('Yogyakarta')
.openPopup();
// var latlngs = [
// [-254.79492187500003,-6.757351500676298],[-254.62738037109378,-
6.631870206172686],
// [-253.98468017578128,-5.900188795584172 ],[-252.68554687500003,-
5.97394873103254 ],
// [-250.93322753906253,-6.779171028142861 ],[-249.15618896484378,-
6.424483546180726 ],
// [-247.44232177734378,-6.86643922958172 ],[-247.09899902343753,-
7.626609147576068 ],
// [-246.14318847656253,-7.705548128425908 ], [-245.53344726562503,-
7.825289472549634 ],
// [-245.60760498046878,-8.456072285927258 ],[-245.39886474609378,-
8.752080111542417 ],
// [-246.09375000000003,-8.575589503988725 ],[-246.60186767578128,-
8.409885221473996 ],
// [-247.86254882812503,-8.325647599239051 ],[-249.71374511718753,-
8.02659484248955 ],
// [-251.60888671875003,-7.825289472549634 ],[-253.58367919921878,-
7.378810188182938],
// [-253.56445312500003,-6.967323125342339 ],[-254.34722900390628,-
6.8528046229326005 ],
// [-254.75646972656253,-6.860985433763648 ],
// ];
// var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// var statesData = {"type":"FeatureCollection","features":[
// {"type":"Feature","id":"01","properties":
{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-
87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-
85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-
85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-
85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-
85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-
87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-
87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-
87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-
88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-
88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-
88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},
// {"type":"Feature","id":"01","properties":{"name":"Bandung","density":32.65},
// "geometry":{
// "type":"Polygon",
// "coordinates":[
// [

// ]
// ]}},
// ]};
// var map2 = L.map('map').setView([6.751896464843375, 105.19683837890626], 4);

// var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

// maxZoom: 19,
// attribution: '&copy; <a
href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map2);
// L.geoJson(statesData).addTo(map2);
// function getColor(d) {
// return d > 1000 ? '#800026' :
// d > 500 ? '#BD0026' :
// d > 200 ? '#E31A1C' :
// d > 100 ? '#FC4E2A' :
// d > 50 ? '#FD8D3C' :
// d > 20 ? '#FEB24C' :
// d > 10 ? '#FED976' :
// '#FFEDA0';
// }
// function style(feature) {
// return {
// fillColor: getColor(feature.properties.density),
// weight: 2,
// opacity: 1,
// color: 'white',
// dashArray: '3',
// fillOpacity: 0.7
// };
// }

// L.geoJson(statesData, {style: style}).addTo(map);

</script>
<!-- End -->