2011-04-01 22:14:41 +08:00
<!DOCTYPE html>
< html >
< head >
< title > Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade< / title >
< meta charset = "utf-8" / >
< meta property = "og:title" content = "Leaflet — an open-source JavaScript library for interactive maps" / >
< 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-04-09 22:32:46 +08:00
< link rel = "icon" type = "image/png" href = "docs/images/favicon.png" / >
2011-04-09 22:31:13 +08:00
2011-04-01 22:14:41 +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 >
< h3 class = "alt" > A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by < a href = "http://cloudmade.com" > CloudMade< / a > < / h3 >
2011-04-06 22:47:11 +08:00
< ul class = "nav clearfix" >
2011-04-06 23:35:45 +08:00
< li > < a href = "index.html" > Overview< / a > < / li >
2011-04-06 22:47:11 +08:00
< li > < span > Features< / span > < / li >
< li > < a href = "reference.html" > Documentation< / a > < / li >
< li > < a href = "#" > Examples< / a > < / li >
2011-04-09 20:37:11 +08:00
< li > < a href = "download.html" > Download< / a > < / li >
2011-04-06 22:47:11 +08:00
< 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-04-01 22:14:41 +08:00
2011-04-02 05:51:58 +08:00
< h3 > Leaflet features< / h3 >
< p > Leaflet doesn't try to do everything for everyone. Instead it focuses on making < em > the basic things work perfectly< / em > . It should still satisfy the needs of the vast majority of map apps developers while being flexible enough to be easily extended by writing third-party plugins.< / p >
2011-04-01 22:14:41 +08:00
2011-04-02 05:44:37 +08:00
< p >
2011-04-11 17:14:31 +08:00
< a href = "http://twitter.com/share" class = "twitter-share-button" data-url = "http://leaflet.cloudmade.com" 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%2Fleaflet.cloudmade.com&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 >
2011-04-02 05:44:37 +08:00
< / p >
2011-04-01 22:14:41 +08:00
< div class = "span-20" id = "features" >
< div class = "span-6" >
< h3 > Available map layers< / h3 >
< ul >
< li > Tile layers< / li >
< li > Polylines, polygons, circles< / li >
< li > Markers< / li >
< li > Popups< / li >
2011-04-02 05:44:37 +08:00
< li > Image overlays< / li >
2011-04-02 06:08:24 +08:00
< li class = "noimpl" > GeoJSON< / li >
2011-04-01 22:14:41 +08:00
< / ul >
< h3 > Interaction features< / h3 >
2011-04-08 17:31:41 +08:00
< h4 > On desktop browsers< / h4 >
2011-04-01 22:14:41 +08:00
< ul >
2011-04-02 05:51:58 +08:00
< li > Drag panning< / li >
2011-04-01 22:14:41 +08:00
< li > Scroll wheel zoom< / li >
< li > Double click zoom< / li >
< li > Shift-drag zoom to bounding box< / li >
< / ul >
2011-04-02 05:51:58 +08:00
< h4 > On mobile browsers (iOS, Android)< / h4 >
2011-04-01 22:14:41 +08:00
< ul >
2011-04-02 05:51:58 +08:00
< li > Touch-drag panning< / li >
< li > Multi-touch zoom (iOS only)< / li >
2011-04-13 21:38:05 +08:00
< li > Double tap zoom< / li >
2011-04-02 06:08:24 +08:00
< li class = "noimpl" > Panning inertia< / li >
2011-04-01 22:14:41 +08:00
< / ul >
< / div >
2011-04-02 05:44:37 +08:00
< div class = "span-9" >
2011-04-01 22:14:41 +08:00
< h3 > Visual features< / h3 >
< ul >
2011-04-02 05:44:37 +08:00
< li > Smooth continuous zoom on iOS< / li >
2011-04-08 17:19:41 +08:00
< li > Panning animation< / li >
< li > Zooming animation on modern browsers (except IE)< / li >
< li > Tile and popup fade animation< / li >
2011-04-01 22:14:41 +08:00
< li > Very nice default design for markers and popups< / li >
< / ul >
< h3 > Customization features< / h3 >
< ul >
< li > Pure CSS3 popups < span class = "quiet" > for easy restyling< / span > < / li >
2011-04-02 05:44:37 +08:00
<!-- <li>Customizable marker icons</li> -->
2011-04-01 22:14:41 +08:00
< li > < span class = "quiet" > A simple interface for implementing< / span > custom map layers< / li >
2011-04-13 21:38:05 +08:00
< li > < span class = "quiet" > The same for< / span > custom map controls< / li >
2011-04-02 05:44:37 +08:00
< li > < span class = "quiet" > Ability to implement< / span > custom map projections< / li >
2011-04-01 22:14:41 +08:00
< / ul >
2011-04-02 05:44:37 +08:00
2011-04-01 22:14:41 +08:00
< h3 > Performance features< / h3 >
< ul >
2011-04-02 05:44:37 +08:00
< li > Hardware acceleration on iOS < span class = "quiet" > makes it feel as smooth as native apps< / span > < / li >
< li > Smart polyline/polygon rendering < span class = "quiet" > makes it responsive even when displaying objects with thousands of points< / span > < / li >
< li > Modular build system < span class = "quiet" > allows you to reduce the size of the library by leaving out the code you don't need< / span > < / li >
2011-04-01 22:14:41 +08:00
< / ul >
2011-04-02 05:44:37 +08:00
< / div >
< div class = "span-5 last" >
2011-04-11 21:22:07 +08:00
< h3 > Map controls< / h3 >
< ul >
2011-04-02 06:08:24 +08:00
< li > Zoom buttons< / li >
2011-04-11 21:22:07 +08:00
< li class = "noimpl" > Zoom silder< / li >
< li class = "noimpl" > Attribution< / li >
2011-04-08 17:19:41 +08:00
<!-- <li>Scale</li> -->
2011-04-02 06:08:24 +08:00
< / ul >
2011-04-01 22:14:41 +08:00
< h3 > Browser support< / h3 >
2011-04-08 17:31:41 +08:00
< h4 > On desktop< / h4 >
2011-04-01 22:14:41 +08:00
< ul >
< li > Firefox 3.6+< / li >
< li > Chrome< / li >
< li > Safari 5+< / li >
2011-04-02 06:08:24 +08:00
< li > IE 7– 9< / li >
2011-04-01 22:14:41 +08:00
< li > IE 6 < span class = "quiet" > (not perfect but accessible)< / span > < / li >
< / ul >
2011-04-08 17:31:41 +08:00
< h4 > On mobile< / h4 >
2011-04-01 22:14:41 +08:00
< ul >
< li > Safari for iOS 3/4+< / li >
< li > WebKit for Android 2.2+< / li >
< / ul >
< / div >
< / div >
2011-04-02 05:51:58 +08:00
< p > If you find some feature really missing in Leaflet, please submit it to the < a href = "https://github.com/CloudMade/Leaflet/issues" > issue tracker< / a > .< / p >
2011-04-01 22:14:41 +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 >
< 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 >
< script >
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
< / script >
< / body >
< / html >
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
