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

improve main example and wording on index/features, use a better OSM copyright

Browse Source
This commit is contained in:
mourner 2012-02-14 14:21:20 +02:00
parent 0088575089
commit 47308176ff
4 changed files with 74 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
docs/css/screen.css
View File

@ -4,18 +4,18 @@ body {
.container {
background: white;
padding: 15px 40px 20px;
width: 790px;
border: 1px solid #dfdfdf;
border-top: 0;
box-shadow: 0 0 40px #e0e0e0;
-moz-box-shadow: 0 0 40px #e0e0e0;
-webkit-box-shadow: 0 0 40px #e0e0e0;
}
h1 {
display: block;
height: 0;
@ -36,7 +36,7 @@ h2 {
background: #edeeef;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: white;
background-color: #b0de5c;
@ -45,12 +45,12 @@ h2 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #b0de5c, #82cb00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00'); /* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00'); /* IE6<EFBFBD>IE9 */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: -1px -1px 0 #999;
}
h3 {
@ -72,7 +72,7 @@ h3.alt {
font-style: italic;
font-weight: normal;
}
code {
font-family: "Courier New", monospace;
}
@ -81,17 +81,17 @@ code {
border: 1px solid #ccc;
background: white;
color: #444;
box-shadow: 0 0 15px #ddd;
-moz-box-shadow: 0 0 15px #ddd;
-webkit-box-shadow: 0 0 15px #ddd;
}
table {
border-collapse: collapse;
table {
border-collapse: collapse;
}
th {
background:/*#e5ecf9;*/ #f3f3f3;
th {
background:/*#e5ecf9;*/ #f3f3f3;
}
th, td {
padding: 4px 5px;
@ -101,24 +101,24 @@ th, td {
.nav {
padding: 0;
margin: 2em 0;
list-style: none;
font-size: 1.2em;
border: 1px solid #dcddde;
overflow: hidden;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff, #eff0f1); /* FF3.6 */
background-image: -o-linear-gradient(top, #ffffff, #eff0f1); /* Opera 11.10+ */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eff0f1)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#ffffff, #eff0f1); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(top, #ffffff, #eff0f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6–IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6<EFBFBD>IE9 */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 8px #eee;
-moz-box-shadow: 0 0 8px #eee;
-webkit-box-shadow: 0 0 8px #eee;
@ -136,23 +136,23 @@ th, td {
color: #000;
background-color: #f8f9fa;
background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6);
background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6));
background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6);
background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6);
background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6));
background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6);
background-image: linear-gradient(top, #f8f9fa, #d4d5d6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6');
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6');
}
.nav li a:hover {
color: black;
background-color: #eff0f1;
background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8));
background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8);
background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8));
background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8);
background-image: linear-gradient(top, #eff0f1, #f6f7f8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
}
.nav li a.github-link,
.nav li a.twitter-link {
@ -177,18 +177,18 @@ th, td {
.nav li a.twitter-link {
background: url(http://twitter.com/phoenix/favicon.ico) 15px 12px no-repeat;
}
#forkme {
position: absolute;
top: 0;
right: 0;
position: absolute;
top: 0;
right: 0;
border: 0;
opacity: 0.4;
}
a:hover #forkme {
opacity: 1;
}
#toc {
padding-left: 20px;
}
@ -199,14 +199,14 @@ a:hover #forkme {
#toc .colborder {
padding-right: 14px;
}
#map-class {
margin-top: 1em;
}
a.nodocs {
color: #bbb;
}
#features {
margin-top: -1.5em;
}
@ -216,27 +216,38 @@ a.nodocs {
.noimpl {
color: #bbb;
}
#map {
height: 300px;
border: 1px solid #ccc;
margin-bottom: 20px;
/*box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0px 0px 10px #ccc;
-webkit-box-shadow: 0px 0px 10px #ccc;*/
/*box-shadow: 0px 0px 10px #ccc;
-moz-box-shadow: 0px 0px 10px #ccc;
-webkit-box-shadow: 0px 0px 10px #ccc;*/
}
h3 span {
color: #888;
}
.example-img {
float: left;
float: left;
margin: 0 18px 18px 0;
padding: 1px;
}
.bordered-img {
padding: 0;
border: 1px solid #ddd;
}
}
.text-cut[class] {
font-size: 0;
color: white;
}
.text-cut:after {
content: attr(data-cut);
font-size: 12px;
color: #777;
}

4
features.html
View File

@ -136,8 +136,8 @@
</ul>
<h4>On mobile</h4>
<ul>
<li>Safari for iOS 3/4+</li>
<li>WebKit for Android 2.2+</li>
<li>Safari for iOS 3/4/5+</li>
<li>WebKit for&nbsp;Android 2.2+,&nbsp;3.1+,&nbsp;4+</li>
<li class="noimpl">webOS browser</li>
<li class="noimpl">Blackberry 6+</li>
<li class="noimpl">Windows Phone 7</li>

27
index.html
View File

@ -55,14 +55,14 @@
</p>
<!-- <h3>About the library</h3> -->
<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>
<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. Find out more on the <a href="features.html">features</a> page.</p>
<p>Leaflet is a modern, lightweight open-source JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API. Weighting just about 21kb of gzipped JS code, it still has all the <a href="features.html">features</a> you will ever need for you web mapping needs while providing a fast, smooth, pleasant user experience.</p>
<p>It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, utilizing cutting-edge technologies included in HTML5 and CSS3, focusing on 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>
<h3>Basic usage example</h3>
<div id="map"></div>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmadeAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map');
@ -74,17 +74,18 @@
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
</script>
<p>Here we create a map with a CloudMade tile layer, add a marker and bind a popup with some text to it:</p>
<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',
cloudmadeAttribution = 'Map data &amp;copy; 2011 OpenStreetMap contributors, Imagery &amp;copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
// initialize the map on the "map" div
<p>Here we create a map with tiles of our choice, add a marker and bind a popup with some text to it:</p>
<pre><code class="javascript">// initialize the map on the "map" div
var map = new L.Map('map');
// set the map view to a given center and zoom and add the CloudMade layer
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
// create a CloudMade tile layer (or use other provider of your choice)
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/<span class="text-cut" data-cut="[your-API-key]">YOUR-API-KEY</span>/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &amp;copy; <span class="text-cut" data-cut="[&hellip;]">&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery &copy; &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>',
maxZoom: 18
});
// add the CloudMade layer to the map set the view to a given center and zoom
map.addLayer(cloudmade).setView(new L.LatLng(51.505, -0.09), 13);
// create a marker in the given location and add it to the map
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
@ -97,7 +98,7 @@ marker.bindPopup("A pretty CSS3 popup.&lt;br /&gt;Easily customizable.").openPop
<h3>Contributing to Leaflet</h3>
<p>The project is <a href="http://github.com/CloudMade/Leaflet">hosted on GitHub</a>, waiting for your contributions — just send your pull requests to <a href="http://github.com/mourner">Vladimir Agafonkin</a> (Leaflet maintainer). Let's make the best library for maps that can possibly exist! </p>
<p>You can also help the project a lot by reporting bugs and discussing features on the <a href="http://github.com/CloudMade/Leaflet/issues">issues page</a> or tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a>.
<p>You can also help the project a lot by reporting bugs and discussing features on the <a href="http://github.com/CloudMade/Leaflet/issues">issues page</a>, tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a> or joining the <a href="https://groups.google.com/group/leaflet-js">Leaflet&nbsp;mailing&nbsp;list</a>.
<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>

1
reference.html
View File

@ -1,4 +1,5 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Documentation</title>