basic-leaflet-example.js

// Requires a div with id="map" on a html file with leaflet's css and js.
const towerLocation = [43.385807,-8.406524];
const mymap = L.map('map').setView(towerLocation, 16);

// GET ONE in https://docs.mapbox.com/help/how-mapbox-works/access-tokens;
const ACCESS_TOKEN = "--YOUR--ACCESS--TOKEN--";
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + ACCESS_TOKEN, {
  maxZoom: 18,
  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>',
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1
}).addTo(mymap);

const marker = L.marker(towerLocation).addTo(mymap);

marker.bindPopup("<b>Tower of Hercules</b><br/>UNESCO World Heritage site");