<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Leaflet on Mobile Example</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>According to <ahref="http://geojson.org">http://geojson.org</a>:</p>
<blockquote>GeoJSON is a format for encoding a variety of geographic data structures. A GeoJSON object may represent a geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.</blockquote>
<p>Leaflet supports all of the GeoJSON types above but <ahref="http://geojson.org/geojson-spec.html#feature-objects">Features</a> and <ahref="http://geojson.org/geojson-spec.html#feature-collection-objects">FeatureCollections</a> allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. (<atarget="_blank"href="geojson-example.html">see example</a>)</p>
<h3>The GeoJSON layer</h3>
<p>GeoJSON objects are added to the map through a <ahref="http://leaflet.cloudmade.com/reference.html#geojson">GeoJSON layer</a>. To create a GeoJSON layer and add it to a map we can use the following code.</p>
<pre><codeclass="css">var geojson_layer = new L.GeoJSON();
map.addLayer( geojson_layer );</code></pre>
<p>This creates an empty GeoJSON layer that we can easily add vectors to.</p>
<p>We can also instantiate the GeoJSON layer with a GeoJSON object to show it immediately, without having to call <code>addGeoJSON</code>.</p>
<pre><code>var a_geojson_feature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};
var geojson_layer = new L.GeoJSON( a_geojson_feature );
map.addLayer( geojson_layer );</code></pre>
<h3>Popups</h3>
<p>We can use popups to show information about these features when they are clicked. To accomplish this we'll listen to the <code>featureparse</code> event of the GeoJSON layer. Here we're checking to see if a feature has a property named "popup_content" and if so binding a popup to the feature so this text (or HTML) appears when clicked.</p>
<pre><code>geojson_layer.on( "featureparse", function ( e ) {
if ( e.properties && e.properties.popup_content ) {
<p>We can also listen to the <code>featureparse</code> event to style our LineString and Polygon features. As with our popup content, we can store our styling information in the properties of the GeoJSON object as well. These style properties should match those found in <ahref="http://leaflet.cloudmade.com/reference.html#path-options">path options</a>. Our feature with styling information might look something like:</p>
<pre><code>var free_bus = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-104.98726, 39.74136],
[-104.98720, 39.74132],
[-104.98715, 39.74127],
[-104.98713, 39.74117],
[-104.98712, 39.74106], ...
]
},
"properties": {
"name": "16th Street Free Bus",
"style": {
"color": "#004070",
"weight": 4,
"opacity": 0.9
},
"popup_content": "This is the 16th street free bus ..."
}
};</code></pre>
<pre><code>geojson_layer.on( "featureparse", function ( e ) {
if ( e.properties && e.properties.style && e.layer.setStyle ) {
// The setStyle method isn't available for Points. More on that later ...
<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>
