Develop Reference

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 - get data from json on marker click, not popup

The title is not the best explanation. I'm creating a beer flavour graph (no map tiles involved) that uses a custom icon of each beer bottle for each marker. So far so good.
screenshot of the current build
I've got a div outside the map, where I want to display the same bottle png used for the icon (but larger) when each marker is clicked...
for (var i=0; i < markers.length; ++i )
{
var IconVar = L.icon({
iconUrl: markers[i].bottleurl,
shadowUrl: 'images/beer-shadow.png',
iconSize: [36, 120],
shadowSize: [74, 50],
iconAnchor: [16, 60],
shadowAnchor: [35, -26],
popupAnchor: [0, -65]
})
var bigbottleUrl = markers[i].bottleurl;
L.marker( [markers[i].lat, markers[i].lng], {icon: IconVar}, )
.bindPopup( 'Text and some custom content bla bla', customOptions )
.on('click', function(e){document.getElementById("bigbottle").src = bigbottleUrl;}).addTo( beermap );
}
Which works to a point, but defaults to the last marker that is set from a json file. Maybe I can't call different variables from inside the loop, or I haven't set up my loop right.
I've looked through lots of questions here, and tried making it more specific using e.popup._source and this.option and making it specific using _leaflet_id but I'm pushing well beyond my understanding of javascript!
Any ideas?

After going down a few dead ends this was the solution.
var imgUrl;
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('click', function(event) {
if (event.target.className == 'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive') {
var imgSrc = event.target.src;
var imgFile = imgSrc.substring(imgSrc.lastIndexOf('/')+1);
imgUrl = 'images/' + imgFile;
document.getElementById("bigbottle").src = imgUrl;
}
});
});
There's probably a bit of redundant code, but this was the most efficient way, not putting an onClick event onto everything or having a complex variable that I didn't know how to construct!

LeafletJS how to display HTML Elements/DIV/Input Box/Button on specific position using LongLat

I'd like to ask about if it is possible or how do I add a "HTML Element" on spefic location on the map using Long Lat?
My goal is to add a Label and Text Input or a Text and Button pair sort of thing of specific position on the map.
Like for example:
Displaying a html + css control that displays a name and hobby:
Like this
Given the longitude and latitude place it on the map.
Is there a way doing this? How to do this?
Then maybe add something like a alert when clicking it.

You have many options:
Using L.popup's
Using L.tooltip's
Using an L.marker with an L.divIcon
Example:
var popup = L.popup({
closeButton: false,
autoClose: false,
closeOnClick: false
})
.setLatLng([48.85, 2.30])
.setContent(makeHtml(0));
var tooltip = L.tooltip({
permanent: true,
direction: 'left'
})
.setLatLng([48.84, 2.34])
.setContent(makeHtml(1));
var divIcon = L.divIcon({
html: makeHtml(2),
className: 'divIcon',
iconSize: [200, 50],
iconAnchor: [0, 0]
});
var marker = L.marker([48.85, 2.35], {
icon: divIcon
});
var map = L.map('map').setView([48.85, 2.35], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
popup.openOn(map);
map.openTooltip(tooltip);
marker.addTo(map);
function makeHtml(id) {
return '<label for="input_' + id + '">Input:</label><input type="text" value="my value…" id="input_' + id + '" />'
}
#map {
height: 200px;
}
.divIcon {
background-color: orange;
border: 1px solid black;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<div id="map"></div>

I can think about one way. I've used the L.divIcon for the same purpose. Here is a part of my code :
var yourPoint = L.divIcon({
className: 'map-marker-yourClassHere',
iconSize: null,
iconAnchor: [17, 35],
html:'<div class="text-marker">'+ txt +'</div>'
});
L.marker(latlng, {icon: yourPoint}).addTo(map);
You can simply put everything you want into this html option.

Negative value in anchor property

Chaps, using MarkerClusterer (Google Maps JS API), I'm not able to set a negative value for the position of the text inside the clusterer.
I got a custom cluster icon that requires the text to be at the top-right corner of the clusterer canvas.
Currently, I'm with this: . But the number should be inside the white cirlce on the top-right.
Is it possible? If so, why am I not achieving this (the code follows)?
var clusterStyles = [{url: 'imgs/mapa/cluster.png',
height: 56,
width: 48,
textSize: 15,
anchor: [0, 32]}];

Have a look at this working example. It is working fine. I took your script code and just replaced the url of the image:
var clusterStyles = [{
url: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m1.png',
height: 56,
width: 48,
textSize: 15,
anchor: [-20, 30]
}];
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
styles: clusterStyles
};
https://jsfiddle.net/mk06wc0k/
Minus values for the anchor are working good. If it's not working for you you have to show more code.