MWS MapBox

mapbox.js

var mymap = L.map('mapid').setView([-0.0610732,109.3422024], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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',
accessToken: 'pk.eyJ1IjoiaW5kcmFtYWhrb3RhIiwiYSI6ImNqbmV0ZXY1MDEzaHQzcXBsZW9qeGlwOG0ifQ.PMT988D2Cjhph1mY9e92wQ'
}).addTo(mymap);

var circle = L.circle([-0.032973, 109.322001], {
    color: '#2f3ba2',
    fillColor: '#8dfecd',
    fillOpacity: 0.5,
    radius: 2000
}).addTo(mymap);

const URL = "assets/jsons/peta.json";

fetch(URL)
.then(function(response){
    if (response.status !== 200){
        console.log('Ada masalah. Status Code: ' + response.status);
        return;
    }
    return response.json()
})
.then ( resp => {
    let places= JSON.stringify(resp.places);
    localStorage.setItem('places', places);

    //console.log(places);
    console.log(localStorage.getItem('places'));
})
.catch(function(err){
    console.log(err);
});

/* async function f(URL){
    try {
        const resp = await(fetch(URL));
        const resp2 = await resp.json();
        localStorage.setItem('places', JSON.stringify(resp2.places));
    }
    catch(err){
        console.log(err);
    }
}
f(URL); */

// console.log(localStorage.getItem('places'));
let places = JSON.parse(localStorage.getItem('places'));
console.log("places: " + places);

for (str of places){
    let marker = L.marker(str.posisi).addTo(mymap);
    marker.bindPopup(`<center><b>${str.nama}</b><br>${str.keterangan}</center>`).openPopup()
    .on('click', viewResponse);
    
    marker.gambar = str.gambar;
    marker.respon = str.respon;
}

function viewResponse(){
    document.getElementById("respon").innerHTML = this.respon;
    document.getElementById("gambar").src = this.gambar;
}