Develop Reference

Set custom marker image as center instead of bottom in Leaflet

I am using Leaflet for my project, as pr Leaflet Documentation we can use Custom image for put marker on map. i set marker using L.Icon and its working fine, but marker is staring from Bottom Position. But i want to set my marker image center of that Latitude and Logitude.
Here is an explanation using Image
And I want Like this
here is My Code
var icon = window.L.icon({
iconUrl: "MYICON_SVG_IMAGE",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -40],
});

Change iconAnchor: [25, 50], (the bottom) to iconAnchor: [25, 25], (the center)
var icon = window.L.icon({
iconUrl: "MYICON_SVG_IMAGE",
iconSize: [50, 50],
iconAnchor: [25, 25],

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)

How can I set the custom marker icon for my leaflet map with NUXT.js

I am trying to change marker icon for separate marker on my OpenStreetMap.
mapIconsReinit(L) {
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('#/assets/img/map_markers/default/marker-icon-2x.png'),
iconUrl: require('#/assets/img/map_markers/default/marker-icon.png'),
shadowUrl: require('#/assets/img/map_markers/default/marker-shadow.png'),
});
},
getMarkerIcon(L, color) {
return L.divIcon({
iconRetinaUrl: require('#/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
iconUrl: require('#/assets/img/map_markers/marker-icon-' + color + '.png'),
shadowUrl: require('#/assets/img/map_markers/marker-shadow.png'),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
}
First function works fine with paths like '#/...', but the 2nd one - no.
Default marker works fine:
L.marker([marker.lat, marker.lng]).addTo(_context.map)
but if I try to use custom marker:
L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)
I see a white square

You instantiate a Leaflet DivIcon whereas you pass options applicable for a Leaflet Icon.
Use L.icon instead of L.divIcon in that case.
The Icon expects the iconUrl (and other *Url) option to place the corresponding image on the map.
The DivIcon does not place an image but a bare HTML div element, so that you can fill it with arbitrary HTML content. By default it is styled as a white square with black border.

How to use custom icons on a leaflet-omnivore layer?

I'm trying to change the default marker for one of my KML layers. I'm using leaflet-omnivore for this.
This is the code I already have. The markers are not changing to the image and the layer control is only displaying the text, even though the img bit is in the code.
Marker Code:
var redIcon = L.icon({
iconUrl: 'icon.png',
iconSize: [20, 24],
iconAnchor: [12, 55],
popupAnchor: [-3, -76]
});
var nissanLayer = omnivore.kml('icons.kml')
.on('ready', function() {
map.fitBounds(customLayer.getBounds());
//change the icons for each point on the map
// After the 'ready' event fires, the GeoJSON contents are accessible
// and you can iterate through layers to bind custom popups.
customLayer.eachLayer(function(layer) {
// See the `.bindPopup` documentation for full details. This
// dataset has a property called `name`: your dataset might not,
// so inspect it and customize to taste.
layer.icon
layer.bindPopup('<img src="icon.png" height="24"><br><h3>'+layer.feature.properties.name+'</h3>');
});
})
.addTo(map);
var marker = new L.Marker(customLayer, {icon:redIcon});
map.addLayer(marker);

You seem to have overlooked the setIcon() method of L.Marker. I'd also check that a L.Layer is in fact a L.Marker before calling any L.Marker functionality, just for code sanity. e.g.:
var redIcon = L.icon({ /* ... */ });
var omnivoreLayer = omnivore.kml('icons.kml')
.on('ready', function() {
omnivoreLayer.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
layer.setIcon(redIcon);
}
});
})
.addTo(map);
However, the Leaflet-Omnivore documentation says that the better way to apply custom styling to an Omnivore layer is to create a L.GeoJSON instance with the desired filters and styling, and then pass that to the Omnivore factory method. I suggest you read the Leaflet tutorial on GeoJSON to become familiar with this.
So instead of relying on a on('ready') event handler (which would change the markers after they are created), this would save a tiny bit of time by creating the markers directly with the desired style:
var omnivoreStyleHelper = L.geoJSON(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redIcon});
}
});
var omnivoreLayer = omnivore.kml('icons.kml', null, omnivoreStyleHelper);

I haven't used leaflet that much but I did a small project where I set the icons to an image.
var redIcon = L.icon({
iconUrl: 'red-x.png',
iconSize: [25, 25], // size of the icon
iconAnchor: [12, 55], // point of the icon which will correspond to
marker's location
popupAnchor: [-3, -76] // point from which the popup should open
relative to the iconAnchor
});
var marker = new L.Marker(markerLocation, {icon:redIcon});
mymap.addLayer(marker);
Not sure how helpful this is really.
Links got a guide to follow which might be more use https://leafletjs.com/examples/custom-icons/

Leaflet custom marker icon scale to zoom

I use Leaflet to draw an OpenStreetMap and attach it with a custom icon marker
var mymap = L.map('mapid').setView([x, y], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);
var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});
var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);
mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});
Now I want to resize my marker icon depending on zoom level. There's something wrong in my above code. What should I do? If marker is a CircleMaker, there is a setRadius function for me to handle this with ease. But in this case the marker is a custom icon, I tried as above and failed. How to fix it?

As YaFred said, there were some typos like zoomend, but also mymap.getZoom that should be mymap.getZoom()
I made a new answer to this old question to propose a more efficient solution. You can add a className to your icons (see leaflet documentation).
This means we can edit the height and width of the icon through css! In your zoomend function, instead of creating a new icon, simply call this JQuery:
var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});
For larger amounts of markers, this will significantly improve your performance as mentioned in this stackoverflow question:
Leaflet custom icon resize on zoom. Performance icon vs divicon

You have a typo: zoomed should be zoomend
map.on('zoomend', function() {
});
http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview
Apart from that, I would create and keep the icons out of the zoomend callback.
As it is, your code is creating an icon each time zoom is changing.