สัญลักษณ์เครื่องหมายแบบกำหนดเองในเครื่องหมาย GeoJSON (MAPBOX)

ฉันมีปัญหาตามที่อธิบายไว้ที่นี่: สัญลักษณ์ Mapbox Marker ที่มีสามหลัก

ฉันกำลังพยายามแสดงภาพเครื่องหมายที่มีตัวเลขตั้งแต่สามหลักขึ้นไปอยู่ในนั้น

จนถึงตอนนี้ฉันพบวิธีแก้ปัญหานี้:

จาวาสคริปต์:

L.NumberedDivIcon = L.Icon.extend({
    options: {
    number: ''
    },
    createIcon: function () {
        var div = document.createElement('div');
        var numdiv = document.createElement('div');
        numdiv.setAttribute ( "class", "number" );
        numdiv.innerHTML = this.options['number'] || '';
        div.appendChild ( numdiv );
        this._setIconStyles(div, 'icon');
        return div;
    }
});

var marker = new L.Marker(new L.LatLng(40, -78), {
    icon:   new L.NumberedDivIcon({number: '123'})
});
marker.addTo(map);

ซีเอสเอส:

.leaflet-marker-icon .number{
    position: relative;
    font-size: 14px;
    text-align: center;
    background-color: #3399ff;
    color: white;
    border-radius: 100%;
  padding: 10px;
}

ด้วยวิธีนี้ฉันจึงสามารถสร้างเครื่องหมายดังนี้:

ฉันต้องการใช้รูปแบบ GeoJSON เพื่อสร้างเครื่องหมายสามหลัก ตัวอย่างเช่น:

L.mapbox.markerLayer({
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-99, 36.9]
    },
    properties: {
        title: 'A Single Marker',
        description: 'Just one of me',
        // one can customize markers by adding simplestyle properties
        // http://mapbox.com/developers/simplestyle/
        'marker-size': 'large',
        'marker-color': '#775556',
        'marker-symbol': '11'
    }
}).addTo(map);

โปรดทราบว่า 'สัญลักษณ์เครื่องหมาย': 'X' รองรับตัวเลขที่มีตัวเลขสูงสุดสองหลัก

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

JSFIDDLE