Clickable Icons in Leaflet.js

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 a basic map at http://fiddle.jshell.net/8QHFe/395/ . 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://fiddle.jshell.net/8QHFe/395/show 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 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!)
http://fiddle.jshell.net/8QHFe/396/

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. In Leaflet 0.4.5 and above, it's easier than before to create icons:

baseIcon = L.icon( {
iconUrl: "http://i.imgur.com/OlCXE.jpg",
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:

map.addLayer(marker);

You should have something looking like http://fiddle.jshell.net/8QHFe/398/

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:

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