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

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/

Related

Why is my icon showing up as an empty square with Leaflet JS?

I'm trying to make my point marker have a picture icon, but for some reason, it's showing up on my map like this:
I've looked at the documentation on leaflet's website and what not but have had no luck. It's probably something pretty simple that I'm missing or brain farting on haha. Any help is much appreciated. Let me know what other code you might need to address the problem. TIA!
Here's my script
<script>
//create variable to hold the map element, give initial settings to map
var map = L.map("map", {
center: [38.1, -98.583333],
zoom: 4,
});
//add OSM tile layer to map element
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
{
attribution:
'© OpenStreetMap contributors © CARTO',
subdomains: "abcd",
maxZoom: 19,
}
).addTo(map);
var logo = L.icon({
iconUrl: "imgs/patrickLogo.png",
iconSize: [20, 20],
});
L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
.addTo(map)
.bindPopup("Berthoud, CO");
</script>
UPDATE: It's a 404 error. What does that mean and how can I fix it?
RESOLVED: changed my image path to an absolute path and it worked! Thanks, y'all.
var logo = L.icon({
iconUrl:
"https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
iconSize: [20, 20],
});

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)

Check on leaflet map for markers with specific icon

I want to check if there is a marker on the map with a "markerIconActive" icon.
I think the best would be to loop through all markers and check if there is one with a "markerIconActive" icon and if there's one to change it to "markerIconVisited". But how?
I use a marker clusterer so i can't just edit the DOM Elements Class to change the appearence of the marker.
Marker Icons:
var markerIconActive = L.divIcon({
className: 'marker--state--active',
html: "15",
iconAnchor: [20, 20]
});
var markerIconVisited = L.divIcon({
className: 'marker--state--visited',
html: "15",
iconAnchor: [20, 20]
});
I want to do it in vanilla Javascript.

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!

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.

Categories

Resources