149 lines
7.7 KiB
HTML
149 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Examples</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 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." />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="icon" type="image/png" href="docs/images/favicon.png" />
|
|
|
|
<!-- 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">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
|
|
|
<ul class="nav clearfix">
|
|
<li><a href="index.html">Overview</a></li>
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><span>Tutorials</span></li>
|
|
<li><a href="reference.html">Documentation</a></li>
|
|
<li><a href="download.html">Download</a></li>
|
|
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">Twitter</a></li>
|
|
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</a></li>
|
|
</ul>
|
|
|
|
<div class="social-buttons">
|
|
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&repo=Leaflet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="113px" height="20px"></iframe>
|
|
|
|
<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&repo=Leaflet&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="96px" height="20px"></iframe>
|
|
|
|
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade">Tweet</a>
|
|
|
|
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
|
|
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
|
|
|
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&layout=button_count&show_faces=false&width=430&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:87px; height:20px;" allowTransparency="true"></iframe>
|
|
|
|
<div class="g-plusone" data-size="medium" data-href="http://leaflet.cloudmade.com/"></div>
|
|
|
|
<script type="text/javascript">
|
|
(function() {
|
|
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
|
|
po.src = 'https://apis.google.com/js/plusone.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
|
|
})();
|
|
</script>
|
|
</div>
|
|
|
|
<h3>Leaflet tutorials</h3>
|
|
|
|
<p>Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.</p>
|
|
|
|
<hr />
|
|
|
|
<a href="examples/quick-start.html"><img src="docs/images/quick-start.png" class="example-img bordered-img" /></a>
|
|
<h3><a href="examples/quick-start.html">Leaflet Quick Start Guide</a></h3>
|
|
<p>A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with CloudMade tiles) on your page, working with markers, polylines and popups, and dealing with events.</p>
|
|
|
|
<hr />
|
|
|
|
<a href="examples/mobile.html"><img src="docs/images/mobile.png" class="example-img" /></a>
|
|
<h3><a href="examples/mobile.html">Leaflet on Mobile</a></h3>
|
|
<p>In this example, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.</p>
|
|
<hr />
|
|
|
|
<a href="examples/custom-icons.html"><img src="docs/images/custom-icons.png" class="example-img bordered-img" /></a>
|
|
<h3><a href="examples/custom-icons.html">Markers With Custom Icons</a></h3>
|
|
<p>In this pretty example, you'll learn how to easily define your own icons for use by the markers you put on the map.</p>
|
|
<hr />
|
|
|
|
<a href="examples/geojson.html"><img src="docs/images/geojson.png" class="example-img bordered-img" /></a>
|
|
<h3><a href="examples/geojson.html">Using GeoJSON with Leaflet</a></h3>
|
|
<p>In this example, you'll learn how to create and interact with map vectors created from <a href="http://geojson.org/">GeoJSON</a> objects.</p>
|
|
<hr />
|
|
|
|
<a href="examples/layers-control.html"><img src="docs/images/layers-control.png" class="example-img bordered-img" /></a>
|
|
<h3><a href="examples/layers-control.html">Layer Groups and Layers Control</a></h3>
|
|
<p>A tutorial on how to manage groups of layers and use the layer switching control.</p>
|
|
<hr />
|
|
|
|
<h3><a class="noimpl" href="#">Custom Controls</a></h3>
|
|
<p>A brief tutorial on implementing custom map controls.</p>
|
|
<hr />
|
|
|
|
<h3><a class="noimpl" href="#">Custom Overlays</a></h3>
|
|
<p>If markers, popups and vectors are not enough for you, here's a guide for creating your own map overlays (things to put on a map).</p>
|
|
<hr />
|
|
|
|
<p>More examples coming soon!</p>
|
|
|
|
<hr />
|
|
|
|
<p class="quiet">© 2012 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2012 <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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</body>
|
|
</html>
|