This course will become read-only in the near future. Tell us at if that is a problem.

Clickable Icons in Leaflet.js


Clickable Map Icons

A : Set up your map
Set up your Leaflet map on
  • You could also start with a basic map at . On the top menu, click "Run" to test your new code, and "Update" to get a new URL to share with people. 

B: Add your first Marker

  • Before you can create a Marker, you have to create a new LatLng point to place it.  Remember to choose a location that's visible on your map!  I used this with the map centered at the same location.


lat = 27.173768;
lng = 78.042068;
latlng = new L.LatLng( lat, lng );
  • Now create a marker based on that latlng

    marker = new L.Marker( latlng );
  • When we stack, mix, and match different sources on top of the map, we call them layers.  Your Marker is going to be added using a new kind of layer that's generally called a vector layer.  To contrast, the OpenStreetMap layer is made up of many tiles ( called either a raster or tile layer ).  In Leaflet, we add them with the same function, map.addLayer.
map.addLayer( marker );
  • Tah-dah!  Let's see what that looks like (if you don't see a marker, make sure the latitude and longitude where you are adding the point is visible on your map!)


C: Add your own icon

  • Find an icon online. Here are some ideas:
  • Do a Google Image Search, and set "Icon" as the size of the image
  • Or create your own icon and upload to using the resulting direct link - - as your icon URL

Leaflet has you set several details of your icon at the same time. This can be time-consuming and confusing, but it's to make sure you always can make icons look their best. Let's create the base icon using your first custom image. I'm going to use , a graduation cap, as my image. In Leaflet 0.4.5 and above, it's easier than before to create icons:

baseIcon = L.icon( {
    iconUrl: "",
    iconSize: [30, 36],
    shadowSize: [42, 30],
    iconAnchor: [15, 18],
    popupAnchor: [0, -12]

} );

Change the coordinates of the anchors if the popup points to the wrong part of your marker, or your marker points to the wrong location on the map.

Make sure that the icon code is put before your marker lines, so that the icon is created before the marker is created, so we can use baseIcon in our marker lines.  Change the marker creation line from

marker = new L.Marker( latlng );

to one with this new option

marker = new L.Marker( latlng, { icon: baseIcon } );

Remember to have this line afterward:


You should have something looking like


D: Multiple icons

  • Use the libraries listed above to find more icons for your map



E: Clicks and good popups make an interactive map

  • Let's make this marker have a popup when you click it.  Go to the end of your JavaScript code, after you've created the map and added the marker, and add this line:

    marker.bindPopup"Hello Maps!" );
Click Run, click the marker, and you'll see that this works.  You can include any HTML in this popup.

marker.bindPopup"<h3>Hello Maps!</h3>This is Leaflet.js" );

See how putting text between <h3> and </h3> made everything larger and bolder?  This is a good way to set aside headlines from other parts of your text.


F: Popups without even clicking

This one is really difficult to explain, and it only will work with one marker at a time for now, but it's too useful not to mention.  Add this after everything else you've done to marker:


Now put your mouse over the icon and it'll pop up without any clicks!


Some things you can try:
  • Instead of <h3> and </h3>, use <span style="color: red"> and </span>.  You can make the text red!
  • An HTML link has this format:
<a href="" target="_blank">Link Text</a>
  • Can you make it show an image?  What about images for two separate markers? The HTML for adding an image is:

Task Discussion