.. Author: gislite .. Title: Custom callout icon

Custom callout icon
===================

In this tutorial, you’ll learn how to easily tag a map with a custom
icon.

.. raw:: html

    <table>
        <tbody>
        <tr>
            <td style="text-align: center; border: none">
                <iframe src="./makericons.html" width="616" height="416"></iframe>
            </td>
        </tr>
        <tr>
            <td style="text-align: center; border: none">
                <small><a href="./makericons.html">Show the example</a></small>
            </td>
        </tr>
        </tbody>
    </table>

Preparing images
----------------

In order to make a custom icon, we usually need two images - the actual
icon image and its shadow image. For this tutorial, we used the Leaflet
logo and created 4 images - 3 different color blade images and a common
shadow image for them:

Note that the white areas in the image are actually transparent.

Create icon
-----------

The marker icon in the Leaflet is defined by the ``L.Icon`` object and
is used as a parameter option when creating the marker. 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 it’s easy to put an icon on the map:

::

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

.. raw:: html

    <table><tbody>
    <tr>
        <td style="text-align: center; border: none">
            <iframe src="./makericons.html" width="616" height="416"></iframe>
        </td>
    </tr><tr>
        <td style="text-align: center; border: none">
            <small><a href="./makericons.html">View this example</a></small>
        </td>
    </tr></tbody></table>

Define icon class
-----------------

What if we need to create some icons that have a lot in common? Let’s
define our own icon class, which includes sharing options. It’s really
easy to inherit Leaflet from the L icon (　``L.Icon``　):

::

   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 these three leaf icons in 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'});

As you may have noticed, we created a leaf icon instance using the
keyword ``new``. So why aren’t all Leaflet classes created with it? The
answer is simple: the real Leaflet classes are named with uppercase
letters (such as L.Icon), and they also need to use ``new`` is created,
but it is also named with a lowercase letter name (L.icon), which is
created for convenience, such as:

::

   L.icon = function (options) {
       return new L.Icon(options);
   };

You can also do the same thing in class.
OK, let’s put the markers for 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.");

Now open the full example .