Scribd
Upload
10 views

Markers With Custom Icons - Leaflet - a JavaScript library for interactive maps

Uploaded by

agcolab92
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Markers With Custom Icons - Leaflet - a JavaScript library for interactive maps

Uploaded by

agcolab92
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

an open-source JavaScript library

for mobile-friendly interactive maps

Overview Tutorials Docs Download Plugins Blog

← Tutorials

Markers With Custom Icons


In this tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.

+
−

Leaflet | © OpenStreetMap contributors

See this example stand-alone.

Preparing the images


To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this
tutorial, we took the Leaflet logo and created four images out of it — 3 leaf images of different colors and one
shadow image for the three:

Note that the white area in the images is actually transparent.

Creating an icon
Marker icons in Leaflet are defined by L.Icon objects, which are passed as an option when creating markers. Let’s
create a green leaf icon:

var greenIcon = L.icon({


iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

Now putting a marker with this icon on a map is easy:

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

+
−

Leaflet | © OpenStreetMap contributors

See this example stand-alone.

Defining an icon class


What if we need to create several icons that have lots in common? Let’s define our own icon class containing the
shared options, inheriting from L.Icon! It’s really easy in Leaflet:

var LeafIcon = L.Icon.extend({


options: {
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});

Now we can create all three of our leaf icons from this class and use them:

var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),


redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

You may have noticed that we used the new keyword for creating LeafIcon instances. So why do all Leaflet classes
get created without it? The answer is simple: the real Leaflet classes are named with a capital letter (e.g. L.Icon),
and they also need to be created with new, but there are also shortcuts with lowercase names (L.icon), created for
convenience like this:

L.icon = function (options) {


return new L.Icon(options);
};

You can do the same with your classes too. OK, let’s finally put some markers with these icons on the map:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");

That’s it. Now take a look at the full example, the L.Icon docs, or browse other examples.

© 2010–2024 Volodymyr Agafonkin. Maps © OpenStreetMap contributors.

You might also like