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

pass three

Browse Source
This commit is contained in:
Vladimir Agafonkin 2014-04-22 16:51:21 +03:00
parent d7e0cb151a
commit 75466f41fb
5 changed files with 84 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_layouts/v2.html
View File

@ -51,13 +51,14 @@
</script> </script>
</head> </head>
<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}> <body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
{% if page.title != nil %}
<div class="container"> <div class="container">
{% endif %}
<h1><a href="http://leafletjs.com">Leaflet</a></h1> <h1><a href="http://leafletjs.com"><img src="{{ root }}docs/images/logo-800.png" alt="Leaflet" width="300" /></a></h1>
<h3 class="tagline">An Open-Source JavaScript Library<br> for Mobile-Friendly Interactive Maps</h3> <h3 class="tagline">an open-source JavaScript library<br> for mobile-friendly interactive maps</h3>
<ul class="nav"> <ul class="nav">
<!-- <li><a class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
<li> <li>
{% if page.title == nil %} {% if page.title == nil %}
<span>Overview</span> <span>Overview</span>
@ -109,10 +110,13 @@
{{ content }} {{ content }}
{% if page.title != nil %}
<div class="footer"> <div class="footer">
<p>&copy; 2010&ndash;2014 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010&ndash;2011 <a href="http://cloudmade.com">CloudMade</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p> <p>&copy; 2010&ndash;2014 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010&ndash;2011 <a href="http://cloudmade.com">CloudMade</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
</div> </div>
</div> </div>
{% endif %}
<script> <script>
hljs.tabReplace = ' '; hljs.tabReplace = ' ';

32
docs/css/main.css
View File

@ -5,7 +5,8 @@ body {
} }
.container { .container {
width: 960px; max-width: 920px;
padding: 0 20px;
margin: 0 auto; margin: 0 auto;
} }
@ -22,24 +23,16 @@ p {
color: #444; color: #444;
} }
.container pre { .container pre {
box-shadow: 0 0 15px rgba(0,0,0,0.1); /*box-shadow: 0 0 15px rgba(0,0,0,0.1);
border-radius: 5px; border-radius: 5px;*/
border: 1px solid #ccc; border: 1px dotted #aaa;
} }
h1 { h1 {
margin-top: 50px; margin-top: 50px;
text-align: center;
} }
h1 a { h1 a {
display: block;
height: 0;
padding-top: 73px;
width: 220px;
overflow: hidden;
background: url(../images/logo.png) 0 0 no-repeat;
margin: 0 auto;
margin-bottom: 8px;
text-decoration: none;
-webkit-transition: 0.8s all; -webkit-transition: 0.8s all;
} }
h1 a:hover, h1 a:focus { h1 a:hover, h1 a:focus {
@ -81,20 +74,22 @@ h2, h3, .nav {
list-style: none; list-style: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
font-size: 22px; font-size: 24px;
margin-bottom: 50px; margin-bottom: 50px;
} }
.nav li { .nav li {
display: inline; display: inline;
padding: 10px; padding: 10px;
font-weight: 300; font-weight: 300;
color: #999;
} }
.nav li a { .nav li a {
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
color: #0b6; color: #0b6;
} }
.nav li a:hover {
text-decoration: underline;
}
a { a {
color: #0b6; color: #0b6;
@ -105,3 +100,10 @@ a {
margin-top: 50px; margin-top: 50px;
color: #777; color: #777;
} }
.usedby {
background: #eee;
height: 80px;
margin: 50px 0;
}

BIN
docs/images/logo-800.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

60
index-v2.html Normal file
View File

@ -0,0 +1,60 @@
---
layout: v2
---
<div class="container">
<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps, used by the world's biggest websites.
Weighing just about <abbr title="33 KB gzipped &mdash; that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">33 KB of JS</abbr>,
it has all the <a href="features.html">features</a> most developers ever need for online maps.</p>
<p>Leaflet is designed with <em>simplicity</em>, <em>performance</em> and <em>usability</em> in mind.
It works efficiently across all major desktop and mobile platforms,
can be extended with lots of <a href="plugins.html">plugins</a>,
has a beautiful, easy to use and <a title="Leaflet API reference" href="reference.html">well-documented API</a>
and a simple, readable&nbsp;<a title="Leaflet source code repository on GitHub" href="https://github.com/Leaflet/Leaflet">source code</a> that is a&nbsp;joy to
<a title="A guide to contributing to Leaflet" href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribute</a> to.</p>
</div>
<div class="usedby"></div>
<div class="container">
<div id="map" class="map" style="height: 300px"></div>
<p>For this basic example, let's create a map with <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr> and add a marker with some text in a popup:</p>
<pre class="basic-code javascript"><code>// create a map in the "map" div, set the view to some place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
}).addTo(map);
// add a marker, add some popup content to it and show it
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. &lt;br&gt; Easily customizable.')
.openPopup();</code></pre>
Learn more with the <a href="examples/quick-start.html">quick start guide</a>, check out <a href="examples.html">other tutorials</a>,
or head straight to the <a href="reference.html">API documentation</a>.
If you have any questions, take a look at the <a href="https://github.com/Leaflet/Leaflet/blob/master/FAQ.md">FAQ</a> first.
<div class="footer">
<p>&copy; 2010&ndash;2014 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010&ndash;2011 <a href="http://cloudmade.com">CloudMade</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
</div>
</div>
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
L.marker([51.504, -0.159])
.addTo(map)
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
.openPopup();
</script>

81
index-v2.md
View File

@ -1,81 +0,0 @@
---
layout: v2
---
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps, used by the world's biggest websites.
Weighing just about <abbr title="33 KB gzipped &mdash; that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">33 KB of JS</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,
can be extended with lots of [plugins][],
has a beautiful, easy to use and [well-documented API][]
and a simple, readable [source code][] that is a&nbsp;joy to [contribute][] to.
## Basic Example
Let's create a map with <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr> and add a marker with some text in a popup:
<div id="map" class="map" style="height: 300px"></div>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
</script>
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). <br>
If you have any questions, take a look at the [FAQ](https://github.com/Leaflet/Leaflet/blob/master/FAQ.md) first.
## 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/Leaflet/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.
Leaflet is developed by [Vladimir Agafonkin][] with a&nbsp;team of dedicated [contributors][].
[Vladimir Agafonkin]: http://agafonkin.com/en
[contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
[features]: features.html
[plugins]: plugins.html
[well-documented API]: reference.html "Leaflet API reference"
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
[reporting bugs]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs
[improving documentation]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation
[@mourner]: http://github.com/mourner
[GitHub issues page]: http://github.com/Leaflet/Leaflet/issues
[Leaflet UserVoice page]: http://leaflet.uservoice.com
[@LeafletJS]: http://twitter.com/LeafletJS
[Leaflet mailing list]: https://groups.google.com/group/leaflet-js
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
L.marker([51.504, -0.159])
.addTo(map)
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
.openPopup();
</script>