CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <title>Markers With Custom Icons - Leaflet - a JavaScript library for interactive maps</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="../../docs/images/favicon.ico" /> <link href="https://leafletjs.com/atom.xml" type="application/atom+xml" rel="alternate" title="Leaflet Dev Blog Atom Feed" /> <link rel="stylesheet" href="../../docs/css/normalize.css" /> <link rel="stylesheet" href="../../docs/css/main.css" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,300' rel='stylesheet' type='text/css'> <script src="../../docs/highlight/highlight.pack.js"></script> <link rel="stylesheet" href="../../docs/highlight/styles/github-gist.css" />  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script> ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; MB_ATTR = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'; MB_URL = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + ACCESS_TOKEN; OSM_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; OSM_ATTRIB = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; </script> </head> <body> <header> <h1><a href="https://leafletjs.com/"><img src="../../docs/images/logo.png" alt="Leaflet" width="300" /></a></h1> <p class="tagline">an open-source JavaScript library<br> for mobile-friendly interactive maps</p> </header> <nav> <ul class="nav"> <li> <a href="../../index.html">Overview</a> </li> <li> <a href="../../examples.html">Tutorials</a> </li> <li> <a href="../../reference.html">Docs</a> </li> <li> <a href="../../download.html">Download</a> </li> <li> <a href="../../plugins.html">Plugins</a> </li> <li> <a href="../../blog.html">Blog</a> </li> </ul> </nav> <main> <div class="container"> <p class="tutorials-back"><a href="../../examples.html">← Tutorials</a></p> <h2 id="markers-with-custom-icons">Markers With Custom Icons</h2> <p>In this tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map.</p> <table role="presentation"> <tr><td style="text-align: center; border: none; padding: 0;"> <iframe src="example.html" width="600" height="400" style="max-width: 100%; max-height: 90vh; box-sizing: border-box;"></iframe> </td></tr> <tr><td style="text-align: center; border: none"> <small><a href="example.html">See this example stand-alone.</a></small> </td></tr></table> <h3 id="preparing-the-images">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 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:</p> <p> <img style="border: 1px solid #ccc" src="leaf-green.png" /> <img style="border: 1px solid #ccc" src="leaf-red.png" /> <img style="border: 1px solid #ccc" src="leaf-orange.png" /> <img style="border: 1px solid #ccc" src="leaf-shadow.png" /> </p> <p>Note that the white area in the images is actually transparent.</p> <h3 id="creating-an-icon">Creating an icon</h3> <p>Marker icons in Leaflet are defined by <a href="/reference.html#icon">L.Icon</a> objects, which are passed as an option when creating markers. Let’s create a green leaf icon:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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 }); </code></pre></div></div> <p>Now putting a marker with this icon on a map is easy:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); </code></pre></div></div> <table role="presentation"> <tr><td style="text-align: center; border: none; padding: 0;"> <iframe src="example-one-icon.html" width="600" height="400" style="max-width: 100%; max-height: 90vh; box-sizing: border-box;"></iframe> </td></tr> <tr><td style="text-align: center; border: none"> <small><a href="example-one-icon.html">See this example stand-alone.</a></small> </td></tr></table> <h3 id="defining-an-icon-class">Defining an icon class</h3> <p>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 <code class="language-plaintext highlighter-rouge">L.Icon</code>! It’s really easy in Leaflet:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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] } }); </code></pre></div></div> <p>Now we can create all three of our leaf icons from this class and use them:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}), redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}), orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'}); </code></pre></div></div> <p>You may have noticed that we used the <code class="language-plaintext highlighter-rouge">new</code> 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. <code class="language-plaintext highlighter-rouge">L.Icon</code>), and they also need to be created with <code class="language-plaintext highlighter-rouge">new</code>, but there are also shortcuts with lowercase names (<code class="language-plaintext highlighter-rouge">L.icon</code>), created for convenience like this:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.icon = function (options) { return new L.Icon(options); }; </code></pre></div></div> <p>You can do the same with your classes too. OK, let’s finally put some markers with these icons on the map:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>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."); </code></pre></div></div> <p>That’s it. Now take a look at the <a href="example.html">full example</a>, the <a href="/reference.html#icon"><code class="language-plaintext highlighter-rouge">L.Icon</code> docs</a>, or browse <a href="../../examples.html">other examples</a>.</p> </div> </main> <footer class="container"> <div class="footer"> <p>© 2010–2024 <a href="https://agafonkin.com">Volodymyr Agafonkin</a>. Maps © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p> </div> <nav class="ext-links"> <a class="ext-link twitter" href="https://twitter.com/LeafletJS" title="Follow LeafletJS on X"><img alt="Follow LeafletJS on X" src="../../docs/images/x-round.svg" width="46" /></a> <a class="ext-link github" href="http://github.com/Leaflet/Leaflet" title="View Source on GitHub"><img alt="View Source on GitHub" src="../../docs/images/github-round.svg" width="46" /></a> <a class="ext-link forum" href="https://stackoverflow.com/questions/tagged/leaflet" title="Ask for help on Stack Overflow"><img alt="Leaflet questions on Stack Overflow" src="../../docs/images/forum-round.svg" width="46" /></a> </nav> <button id="back-to-top" title="Scroll back to top"> <svg viewBox="0 0 16 16"> <path d="M7.3,3.3c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4s-1,0.4-1.4,0L8,5.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L7.3,3.3L7.3,3.3z"/> </svg> </button> </footer> <script> var _gaq = _gaq || []; _gaq.push([ '_setAccount', 'UA-4147697-4' ]); _gaq.push([ '_trackPageview' ]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script src="../../dialog/dialog.js"></script> <script src="../../docs/js/docs.js"></script> </body> </html>