So you want to make a webpage with a Leaflet.js map:

You can use http://jsfiddle.net to set up your page and show the code to us online.  We’ll explain how to get to a working map, and you can send people a direct link to the final product by adding /show/light to your URLs.  For example

1. Add OpenLayers JavaScript file

Create your own jsFiddle page by going to jsFiddle.net.  This is a palette where you can add HTML, CSS, and JavaScript for testing. You can click Run on the top menu bar to test your code, then click Save or Update to get a new URL to your work-in-progress.

First: you need to add in the Leaflet.js libraries.  In jsFiddle, you can add CSS and JavaScript libraries by using the tools in the left column. Click “Manage Resources” and paste the URL http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js into the text box which appears.  Then click the [+] button to add it.

Do the same for CSS library http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css -- and if you happen to be using Internet Explorer 7, add http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css as well.

2. Create the interactive Map object

Now you’re ready to embed an interactive map, using map tiles from OpenStreetMap. First, you need to create a place to put it.  HTML forms the structure of the webpage.  In jsFiddle, most of the HTML is written for you.  Put this code into the top-left HTML box:

<b>A Map using Leaflet.js</b>
<div id="mymap" style="width:450px;height:430px;"></div>

The first line is some HTML that uses <b> tags to put your headline in bold.

The second line is an HTML division, known as a <div>, with dimensions 450 pixels wide by 430 pixels tall. This div has its id set to ”mymap”. You can think of this as a unique name for this division. This will become useful in JavaScript.

Now go to the JavaScript section (bottom left) of jsFiddle.  Add this line

map = new L.Map( "mymap" );

map is a variable like algebra's x and y, but instead of setting it to a number, we set it to an object, an L.Map.  One of the requirements for creating this object is sending it the ID of the div it should go into.  So we send it the word “mymap” inside quotes.  These words-in-quotes are called “strings” because the computer sees them as a list of letters.

3. Put OpenStreetMap onto your Map

You can press Run now to see your Leaflet map and controls, but it will be empty without any sources of data. Our first source is going to be tiles from OpenStreetMap. When we stack, mix, and match different sources on top of the map, so we call them layers.  Our first layer is the base layer of our map, which we'll build up from that in the future.

Since we’ve all used the free editable OpenStreetMap.org (OSM), and there are no restrictions on who can use it, that’s the layer we’ll use.  The combination of Leaflet.js and OpenStreetMap is very common, so creating it and adding it to our map is easy.  Return to the JavaScript section, after you've created map. We add lines that set the formula for requesting a map tile, a copyright statement from OpenStreetMap, and then create a new kind of object, an L.TileLayer, which uses that information.

osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
osmLayer = new L.TileLayer(osmTile, { maxZoom: 18, attribution: osmCopyright } );

We’re not quite done. Once the layer is created, we need to tell map to add it.

map.addLayer( osmLayer );

The map still doesn’t know where to be centered, and how far to be zoomed in.  Let’s create a point variable called center -- this one is in Washington DC -- and then use map's setView function to center and zoom.  You should try changing these numbers to get different locations and zoom levels.

center = new L.LatLng( 38.9, -77.1 );
zoom = 11;
​map.​setView( center, zoom );​

That’s really handy to know, but what other functions can map do?  Every object in the Leaflet.js API has a reference, documenting how to create it and how to interact with it.  Here’s a link to L.Map's reference: http://leaflet.cloudmade.com/reference.html#map-usage

The finished map should look like this: http://jsfiddle.net/8QHFe/149/

4. Centering the Map

Suppose we want to center the map on Cowboy Stadium in Dallas.  I typed the address into http://geohash.org and got the latitude 32.7478770 and longitude  -97.0928440.  How many digits do you need?  Using 6 digits after the decimal point gives you around one meter accuracy (though this depends slightly on where you are in the world).  Most GPS devices are less accurate than one meter, so you don't need to add more digits.

Just change the numbers on the line where you set the center.