2011-03-24 00:35:29 +08:00
<!DOCTYPE html>
< html >
< head >
2011-03-24 20:02:42 +08:00
< title > Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade< / title >
2011-03-24 00:35:29 +08:00
< meta charset = "utf-8" / >
2011-03-24 22:52:45 +08:00
< meta property = "og:title" content = "Leaflet — an open-source JavaScript library for interactive maps" / >
2011-03-28 23:07:37 +08:00
< meta property = "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." / >
2011-03-24 00:35:29 +08:00
<!-- Blueprint -->
< link rel = "stylesheet" href = "docs/css/blueprint/screen.css" media = "screen, projection" >
< link rel = "stylesheet" href = "docs/css/blueprint/print.css" media = "print" >
<!-- [if lt IE 8]><link rel="stylesheet" href="docs/css/blueprint/ie.css" media="screen, projection"><![endif] -->
< link rel = "stylesheet" href = "docs/css/screen.css" media = "screen, projection" / >
< script src = "docs/highlight/highlight.pack.js" > < / script >
< link rel = "stylesheet" href = "docs/highlight/styles/github.css" / >
<!-- Leaflet -->
< link rel = "stylesheet" href = "dist/leaflet.css" / >
<!-- [if lte IE 8]><link rel="stylesheet" href="dist/leaflet.ie.css" /><![endif] -->
< script src = "dist/leaflet.js" > < / script >
< / head >
< body >
< div class = "container" >
< h1 > Leaflet< / h1 >
2011-03-24 20:02:42 +08:00
< h3 class = "alt" > A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by < a href = "http://cloudmade.com" > CloudMade< / a > < / h3 >
2011-03-24 00:35:29 +08:00
2011-04-06 22:47:11 +08:00
< ul class = "nav clearfix" >
<!-- <li><a class="cloudmade - link" href="http://cloudmade.com"><img src="http://cloudmade.com/images/layout/cloudmade - logo.png" width="32" /></a></li> -->
2011-04-06 23:35:45 +08:00
< li > < span > Overview< / span > < / li >
2011-04-06 22:47:11 +08:00
< li > < a href = "features.html" > Features< / a > < / li >
< li > < a href = "reference.html" > Documentation< / a > < / li >
< li > < a href = "#" > Examples< / a > < / li >
< li > < a href = "http://github.com/CloudMade/Leaflet/zipball/master" > Download (zip)< / a > < / li >
< li > < a class = "twitter-link" href = "http://twitter.com/LeafletJS" > @LeafletJS< / a > < / li >
< li > < a class = "github-link" href = "http://github.com/CloudMade/Leaflet" > GitHub Repo< / a > < / li >
< / ul >
2011-03-24 00:35:29 +08:00
< h3 > About the library< / h3 >
2011-03-28 22:59:15 +08:00
< p > Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for < em > both desktop and mobile< / em > web browsers, developed by < a href = "http://cloudmade.com" > CloudMade< / a > to form the core of its next generation JavaScript API.< / p >
2011-03-24 21:15:08 +08:00
2011-04-06 23:35:45 +08:00
< p > It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5. Its top priorities are usability, performance, small size, < a href = "http://developer.yahoo.com/yui/articles/gbs/" > A-grade< / a > browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.< / p >
2011-03-24 00:35:29 +08:00
<!-- <p><strong>Supported browsers:</strong> IE6+, Firefox 3.6+, Safari 5+, Chrome, iOS 3+, Android 2.2+</p> -->
2011-03-24 21:15:08 +08:00
< p >
< a href = "http://twitter.com/share" class = "twitter-share-button" data-url = "http://cloudmade.github.com/Leaflet/" data-text = "Leaflet — a modern, lightweight open-source JavaScript library for interactive maps by @cloudmade" data-count = "horizontal" data-via = "LeafletJS" data-related = "CloudMade" > Tweet< / a > < script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
< iframe src = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcloudmade.github.com%2FLeaflet%2F&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling = "no" frameborder = "0" style = "border:none; overflow:hidden; width:660px; height:24px;" allowTransparency = "true" > < / iframe >
< / p >
2011-03-24 00:35:29 +08:00
< h3 > Basic usage example< / h3 >
< div id = "map" > < / div >
< script >
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
2011-03-24 20:02:42 +08:00
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
2011-03-24 00:35:29 +08:00
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
marker.bindPopup('A pretty CSS3 popup.< br / > Easily customizable.').openPopup();
< / script >
2011-04-06 23:35:45 +08:00
< p > Here we create a map with a CloudMade tile layer, add a marker and bind a popup with some text to it:< / p >
2011-03-24 22:18:53 +08:00
< pre > < code class = "javascript" > // create a CloudMade tile layer
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
2011-03-24 00:35:29 +08:00
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
2011-03-24 22:18:53 +08:00
// initialize the map on the "map" div
2011-03-24 20:02:42 +08:00
var map = new L.Map('map');
2011-03-24 22:18:53 +08:00
// set the map view to a given center and zoom and add the CloudMade layer
2011-03-24 00:35:29 +08:00
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
2011-03-24 22:18:53 +08:00
// create a marker in the given location and add it to the map
2011-03-24 00:35:29 +08:00
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
2011-03-24 20:02:42 +08:00
2011-03-24 22:18:53 +08:00
// attach a given HTML content to the marker and immediately open it
2011-03-24 20:02:42 +08:00
marker.bindPopup("A pretty CSS3 popup.< br /> Easily customizable.").openPopup();< / code > < / pre >
2011-03-24 00:35:29 +08:00
2011-04-06 23:35:45 +08:00
< p > Check out the < a href = "examples.html" > examples< / a > section for more examples, or head straight to the < a href = "reference.html" > documentation< / a > .< / p >
2011-03-24 00:35:29 +08:00
< hr / >
< p class = "quiet" > © 2011 < a href = "http://cloudmade.com" > CloudMade< / a > . Map data © 2011 < a href = "http://openstreetmap.org" > OpenStreetMap< / a > contributors, < a href = "http://creativecommons.org/licenses/by-sa/2.0/" > CC-BY-SA< / a > .< / p >
< / div >
2011-03-24 00:41:52 +08:00
< a href = "http://github.com/CloudMade/Leaflet" > < img id = "forkme" src = "http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt = "Fork me on GitHub" / > < / a >
2011-03-24 00:35:29 +08:00
< script >
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
< / script >
< / body >
< / html >
2011-03-24 20:02:42 +08:00
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
