<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Markers With Custom Icons Example</title>
<metacharset="utf-8"/>
<metaproperty="og:title"content="Leaflet — an open-source JavaScript library for interactive maps"/>
<metaproperty="og:description"content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API."/>
<p><atarget="_blank"href="custom-icons-example.html">View example on a separate page →</a></p>
<h3>Preparing the images</h3>
<p>To make a custom icon, we usually need two images — the actual icon image and the image of its shadow. For this example, 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:</p>
<p>The white area in the images is actually transparent, and they are saved in the PNG24 format. Notice there's some excessive area on the left of the shadow image — its cropped in such way that if you align the icon and the shadow images on top of each other, the top left corners are in the same spot.</p>
<h3>Defining an icon class</h3>
<p>The default marker icons in Leaflet are defined by the <ahref="../reference.html#icon">L.Icon</a> class. Its instance (<code>new L.Icon()</code>) is then set by default in the <code>L.Marker</code> options. So how do we define our own icon class? Inherit from <code>L.Icon</code>! It's really easy in Leaflet:</p>
<p>Now we've defined a green leaf icon class. The <code>iconSize</code> and <code>shadowSize</code> properties are the sizes of the corresponding images in pixels, the <code>iconAnchor</code> property is the coordinates of the "tip" of our icon, and the <code>popupAnchor</code> property points to a point from which a marker popup would open relative to the <code>iconAnchor</code> point.</p>
<h3>Using icons in markers</h3>
<p>To use our newly created icon class in a marker, we need to create an instance of that class and pass it to the marker constructor in the options:</p>
<pre><codeclass="javascript">var greenIcon = new LeafIcon(),
marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});</code></pre>
<p>Awesome, it works! But what about the orange and the red ones? You could repeat the whole process above for each of them, but there's a much easier way. Notice that these icons would have the same properties except for one — the iconUrl. Because it's a frequent case, the <code>L.Icon</code> constructor has an optional argument — an iconUrl to replace the defined one. Let's see:</p>
<pre><codeclass="javascript">var greenIcon = new LeafIcon(),
redIcon = new LeafIcon('../docs/images/leaf-red.png'),
orangeIcon = new LeafIcon('../docs/images/leaf-orange.png');
</code></pre>
<p>Now we can use all the three icons:</p>
<pre><codeclass="javascript">var marker1 = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon}),
marker2 = new L.Marker(new L.LatLng(51.495, -0.083), {icon: redIcon}),
marker3 = new L.Marker(new L.LatLng(51.49, -0.1), {icon: orangeIcon});
<p>That's all. Now take a look at the <atarget="_blank"href="custom-icons-example.html">full example</a>, the <ahref="../reference.html#icon">L.Icon docs</a>, or browse <ahref="../examples.html">other examples</a>.</p>
<ahref="http://github.com/CloudMade/Leaflet"><imgid="forkme"src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"alt="Fork me on GitHub"/></a>
