function leaflet(id) { var id = $('.map').each(function() { $(this).attr('id'); }); for (var i = 0; i < id.length; i++) { console.log(id[i]); for (var i = 0; i < coord_data.x.length; i++) { for (var i = 0; i < coord_data.y.length; i++) { var LeafIcon = L.Icon.extend({ options: { iconSize: [25, 35], iconAnchor: [25, 35], } }); var greenIcon = new LeafIcon({iconUrl: '/user/themes/vocurations/images/point.svg'}); console.log(coord_data.x[i]); console.log(coord_data.y[i]); var paris = L.marker([coord_data.x[i], coord_data.y[i]]).bindPopup('This is Paris, Fr.') var cities = L.layerGroup([paris]); var mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2V2aW50ZXNzaWVyIiwiYSI6ImNrMGdqbjZsczAweWkzcW5yMWt4M2UzamYifQ.Tfarhi-XqGp7iIpwfANSGg'; var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light'}) var map = L.map(id[i], { center: [coord_data.x[i], coord_data.y[i]], zoom: 15, layers: [grayscale] }); L.marker([coord_data.x[i], coord_data.y[i]], {icon: greenIcon}).bindPopup(id[i]).addTo(map); } } } } $(document).ready(function(){ leaflet(); });