HTML elements slightly off centre

0
votes

I'm using the Leaflet Marker Cluster plugin with custom div elements to represent a cluster icon. When a group of markers on a map is clustered, a cluster icon appears in place of them. Hovering over the cluster icon reveals a polygon shape on the map indicating the area the cluster icon covers. I want the icons to sit in the middle of the polygon. However, they all seem to be slightly to the bottom right of the center. Here's an image to show what I mean. The black lined shapes indicate the polygon, the red lines where the middle of the polygon is and the blue circles are the cluster icons.

Pic below :

enter image description here

They blue circles are all slightly to the bottom right of the centre in my application. The CSS for my cluster icons is:

.marker-cluster-div {
    width: 40px;
    height: 40px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

Is there any easy way to force an element to the left and up from where it was originally positioned?

2
htmlcssleaflet
can you give the complete markup? marker-cluster-div looks fine from here! – NoobEditor
This looks like a positioning issue. There is nothing in the given code to indicate a positioning relationship of the 'icon' to the underlying polygon. – Paulie_D
The problem seems to be in the source of the marker cluster plugin, however, that code seems so complicated that I'm hesitant to mess around in it, content to solve the symptom instead. – yesman

2 Answers

1
votes

Make sure the parent element of .marker-cluster-div has a relative position and apply this css:

.marker-cluster-div {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}
1
votes

The proper way to use custom markers in the Clustermarker plugin is by using the iconCreateFunction which can passed in the options when initializing your Clustermarker:

iconCreateFunction: function (cluster) {
    var markers = cluster.getAllChildMarkers();
    var n = 0;
    for (var i = 0; i < markers.length; i++) {
        n += markers[i].number;
    }
    return L.divIcon({ html: n, className: 'mycluster', iconSize: L.point(40, 40) });
}

That way the plugin will do you heavy lifting and you can do fancy stuff based on the amount of childMarkers present within that cluster. See the documentation and a working example