As you read about Leaflet.js and addLayer, you'll start wondering: what's so important about layers?  How do you work with them?

OpenStreetMap  + Terrain

I like the look of the OpenStreetMap + Terrain tiles created by Michael Migurski of Stamen Design.
They are updated monthly, so your changes to OpenStreetMap will likely not be included: http://mike.teczno.com/notes/osm-us-terrain-layer/foreground.html

To add this layer to your map, change the osmLayer formula to "http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg"

Then, change the attribution line to "Map data © 2012 OpenStreetMap contributors, Tiles by Mike Migurski of Stamen Design"

Tile versus Vector

We're using two types of layers already:

• The OpenStreetMap layer is made of smaller images called tiles ( think of floor tiles ).   As you move the map to one side or another, the page loads more tiles to cover new areas.  When you zoom in, the map loads new tiles to show more detail. Leaflet uses CSS3 effects to keep these transitions smooth.  Here's a sample OpenStreetMap tile

• Points, lines, and shapes are generally referred to as vector layers. They are represented by coordinates, their data is loaded only once, then they move along with your map's background.

If vectors are only one download, why doesn't OpenStreetMap use a vector layer, too?  A single highway could be hundreds or thousands of points, but most of those are out of view when you are looking at a local map. When you zoomed out to see the whole country, the number of points would be far more than the number of pixels on your screen. Tiles are designed to show you the end product, with a much smaller download.  When you use an OpenStreetMap editor, you are accessing their real vector layer, so you need to zoom in on small parts of the map and wait for streets to load.

Rasters

Tiles and other non-vector layers are considered to be rasters.  An example of a raster layer that is not a tile layer would be a single satellite photo, or a large heatmap image which was not broken into separate tiles.  These images would be complex to represent point-by-point, so instead it is sent as an image.

Google and Bing Layers

OpenLayers allows you to use layers from many different sources, including Google Maps and Bing Maps.  This is probably possible to do in Leaflet.js, but raises difficult questions about how to make your map comply with Google's licenses.  I suggest you research the Google Maps API or Bing Maps API if you want to use those services.