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

135 lines
8.6 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> -->
better mobile look of the pages
2012-02-14 23:02:29 +08:00
<p>Leaflet is a modern, lightweight open-source JavaScript library for interactive maps for 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 <a href="reference.html" title="Leaflet API reference">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>
improve main example and wording on index/features, use a better OSM copyright
2012-02-14 20:21:20 +08:00
<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>.
update social buttons
2012-02-04 02:33:34 +08:00
docs files
2011-03-24 00:35:29 +08:00
<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>
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>
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