Develop Reference

Markerclustrerplus style will not center

iam using this npm package
https://github.com/googlemaps/js-markerclustererplus
Iam trying to center the style and this is how.
let clusterStyle = {
textColor: 'white',
textSize: 14,
url: iconBase + 'pin-cluster-store.png',
width: 45,
height: 49
}
let mc = new MarkerClusterer(map,mapMarkers, {
maxZoom: 15,
gridSize: 50,
styles: clusterStyles
});
This is how it looks
I want it to be center of the circle. Whwn i add padding-top 16px in the console it works fine. But when i add it programatically in the "clusterstyle" nothing happends

You will need to adjust the anchors. https://googlemaps.github.io/js-markerclustererplus/interfaces/ClusterIconStyle.html
anchorIcon?: [number, number]
The anchor position (in pixels) of the cluster icon. This is the spot on the cluster icon that is to be aligned with the cluster position. The format is [yoffset, xoffset] where yoffset increases as you go down and xoffset increases to the right of the top-left corner of the icon. The default anchor position is the center of the cluster icon.
anchorText?: [number, number]
The position (in pixels) from the center of the cluster icon to where the text label is to be centered and drawn. The format is [yoffset, xoffset] where yoffset increases as you go down from center and xoffset increases to the right of center. The default is [0, 0].

how to set leaflet marker to center of div tag in leafletjs

I want the marker to be in the center of the map, but it is wrong.
I read the rest of the articles, but my problem was not solved.
var map = L.map('map').setView([lat, lng], 18);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk',
attribution: 'nemajoo',
watch: true
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [28, 60],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'images/mrk.png'});
var center = map.getCenter();
var marker = L.marker([center.lat, center.lng],{icon: greenIcon}).addTo(map);

