GETTING STARTED WITH LEAFLETJS

<!doctype html>
	<head>
		<style>
			/* CSS comes here */
			#mapid {
                width: 100%;
                height: 400px
            }
		</style>
		
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
		
        <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
		<title>My Favorite Sport</title>
	</head>
	<body>
		<div id="mapid"></div>

		<script type="text/javascript">
            var mymap = L.map('mapid').setView([28.612, 77.229], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
            // making a marker
            var marker = L.marker([28.614, 77.199]).addTo(mymap);
            // making a circle on area
            var circle = L.circle([28.612, 77.229], {
	            color: 'red',
	            fillColor: '#f03',
	            fillOpacity: 0.5,
	            radius: 1000
            }).addTo(mymap);
            // adding popup to marker
            marker.bindPopup("<b>Welcome to Rashtrapati Bhawan</b>.").openPopup();
        </script>
	</body>
</html>