Leaflet : Ajout de pop-ups

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
    <!-- Leaflet : Placer le JS APRES le CSS -->
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  </head>

  <body>
    <h1>Pop-ups</h1>
    <div id = "mapid"></div>
    <script src = "lib/script.js"></script>
  </body>
</html>

#mapid { 
  height: 180px; 
}

var mymap = L.map('mapid');

mymap.setView([48.8417, 2.2683], 16);

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
  {
    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>'
  }).addTo(mymap);

// Marqueur sur l'IUT
var marker = L.marker([48.8417, 2.2683]).addTo(mymap);

// Cercle 100 mètres autour de l'IUT
var circle = L.circle([48.8417, 2.2683], {
    color: 'red',
    radius: 100
}).addTo(mymap);

// Polygone de l'IUT
var polygon = L.polygon([
    [48.84195, 2.26767],
    [48.84175, 2.2679],
    [48.84135, 2.26875],
    [48.84185, 2.26925],
    [48.84195, 2.26905],
    [48.84168, 2.2688],
    [48.84196, 2.2681],
    [48.84209, 2.26829],
    [48.84215, 2.2681]
]).addTo(mymap);

// Ajout des pop-ups
marker.bindPopup("<strong>IUT</strong><br>Paris Descartes");
circle.bindPopup("100 mètres autour de l'IUT");
polygon.bindPopup("Délimitation de l'IUT");

var popup = L.popup()
    .setLatLng([48.8413, 2.2662])
    .setContent("Point d'intérêt")
    .openOn(mymap);