Add Markers and Popups to a Leaflet Map

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([48.8566, 2.3522], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
L.marker([48.8584, 2.2945]).addTo(map).bindPopup('<strong>Eiffel Tower</strong><br>Champ de Mars, Paris');
L.marker([48.8606, 2.3376]).addTo(map).bindPopup('<strong>Louvre Museum</strong><br>Rue de Rivoli, Paris');
L.marker([48.8530, 2.3499]).addTo(map).bindPopup('<strong>Notre-Dame</strong><br>Île de la Cité, Paris');

</script>
</body>
</html>

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([48.8566, 2.3522], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
L.marker([48.8584, 2.2945]).addTo(map).bindPopup('<strong>Eiffel Tower</strong><br>Champ de Mars, Paris');
L.marker([48.8606, 2.3376]).addTo(map).bindPopup('<strong>Louvre Museum</strong><br>Rue de Rivoli, Paris');
L.marker([48.8530, 2.3499]).addTo(map).bindPopup('<strong>Notre-Dame</strong><br>Île de la Cité, Paris');