100 lines
5.3 KiB
HTML
100 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade</title>
|
|
|
|
<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 open-source JavaScript library for powering websites and web apps with tile-based interactive maps on both desktop abd mobile browsers, developed by CloudMade." />
|
|
|
|
<!-- 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" />
|
|
|
|
<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>
|
|
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
|
|
|
<hr />
|
|
<p class="nav large quiet">
|
|
<span>Home</span> |
|
|
<a href="#">Features</a> |
|
|
<a href="reference.html">Documentation</a> |
|
|
<a href="#">Examples</a> |
|
|
<a href="http://github.com/CloudMade/Leaflet/zipball/master">Download (zip)</a> |
|
|
<a class="github-link" href="http://github.com/CloudMade/Leaflet">Source on GitHub →</a> |
|
|
<a class="twitter-link" href="http://twitter.com/LeafletJS">Follow on Twitter →</a>
|
|
</p>
|
|
<hr />
|
|
|
|
<h3>About the library</h3>
|
|
<p>Leaflet is a modern, lightweight BSD-licensed JavaScript library for powering websites and web apps with tile-based interactive maps. It will form the core of CloudMade's next generation JavaScript API.</p>
|
|
|
|
<p>Leaflet is built from the ground up to work efficiently and smoothly on <em>both desktop and mobile</em> web browsers, utilizing cutting-edge technologies included in HTML5. It's main priorities are <em>usability, performance, A-grade browser support, flexibility and easy to use API</em>. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.</p>
|
|
<!-- <p><strong>Supported browsers:</strong> IE6+, Firefox 3.6+, Safari 5+, Chrome, iOS 3+, Android 2.2+</p> -->
|
|
|
|
<p>
|
|
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://cloudmade.github.com/Leaflet/" 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><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
|
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcloudmade.github.com%2FLeaflet%2F&layout=standard&show_faces=false&width=660&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
|
|
</p>
|
|
|
|
<hr />
|
|
|
|
<h3>Basic usage example</h3>
|
|
<div id="map"></div>
|
|
<script>
|
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
|
|
|
|
var map = new L.Map('map');
|
|
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
|
|
|
|
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>
|
|
|
|
<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',
|
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
|
|
|
|
// 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 marker in the given location and add it to the map
|
|
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
|
|
map.addLayer(marker);
|
|
|
|
// attach a given HTML content to the marker and immediately open it
|
|
marker.bindPopup("A pretty CSS3 popup.<br />Easily customizable.").openPopup();</code></pre>
|
|
|
|
<hr />
|
|
|
|
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 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>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
hljs.tabReplace = ' ';
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!-- <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a> --> |