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

Clickable Icons in Leaflet.js [Feb. 13, 2012, 9:22 p.m.]


 

Clickable Map Icons


A : Set up your map
 
Set up your Leaflet map on http://jsfiddle.net
 
  • You could also start with our map at http://jsfiddle.net/8QHFe/2/ 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 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!)  http://jsfiddle.net/8QHFe/3/
 
 

C: Add your first 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 http://imgur.com using the resulting direct link - i.imgur.com/sample.jpg - 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 ttp://i.imgur.com/OlCXE.jpg , a graduation cap, as my image. Then I'll use L.Point objects to set the size of the icon, and anchors ( what part of the icon is over the point, and what part of the icon has the popup window point to it )

baseIcon = L.Icon.extend( {
    iconUrl: "http://i.imgur.com/OlCXE.jpg",
    shadowUrl: "
http://google-maps-icons.googlecode.com/files/shadow.png",
    iconSize: new L.Point(30, 36),
    shadowSize: new L.Point(42, 30),
    iconAnchor: new L.Point(15, 18),
    popupAnchor: new L.Point(0, -12)

} );

 

Add this in your JavaScript, and put it 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: new baseIcon() } );

Remember to have this line afterward:

map.addLayer(marker);

You should have something looking like this: http://jsfiddle.net/8QHFe/4/

 

 

D: Multiple icons

  • Use the libraries listed above to find more icons for your map
  • Try simply swapping in the URL of the image when you create the marker.

    marker = new L.Marker( latlng, { icon: new baseIcon( "http://example.com/othericon.jpg" ) } );
     
  • If you need to change the size of the marker or other parameters, go back to where you created baseIcon and make a different icon type called forestIcon or schoolIcon or something similar.

 

 

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:

marker.on('mouseover'function(e){
    marker.openPopup();
});


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

http://jsfiddle.net/8QHFe/5/

 

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="http://example.com?TheLinkURL" 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:
 
<img src="http://example.com/ImageURL.jpg"/>