Leaflet Map Tests

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
    <script></script>
  </head>

  <body>
     <div  id='map'></div>
     <script  src="script.js"></script>
  </body>
 
</html>

var original_getPathString = L.Circle.prototype.getPathString;

L.Circle = L.Circle.extend({
	getPathString: function () {
		var center = this._point,
		    r = this._radius;
	  if (this._textNode && this._textNode.parentNode) {
			this._path.parentNode.removeChild(this._textNode);
			delete this._textNode;
		}

		var textNode = L.Path.prototype._createElement('text');
		
		textNode.setAttribute('text-anchor', 'middle');
		textNode.setAttribute('x', this._point.x);
		textNode.setAttribute('y', this._point.y);
		textNode.setAttribute('font-size', Math.pow(1.16, this._map.getZoom()) );
		
		textNode.appendChild(document.createTextNode(this.text));

		this._path.parentNode.appendChild(textNode);							

		this._textNode = textNode;
		
		return original_getPathString.call(this);    
		
	},
	setText: function (text) {
	  this.text = text;
		return this.redraw();
	}

});

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([37.8964, 28.2127], 15);

var circle = L.circle([37.8964, 28.2127], 200).setText("TEST");

circle.addTo(map);


// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);


#map {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	z-index: 0;
}