const myMap = new mapboxgl.Map({

     container: 'myMap',

     // Choose from Mapbox's core styles, or make your own style with Mapbox Studio

     style: 'mapbox://styles/mapbox/satellite-streets-v12', 

     zoom: 1,

     center: [80, 20],

     projection: 'globe'

  });

​

var markersData = [

  {

    "longitude": -77.69953535383326,

    "latitude" : 62.28805395398695,

    "title": "Marker 1"

  },

  {

    "longitude":  55.7025685972,

    "latitude" : -21.217044918851123,

    "title": "Marker 2"

  },

  {

    "longitude": -175.1420243897612,

    "latitude" : -21.219270605694547,

    "title": "Marker 3"

  }

];

​

​

myMap.on('load', function() {

  for (let i = 0; i < markersData.length; i++) {;

    var popupHTML = '<div><p>' + markersData[i]['title'] + '</p></div>';

    var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(popupHTML); 

    var marker = new mapboxgl.Marker({'color': "#f50085"}).setLngLat([markersData[i]['longitude'], markersData[i]['latitude']]).setPopup(popup);

​

    marker.addTo(myMap);

  }

​

});

​

document.getElementById('btn_globe').addEventListener('click', function() {

  myMap.setProjection({

    name: 'globe'

   })

});

​

document.getElementById('btn_mercator').addEventListener('click', function() {

  myMap.setProjection({

    name: 'mercator'

   })

});

​

document.getElementById('btn_naturalEarth').addEventListener('click', function() {

  myMap.setProjection({

    name: 'naturalEarth'

   })

});

​

​

document.getElementById('btn_en').addEventListener('click', function() {

    myMap.setLayoutProperty('country-label', 'text-field', ['get', 'name_es']);

});

​

document.getElementById('btn_fr').addEventListener('click', function() {

    myMap.setLayoutProperty('country-label', 'text-field', ['get', 'name_fr']);

});

​

​

document.getElementById('btn_zoom').addEventListener('click', function() {

    var end = {

      center: [-51.73542549226949, 64.17300218274057],

      zoom: 12,

      bearing: 0,

      pitch: 0

    };

    myMap.flyTo({

      ...end, // Fly to the selected target

      duration: 12000, // Animate over 12 seconds

      essential: true // This animation is considered essential with

      //respect to prefers-reduced-motion

    });

})

​

​

​

​

​

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

}