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

front page cleanup and improvements

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-12-20 17:57:21 +02:00
parent ae8fa31c97
commit 93547a9677
4 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_layouts/default.html
View File

@ -8,7 +8,7 @@
<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." />
<meta property="og:description" content="Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps." />
<meta property="og:image" content="http://leafletjs.com/docs/images/logo.png" />
<meta itemprop="name" content="Leaflet">
@ -51,14 +51,14 @@
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
<div class="container">
<h1><a href="http://leafletjs.com">Leaflet</a></h1>
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps<!-- by <a href="http://cloudmade.com">CloudMade</a>--></h3>
<div class="social-buttons">
<iframe src="http://ghbtns.com/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
<!--<iframe src="http://ghbtns.com/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>-->
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leafletjs.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade" data-count="none">Tweet</a>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leafletjs.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps" data-via="LeafletJS" data-related="CloudMade" data-count="none">Tweet</a>
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>

7
docs/css/screen.css
View File

@ -1,5 +1,5 @@
body {
background: #f0f0f0;
background: #f0f0f0 url(../images/paper.png);
}
.container {
@ -16,7 +16,7 @@ body {
box-shadow: 0 0 60px rgba(0,0,0,0.15);
}
h1 {
margin-bottom: 10px;
margin-bottom: 0;
}
h1 a {
display: block;
@ -99,6 +99,7 @@ h3.alt {
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
font-size: 1.7em;
}
.container code, .container pre code {
@ -402,7 +403,7 @@ table.factory-table td, table.factory-table th {
}
.social-buttons {
margin: 18px 0;
margin: 18px 0 0;
padding: 6px 0 2px 8px;
background: #f3f3f3;
position: absolute;

BIN
docs/images/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

42
index.md
View File

@ -2,20 +2,40 @@
layout: default
---
<p class="notice">October 25, 2012 &mdash; Leaflet 0.4.5 bugfix release and plans for 0.5 &mdash; <a href="2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5.html">Read More in the Blog</a></p>
<!--<p class="notice">October 25, 2012 &mdash; Leaflet 0.4.5 bugfix release and plans for 0.5 &mdash; <a href="2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5.html">Read More in the Blog</a></p>-->
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by [Vladimir Agafonkin][] of [CloudMade][] with a&nbsp;team of dedicated [contributors][]. Weighing just about <abbr title="That's 102 KB minified and 176 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 10 KB of images">27 KB of gzipped JS code</abbr>, it has all the [features][] most developers ever need for online maps.
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.
It is developed by [Vladimir Agafonkin][] of [CloudMade][] with a&nbsp;team of dedicated [contributors][].
Weighing just about <abbr title="27KB gzipped &mdash; that's 102 KB minified and 176 KB in the source form, with 8 KB of CSS (1.8 KB gzipped) and 10 KB of images.">27 KB of JS code</abbr>,
it has all the [features][] most developers ever need for online maps.
Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can also be extended with many [plugins][], has a beautiful, easy to use and [well-documented][] API and a simple, readable [source code][] that is a joy to [contribute][] to.
Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind.
It works efficiently across all major desktop and mobile platforms out of the box,
taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
It can be extended with many [plugins][], has a beautiful, easy to use and [well-documented API][]
and a simple, readable [source code][] that is a joy to [contribute][] to.
{: .usedby}
Used by: [Flickr](http://flickr.com/map) [foursquare](https://foursquare.com/) [craigslist](http://t.co/V4EiURIA) [IGN](http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim) [Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/) [Meetup](http://www.meetup.com/) [WSJ](http://projects.wsj.com/campaign2012/maps/) [Geocaching](http://geocaching.com) [StreetEasy](http://streeteasy.com/) [Nestoria](http://www.nestoria.co.uk) [Topix](http://topix.com/) [Chartbeat](http://chartbeat.com/) [GIS Cloud](http://www.giscloud.com/) ...
Used by:
[Flickr](http://flickr.com/map)
[foursquare](https://foursquare.com/)
[craigslist](http://t.co/V4EiURIA)
[IGN](http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim)
[Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/)
[OSM](http://openstreetmap.org)
[Meetup](http://www.meetup.com/)
[WSJ](http://projects.wsj.com/campaign2012/maps/)
[Geocaching](http://geocaching.com)
[StreetEasy](http://streeteasy.com/)
[Nestoria](http://www.nestoria.co.uk)
[Chartbeat](http://chartbeat.com/)
[GIS Cloud](http://www.giscloud.com/)
...
<div id="map" class="map" style="height: 300px"></div>
In this basic example, we create a map with <abbr title="Here we use the beautiful CloudMade tiles which require an API key (get one for free!), but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
<!--- manually colored to support raw HTML inside the code -->
<pre><code class="javascript"><span class="comment">// create a map in the "map" div, set the view to a given place and zoom</span>
<span class="keyword">var</span> map = L.map(<span class="string">'map'</span>).setView([<span class="number">51.505</span>, -<span class="number">0.09</span>], <span class="number">13</span>);
@ -29,13 +49,19 @@ L.tileLayer(<span class="string">'http://{s}.tile.cloudmade.com/<a href="http://
L.marker([<span class="number">51.5</span>, -<span class="number">0.09</span>]).addTo(map)
.bindPopup(<span class="string">'A pretty CSS3 popup. &lt;br&gt; Easily customizable.'</span>).openPopup();</code></pre>
Learn more with the [quick start guide](examples/quick-start.html), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html).
## Getting Involved
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist. However, they're not the only way to get involved with the development of Leaflet. You can help the project tremendously by discovering and [reporting bugs][], [improving documentation][], helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js) and [GitHub issues](https://github.com/CloudMade/Leaflet/issues), showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com), tweeting to [@LeafletJS](http://twitter.com/LeafletJS) and spreading the word about Leaflet among your colleagues and friends.
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
However, they're not the only way to get involved with the development of Leaflet.
You can help the project tremendously by discovering and [reporting bugs][], [improving documentation][],
helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
and [GitHub issues](https://github.com/CloudMade/Leaflet/issues),
showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com),
tweeting to [@LeafletJS](http://twitter.com/LeafletJS)
and spreading the word about Leaflet among your colleagues and friends.
Check out the [contribution guide][contribute] for more information on getting involved with Leaflet development.
@ -44,7 +70,7 @@ Check out the [contribution guide][contribute] for more information on getting i
[contributors]: https://github.com/CloudMade/Leaflet/graphs/contributors
[features]: features.html
[plugins]: plugins.html
[well-documented]: reference.html "Leaflet API reference"
[well-documented API]: reference.html "Leaflet API reference"
[source code]: https://github.com/CloudMade/Leaflet "Leaflet GitHub repository"
[hosted on GitHub]: http://github.com/CloudMade/Leaflet
[contribute]: https://github.com/CloudMade/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"