render portal level using svg

git-patch.diff

diff --git a/code/boot.js b/code/boot.js
index b27f335..e4a24bb 100644
--- a/code/boot.js
+++ b/code/boot.js
@@ -250,6 +250,7 @@ function boot() {
   window.debug.console.overwriteNativeIfRequired();
 
   console.log('loading done, booting');
+  window.extendLeafletWithText();
   window.setupStyles();
   window.setupMap();
   window.setupGeosearch();
diff --git a/code/map_data.js b/code/map_data.js
index 15b5c5e..1563e74 100644
--- a/code/map_data.js
+++ b/code/map_data.js
@@ -245,7 +245,7 @@ window.renderPortal = function(ent) {
   var lvWeight = Math.max(2, portalLevel / 1.5);
   var lvRadius = Math.max(portalLevel + 3, 5);
 
-  var p = L.circleMarker(latlng, {
+  var p = L.circleMarkerWithText(latlng, {
     radius: lvRadius,
     color: ent[0] == selectedPortal ? COLOR_SELECTED_PORTAL : COLORS[team],
     opacity: 1,
@@ -254,6 +254,7 @@ window.renderPortal = function(ent) {
     fillOpacity: 0.5,
     clickable: true,
     level: portalLevel,
+    text: parseInt(portalLevel),
     team: team,
     details: ent[2],
     guid: ent[0]});

leafet_svg_text.js

window.extendLeafletWithText = function() {


  L.CircleMarkerWithText = L.CircleMarker.extend({
    options: {
      fontFamily: 'Coda',
      fontStroke: '#fff',
      fontWeight: 'bold',
      fontStrokeWidth: 2.5,
      fontStrokeOpacity: 0.6,
      fontFill: '#000',
      fontSize: 14
    },

    initialize: function (latlng, options) {
      L.CircleMarker.prototype.initialize.call(this, latlng, options);
    },

    setText: function(text) {
      this.options.text = text;
      this._updateText();
    },

    _updateStyle: function() {
      L.CircleMarker.prototype._updateStyle.call(this);
      this._updateText();
    },

    _updatePath: function() {
      if(this._oldPoint == this._point) return;
      this._oldPoint = this._point;

      L.CircleMarker.prototype._updatePath.call(this);
      this._updateTextPosition();
    },

    _updateTextPosition: function() {
      if(!this._textOuter) return;
      this._textOuter.setAttribute('x', this._point.x);
      this._textOuter.setAttribute('y', this._point.y);
      this._textInner.setAttribute('x', this._point.x);
      this._textInner.setAttribute('y', this._point.y);
    },

    _updateText: function() {
      if(!L.Browser.svg) return;

      if(this._text && !this.options.text) {
        this._container.removeChild(this._text);
      }

      if(!this.options.text) return;

      if(!this._text) {
        this._textOuter = this._createElement('text');
        this._textInner = this._createElement('text');
        this._text = this._createElement('g');
        this._text.setAttribute('text-anchor', 'middle');

        if(this.options.clickable) {
          this._text.setAttribute('class', 'leaflet-clickable');
        }

        this._text.appendChild(this._textOuter);
        this._text.appendChild(this._textInner);
        this._container.appendChild(this._text);
      }

      // _textOuter contains the stroke information so the stroke is
      // below the text and does not bleed into it.
      this._textOuter.setAttribute('stroke', this.options.fontStroke);
      this._textOuter.setAttribute('stroke-width', this.options.fontStrokeWidth);
      this._textOuter.setAttribute('stroke-opacity', this.options.fontStrokeOpacity);
      this._textOuter.setAttribute('dy', this.options.fontSize/2 - 1);
      this._textInner.setAttribute('dy', this.options.fontSize/2 - 1);

      // _text contains properties that apply to both stroke and text.
      this._text.setAttribute('fill', this.options.fontFill);
      this._text.setAttribute('font-size', this.options.fontSize);
      this._text.setAttribute('font-family', this.options.fontFamily);
      this._text.setAttribute('font-weight', this.options.fontWeight);

      // group elements can’t have positions
      this._updateTextPosition();

      if(this._textOuter.firstChild) {
        this._textOuter.firstChild.nodeValue = this.options.text;
        this._textInner.firstChild.nodeValue = this.options.text;
      } else {
        this._textOuter.appendChild(document.createTextNode(this.options.text));
        this._textInner.appendChild(document.createTextNode(this.options.text));
      }
    }
  });

  L.circleMarkerWithText = function (latlng, options) {
    return new L.CircleMarkerWithText(latlng, options);
  };
}