<div id="map"></div>

#map, body { 
                margin: 0 !important;
                padding: 0 !important;
                height: 100vh;
            }

var map = L.map('map').setView([51.51, -0.047],13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);
var circle = L.circle([51.505, -0.09], {
                         color: 'red',
                         fillColor: '#f03',
                         fillOpacity: 0.5,
                         radius: 500
             });
             circle.addTo(map);
var polygon = L.polygon([
                                     [51.509, -0.08],
                                     [51.503, -0.06],
                                     [51.51, -0.047]
                                     ]);
polygon.addTo(map);

var marker = L.marker([51.513, -0.06]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);