The problem here could be in any of the 3 configurations given we don't have the image:
mrk.png has some spacing inside the image, this can be fixed with any image editing tool.
the options object, on the anchor tag moves the image, making it look like it's not centered.
When you set the center, as far as I can see, you first get the center from the map, then use this center to position the icon, this is nicely done but markers with distant zooming don't represent it's center accurately.
In resume:
The problem is on the png or the anchor configuration, modify those values and try again.
If this does not work you can upload a sample minimal project so we can check (don't upload api keys or similar)

Leaflet Awesome-Markers (Adding Numbers)

I am using the Leaflet.Awesome-Markers plugin with LeafletJS.
I have implemented it correctly, however now I'd like to be able to use numbers from 0 - 9 to represent markers.
Here's a JS Fiddle implementation to show how the plugin behaves.
http://jsfiddle.net/fulvio/VPzu4/200/
The plugin allows the use of font-awesome icons and glyph icons (both of course, do not offer any 0 - 9 numbers as icons. argh!)
http://getbootstrap.com/components/#glyphicons
http://fortawesome.github.io/Font-Awesome/cheatsheet/
The documentation mentions the ability to use extraClasses and I was wondering whether anyone could point me in the right direction as to how to leverage from this in order to display numbers rather than icons or whether there is simply another way to achieve this.
Thanks in advance for your help.
UPDATE:
Thanks for the comment #Can.
The author of awesome-markers got another tree where he added exactly what you are looking for awesome-markers with numbers/letters be sure to grab the unminified JS.

I have tried Numbered Markers plugin, but it icon is not pretty as other Awesome Markers, and make page layout style inconsistent, so I made small changes in Awesome-Markers plugin to make it support numbers. It is very simple.
this is Numbered Markers plugin effect, if you like it please skip my answer.
change leaflet.awesome-markers.js line 2, add html:""
L.AwesomeMarkers.Icon = L.Icon.extend({
options: {
iconSize: [35, 45],
iconAnchor: [17, 42],
popupAnchor: [1, -32],
shadowAnchor: [10, 12],
shadowSize: [36, 16],
className: 'awesome-marker',
prefix: 'glyphicon',
spinClass: 'fa-spin',
extraClasses: '',
icon: 'home',
markerColor: 'blue',
iconColor: 'white',
html : ""
},
change leaflet.awesome-markers.js line 80,
return "<i " + iconColorStyle + "class='" + options.extraClasses + " "
+ options.prefix + " " + iconClass + " " + iconSpinClass + " "
+ iconColorClass + "'>" + options.html + "</i>";
when creating icon, call like before
var jobMarkerIcon = L.AwesomeMarkers.icon({
icon: '',
markerColor: 'darkblue',
prefix: 'fa',
html: (i+1)
});
comment out line 45 and 47.
the result is like below screenshot.
code changes diff shows below.

Instead of using the Awesome-Markers plugin, you could follow this article on creating numbered markers in Leaflet:
http://blog.charliecroom.com/index.php/web/numbered-markers-in-leaflet
The associated Gist is here:
https://gist.github.com/comp615/2288108
An simple example of how this would work is as follows:
// The text could also be letters instead of numbers if that's more appropriate
var marker = new L.Marker(new L.LatLng(0, 0), {
icon: new L.NumberedDivIcon({number: '1'})
});

Another strategy is to use the Leaflet.ExtraMarkers plugin
Code the numeric marker with these options:
var numMarker = L.ExtraMarkers.icon({
icon: 'fa-number',
number: 12,
markerColor: 'blue'
});
L.marker([41.77, -72.69], {icon: numMarker}).addTo(map);

If you don't want to use the font-awesome, a fairly simple solution presented here:
Simple Numbered Markers
it doesn't need any extra library. It's already in leaflet. Just create a CSS class with icon image like this:
.number-icon
{
background-image: url("images/number-marker-icon.png");
background-size: 40px 40px;
background-repeat: no-repeat;
margin: 0 auto;
text-align:center;
color:white;
font-weight: bold;
}
Then create icon like this:
var numberIcon = L.divIcon({
className: "number-icon",
shadowSize: [20, 30], // size of the shadow
iconAnchor: [20, 40],
shadowAnchor: [4, 30], // the same for the shadow
popupAnchor: [0, -30],
html: variable_containing_the_number
});
var marker = new L.marker([lat, long],
{
icon: numberIcon
});

Change position of leaflet label

I'd like to add labels to my leaflet-markers, and then position them above and horizontally centered for the marker icon.
With the labelAnchor option in the Leaflet.label plugin I can manually adjust every label so that I get what I want, and for now I've added a fixed width to my labels so that I know the text will be centered. But there must be a better way to achieve this?
http://jsfiddle.net/NYGvibeke/frUf4/3/
<style type="text/css">
.labeltext { width: 120px; text-align: center; border:none; }
</style>
<script type="text/javascript">
var myIcon = L.icon({
iconUrl: 'http://icons.iconarchive.com/icons/visualpharm/icons8-metro- style/512/Maps-and-Geolocation-Marker-icon.png',
iconSize: [18, 30],
iconAnchor: [10, 30],
labelAnchor: [-80, -40]
});
var layer = new L.StamenTileLayer("toner-lite", {maxZoom: 10});
var map = new L.Map("map", {
center: new L.LatLng(30, 100),
zoom: 4,
maxZoom: 12,
minZoom: 2
});
map.addLayer(layer);
var marker1 = L.marker([25, 100], {icon: myIcon}).bindLabel('This is a label text', { noHide: true, className: 'labeltext'}).addTo(map);
</script>

Change
.labeltext { width: 120px}
to
.labeltext { width: auto}
The auto value will dynamically size the width of the label.
UPDATE
Actually, that's only part of it. Here's the rest in a jsfiddle. Basically, you need to dynamically assign the position based on the number of characters. It takes a little bit of calibration (depending on font typeface/size), but here's what I came up with for labelAnchor:
[-label[0].length*2.5-20, -40]

How to center the infobubble when marker is clicked?

im using the infobubble from googlemaps api V3.
I have an event which is on my markers and each time it gets clicked I get a bubble.
I used infobox and infowindow before and they always positioned themselves in the center of the map when i clicked on the marker, if my knowledge of them both is correct then this was accomplished by the pixelOffset property.
Infobubble however does not give me the same effect, i get this:
My code:
google.maps.event.addListener(marker, 'click', function() {
$.ajax({
url: '/templates/GoogleMapsMarkerInfo.aspx?id=' + page + '&epslanguage=<%=CurrentPage.LanguageBranch %>',
dataType: "html",
success: function(data){
var myOptions = {
content: data,
maxWidth: 300,
shadowStyle: 1,
padding: 0,
backgroundColor: '#fff',
borderRadius: 15,
arrowSize: 7,
borderWidth: 1,
borderColor: 'blue',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 25,
backgroundClassName: 'phoney',
arrowStyle: 2
};
if(infoBubble.getContent()!="")
infoBubble.close()
infoBubble.setOptions(myOptions)
infoBubble.open(map, marker);
}
});
To clarify:
I wan't the bubble to get centerd on the map so that the entire information is shown, I don't want to be forced to drag on the map to see the entire bubble.
If more info is needed ask and i will do my best to provide it.

Only set disableAutoPan to False.