如何在Leaflet.js中添加条形图标记？

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<div id="map" style="height: 500px;"></div>

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
}).addTo(map);

var markerLayer = L.geoJSON().addTo(map);

var geojsonFeature = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [51.5, -0.09]
    },
    "properties": {
        "name": "某地点",
        "value": 50  // 条形图的值
    }
};

L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        var value = feature.properties.value;
        var iconSize = [20, value * 10];  // 根据值设置条形图的大小

        var divIcon = L.divIcon({
            className: 'bar-icon',
            iconSize: iconSize
        });

        return L.marker(latlng, { icon: divIcon });
    }
}).addTo(markerLayer);

.bar-icon {
    background-color: blue;
    border-radius: 4px;
    border: 1px solid black;
}