cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

features page

Browse Source
This commit is contained in:
Mourner 2011-04-01 17:14:41 +03:00
parent 8c541b10f9
commit 5bf08bdd71
4 changed files with 137 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/css/screen.css
View File

@ -104,4 +104,11 @@ a.twitter-link {
}
a.nodocs {
color: #f44;
}
#features {
margin-top: -1.5em;
}
#features .quiet {
color: #777;
}

128
features.html Normal file
View File

@ -0,0 +1,128 @@
<!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." />
<!-- 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>
<hr />
<p class="nav large quiet">
<a href="index.html">Home</a> |
<span>Features</span> |
<a href="reference.html">Documentation</a> |
<a href="#">Examples</a> |
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> |
<a class="github-link" href="http://github.com/CloudMade/Leaflet">Source on GitHub</a> |
<a class="twitter-link" href="http://twitter.com/LeafletJS">Follow on Twitter</a>
</p>
<hr />
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It still satisfies the needs of the vast majority of map apps developers while being flexible enough to be easily extended by writing third-party plugins.</p>
<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>Image overlays</li>
<li>Markers</li>
<li>Popups</li>
</ul>
<h3>Interaction features</h3>
<h4>On desktop browsers</h3>
<ul>
<li>Dragging</li>
<li>Scroll wheel zoom</li>
<li>Double click zoom</li>
<li>Shift-drag zoom to bounding box</li>
</ul>
<h4>On mobile browsers (iOS, Android)</h4>
<ul>
<li>Touch dragging</li>
<li>Multi-touch zoom <span class="quiet">(using two fingers)</span></li>
</ul>
</div>
<div class="span-6">
<h3>Visual features</h3>
<ul>
<li>Panning animation</li>
<li>Zooming animation</li>
<li>Smooth zoom on mobile browsers</li>
<li>Very nice default design for markers and popups</li>
</ul>
<h3>Customization features</h3>
<ul>
<li>Customizable marker icons</li>
<li>Pure CSS3 popups <span class="quiet">for easy restyling</span></li>
<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
<li><span class="quiet">Ability to implement</span> custom map projections <span class="quiet">(other than the usual Spherical Mercator)</span></li>
</ul>
</div>
<div class="span-8 last">
<h3>Performance features</h3>
<ul>
<li>Hardware acceleration on iOS <span class="quiet">to make it feel as smooth as native apps</span></li>
<li>Smart polyline/polygon rendering <span class="quiet">to make it responsive even when displaying objects with many thousands of points</span></li>
<li>Modular build system <span class="quiet">to reduce the size of the library by leaving out the code you don't need</span></li>
</ul>
<h3>Browser support</h3>
<h4>On desktop</h2>
<ul>
<li>Firefox 3.6+</li>
<li>Chrome</li>
<li>Safari 5+</li>
<li>IE 7-9</li>
<li>IE 6 <span class="quiet">(not perfect but accessible)</span></li>
</ul>
<h4>On mobile</h2>
<ul>
<li>Safari for iOS 3/4+</li>
<li>WebKit for Android 2.2+</li>
</ul>
</div>
</div>
<hr />
<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 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> -->

2
index.html
View File

@ -30,7 +30,7 @@
<hr />
<p class="nav large quiet">
<span>Home</span> |
<a href="#">Features</a> |
<a href="features.html">Features</a> |
<a href="reference.html">Documentation</a> |
<a href="#">Examples</a> |
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> |

2
reference.html
View File

@ -28,7 +28,7 @@
<hr />
<p class="nav large quiet">
<a href="index.html">Home</a> |
<a href="#">Features</a> |
<a href="features.html">Features</a> |
<span>Documentation</span> |
<a href="#">Examples</a> |
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> |