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

Clickable Map Icons

A : Set up your map

Set up your Leaflet map on http://jsfiddle.net

We have a good explanation in the Leaflet.js Walkthrough, http://p2pu.org/en/groups/online-maps-with-leaflet/content/leafletjs-walkthrough/

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.

If you're making a map too large for the preview window, use a /show link such as http://jsfiddle.net/8QHFe/2/show/light to share the page without showing source code

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 own icon

Find an icon online. Here are some ideas:

http://code.google.com/p/google-maps-icons/wiki/IconDescriptions ( ignore the site-closed message, choose a category from the left column, and scroll down to see the icons)

http://code.google.com/p/google-maps-icons/wiki/NumericIcons

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 http://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 ( x,y coordinates of the part of the icon is over the actual point on the map, 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)
} );

Only change the anchors if the popup points to the wrong part of your marker, or your marker points to the wrong part of the map.

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();
});