Now you’re ready to initialize the map and do some stuff with it.1 Leaflet has methods for adding various geometric objects and markers to the map. The basic use of these methods looks like this

var VARNAME = L.typeofobject(coordinates and other parameters).addTo(mapobjectname)

Thus, for example, we can add a circle:

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

OR a polygon

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

Or a marker

var marker = L.marker([51.5, -0.09]).addTo(map);
++++ My Leaflet GIS Work
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map { height: 180px; width: 800px;  background-color: black; margin: auto;}
</style>
</head>

<body>
<h3>Version 0.7</h3>

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors',
     maxZoom: 18
 }).addTo(map);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

</script>

</body>

My Leaflet GIS Work