cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
82201b7f7c
Leaflet/index.html

144 lines
9.1 KiB
HTML
Raw Normal View History

docs files
2011-03-24 00:35:29 +08:00
<!DOCTYPE html>
<html>
<head>
update docs
2011-03-24 20:02:42 +08:00
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade</title>
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<meta charset="utf-8" />
update social buttons
2012-02-04 02:33:34 +08:00
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
update description
2011-03-28 23:07:37 +08:00
<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." />
facebook image
2011-05-13 17:14:40 +08:00
<meta property="og:image" content="http://leaflet.cloudmade.com/docs/images/logo.png" />
update social buttons
2012-02-04 02:33:34 +08:00
better mobile look of the pages
2012-02-14 23:02:29 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
favicon fix
2011-04-09 22:32:46 +08:00
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +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" />
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<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>
update docs
2011-03-24 20:02:42 +08:00
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
update social buttons
2012-02-04 02:33:34 +08:00
website design update
2011-04-06 22:47:11 +08:00
<ul class="nav clearfix">
update social buttons
2012-02-04 02:33:34 +08:00
<!-- <li><a class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
Minor tweaks
2011-04-06 23:35:45 +08:00
<li><span>Overview</span></li>
update social buttons
2012-02-04 02:33:34 +08:00
<li><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="reference.html">Documentation</a></li>
<li><a href="download.html">Download</a></li>
website design update
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>
update social buttons
2012-02-04 02:33:34 +08:00
tweet and facebook like buttons, font fix
2011-03-24 21:15:08 +08:00
<p>
update social buttons
2012-02-04 02:33:34 +08:00
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120px" height="20px"></iframe>
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
add twitter follow button
2011-06-17 19:04:48 +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>
update social buttons
2012-02-04 02:33:34 +08:00
<a href="http://twitter.com/LeafletJS" data-show-count="true" data-width="235px" class="twitter-follow-button">Follow @LeafletJS</a>
add twitter follow button
2011-06-17 19:04:48 +08:00
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
update social buttons
2012-02-04 02:33:34 +08:00
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&amp;layout=button_count&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:20px;" allowTransparency="true"></iframe>
tweet and facebook like buttons, font fix
2011-03-24 21:15:08 +08:00
</p>
update social buttons
2012-02-04 02:33:34 +08:00
<!-- <h3>About the library</h3> -->
Update wording on the website
2012-03-26 16:15:06 +08:00
<p>Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API. Weighing just about 22kb of gzipped JS code, it still has all the <a href="features.html">features</a> most developers ever need for online maps, while providing a fast, 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, taking advantage of HTML5 and CSS3 on modern browsers. The focus is on usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support, convention over configuration and <a href="reference.html" title="Leaflet API reference">an easy-to-use API</a>. The OOP-based <a href="https://github.com/CloudMade/Leaflet" title="Leaflet GitHub repository">code of the library</a> is designed to be modular, extensible and very easy to understand.</p>
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<h3>Basic usage example</h3>
<div id="map"></div>
<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
improve main example and wording on index/features, use a better OSM copyright
2012-02-14 20:21:20 +08:00
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>',
add attrib control to homepage
2011-04-15 17:13:51 +08:00
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
</script>
update social buttons
2012-02-04 02:33:34 +08:00
improve main example and wording on index/features, use a better OSM copyright
2012-02-14 20:21:20 +08:00
<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
update docs
2011-03-24 20:02:42 +08:00
var map = new L.Map('map');
update docs
2011-03-24 22:18:53 +08:00
improve main example and wording on index/features, use a better OSM copyright
2012-02-14 20:21:20 +08:00
// 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);
docs files
2011-03-24 00:35:29 +08:00
update docs
2011-03-24 22:18:53 +08:00
// create a marker in the given location and add it to the map
docs files
2011-03-24 00:35:29 +08:00
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);
update docs
2011-03-24 20:02:42 +08:00
update docs
2011-03-24 22:18:53 +08:00
// attach a given HTML content to the marker and immediately open it
update docs
2011-03-24 20:02:42 +08:00
marker.bindPopup("A pretty CSS3 popup.&lt;br /&gt;Easily customizable.").openPopup();</code></pre>
docs files
2011-03-24 00:35:29 +08:00
Minor tweaks
2011-04-06 23:35:45 +08:00
<p>Check out the <a href="examples.html">examples</a> section for more examples, or head straight to the <a href="reference.html">documentation</a>.</p>
add beautiful logo, update design (thanks to Ksenia)
2011-04-09 20:37:11 +08:00
<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>
Change some links on the main page
2012-02-21 23:27:15 +08:00
<p>You can also help the project a lot by reporting bugs on the <a href="http://github.com/CloudMade/Leaflet/issues">GitHub issues page</a>, showing your support for your favorite feature suggestions on <a href="http://leaflet.uservoice.com">Leaflet UserVoice 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>.
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<hr />
Happy New Year\!
2012-02-15 02:05:42 +08:00
<p class="quiet">&copy; 2012 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
docs files
2011-03-24 00:35:29 +08:00
</div>
update social buttons
2012-02-04 02:33:34 +08:00
add forkme badge
2011-03-24 00:41:52 +08:00
<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>
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<script>
hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
add google analytics code
2011-06-17 06:56:11 +08:00
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
Add UserVoice widget to all pages
2012-02-21 23:14:40 +08:00
<script type="text/javascript">
var uvOptions = {};
(function() {
var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ygv5CFpu3yBQFTFPOAdFg.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
})();
</script>
docs files
2011-03-24 00:35:29 +08:00
</body>
</html>
update social buttons
2012-02-04 02:33:34 +08:00
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> -->
Reference in New Issue Copy Permalink