Drawing circles on a map in leafletjs

This demo illustrated the difference between Circle and CircleMarker in leaflet.js.

by Nikolay Petrov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div class="container">
  This demo illustrated the difference between <a href="http://leafletjs.com/reference.html#circle">Circle</a> and <a href="http://leafletjs.com/reference.html#circlemarker">CircleMarker</a> in <a href="http://leafletjs.com/">leaflet.js</a>.
  <p>
    Circle is a class for drawing circle overlays on a map. Its radius is specified in <em>meters</em>.
    <p>
      CircleMarker circle of a fixed size with radius specified in pixels. While CircleMarkers are always rendered in the same size for a given zoom level, the size of Circles may vary due to the <a href="https://en.wikipedia.org/wiki/Mercator_projection">Mercator projection</a>      (check <a href="http://stackoverflow.com/questions/36426499/why-does-circle-circle-size-change-on-map">this question on Stackoverflow</a>).

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

CSS

.container {
  width: 100%;
  padding: 10px;
}

#map {
  height: 400px;
}

JavaScript

center = [0, 0];

// Create the map
var map = L.map('map').setView(center, 0);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
  }).addTo(map);

for (var i = -6; i < 6; i++) {
  for (var j = -6; j < 6; j++) {
    center = [30 * i, 30 * j];
    console.log(center);
    console.log("--");
    circle = L.circle(center, 500000, {
      color: 'white',
      fillColor: '#f03',
    }).addTo(map);
    circle = L.circleMarker(center, 1000, {
      color: '#000080',
      width: .5,
      fillColor: 'blue',
      fillOpacity: 0
    }).addTo(map);
  }
};