Leaflet.js Essentials

Using a custom marker in Leaflet

To create a marker icon in Leaflet, you need to create an instance of the L.icon class. The L.icon class takes 10 options, as follows:

• iconUrl
• iconRetinaUrl
• iconSize
• iconAnchor
• shadowUrl
• shadowRetinaUrl
• shadowSize
• shadowAnchor
• popupAnchor
• className

The only required option is iconUrl. In this example, you will ignore the retina images and the class name. Open LeafletEssentials.html and add the following code:

var myIcon = L.icon({
    iconUrl: 'mymarker.png',
    shadowUrl: 'shadow.png',
    iconSize:     [40, 60], 
    shadowSize:   [60, 40], 
    iconAnchor:   [20, 60], 
    shadowAnchor: [20, 40],  
    popupAnchor:  [0, -53] 
});

The preceding code sets the options. The iconUrl option directs the URL to the icon image and the shadowUrl option directs the URL to ...