<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Quick Start Guide</title>
<metacharset="utf-8"/>
<metaproperty="og:title"content="Leaflet — an open-source JavaScript library for interactive maps"/>
<metaproperty="og:description"content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API."/>
<p><ahref="../examples.html">← Back to the list of examples</a></p>
<h3>Leaflet Quick Start Guide</h3>
<p>This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.</p>
<li>Put a <code>div</code> element with a certain <code>id</code> where you want your map to be and make sure it has defined width and height:
<pre><codeclass="html"><div id="map" style="height: 200px"></div><!-- width equals available horizontal space by default --></code></pre></li>
</ol>
<p>Now you're ready to initialize the map and do some stuff with it.</p>
<h3>Setting up the map</h3>
<divid="map1"style="height: 180px"></div>
<script>
var cloudmade1 = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
<p>Let's create a map instance, set its view to the center of London and add a pretty CloudMade tile layer to it. First we'll initialize the map:</p>
<pre><codeclass="javascript">var map = new L.Map('map');</code></pre>
<p>By default (as we didn't pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.</p>
<p>Next we'll create a tile layer to add to our map, in this case it's a CloudMade tile layer with Fresh style. Creating a tile layer usually involves setting the URL template for the tile images (get yours at <ahref="http://cloudmade.com/register">CloudMade</a>), the attribution text and the maximum zoom level of the layer:</p>
<p>Make sure this code is below both the map <code>div</code> and <code>leaflet.js</code> inclusion, or in a <code>window.load</code> or <code>document.ready</code> event handler.</p>
<p>Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let's add a marker:</p>
<pre><codeclass="javascript">var markerLocation = new L.LatLng(51.5, -0.09);
<p>Adding a circle is the same (except for specifying the radius in meters), but lets configure it by passing options as a third argument when creating the object (the second argument is the radius in pixels):</p>
<p>Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:</p>
<pre><codeclass="javascript">marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");</code></pre>
<p>Try clicking on our objects. The <code>bindPopup</code> method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the <code>openPopup</code> method (for markers only) immediately opens the attached popup.</p>
<p>You can also use popups as layers (when you need something more than attching a popup to an object):</p>
<pre><codeclass="javascript">var popup = new L.Popup();
popup.setLatLng(new L.LatLng(51.5, -0.09));
popup.setContent("I am a standalone popup.");
map.openPopup(popup);</code></pre>
<p>Here we use <code>openPopup</code> instead of <code>addLayer</code> because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.</p>
<h3>Dealing with events</h3>
<p>Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:</p>
<p>Each object has its own set of events — see <ahref="../reference.html">documentation</a> for details. The first argument of the listener function is an event object — it contains useful information about the event that happened. For example, map click event object (<code>e</code> in the example above) has <code>latlng</code> property which is a location at which the click occured.</p>
<p>Lets improve our example by using a popup instead of an alert and formatting the location string:</p>
<p>Try clicking on the map and you will see the coordinates in a popup. <atarget="_blank"href="quick-start-example.html">View the full example →</a></p>
<p>Now you've learned Leaflet basics and can start building map apps straight away! Don't forget to take a look at the detailed <ahref="../reference.html">documentation</a> or <ahref="../examples.html">other examples</a>.</p>
<ahref="http://github.com/CloudMade/Leaflet"><imgid="forkme"src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"alt="Fork me on GitHub"/></a>
