cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
44dca450fc
Leaflet/examples.html

95 lines
5.2 KiB
HTML
Raw Normal View History

examples
2011-04-18 20:53:32 +08:00
<!DOCTYPE html>
<html>
<head>
titles update
2011-04-27 19:54:39 +08:00
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Examples</title>
examples
2011-04-18 20:53:32 +08:00
<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." />
<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">A Modern, Lightweight Open-Source JavaScript Library for 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>Examples</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">@LeafletJS</a></li>
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
</ul>
titles update
2011-04-27 19:54:39 +08:00
<h3>Leaflet examples</h3>
<p>Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.</p>
<p>
<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><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%2Fleaflet.cloudmade.com&amp;layout=standard&amp;show_faces=false&amp;width=660&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:660px; height:24px;" allowTransparency="true"></iframe>
</p>
<hr />
new example: custom icons!
2011-05-18 19:54:58 +08:00
<a href="examples/quick-start.html"><img src="docs/images/quick-start.png" class="example-img bordered-img" /></a>
first example
2011-04-27 06:26:03 +08:00
<h3><a href="examples/quick-start.html">Leaflet Quick Start Guide</a></h3>
first example finished
2011-04-27 19:41:58 +08:00
<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>
examples
2011-04-18 20:53:32 +08:00
<hr />
initial mobile example
2011-04-27 22:11:24 +08:00
<a href="examples/mobile.html"><img src="docs/images/mobile.png" class="example-img" /></a>
mobile example finished
2011-04-28 05:11:52 +08:00
<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>
examples
2011-04-18 20:53:32 +08:00
<hr />
new example: custom icons!
2011-05-18 19:54:58 +08:00
<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>
examples
2011-04-18 20:53:32 +08:00
<hr />
mobile example finished
2011-04-28 05:11:52 +08:00
<h3><a class="noimpl" href="#">Custom Controls</a></h3>
examples
2011-04-18 20:53:32 +08:00
<p>A brief tutorial on implementing custom map controls.</p>
<hr />
mobile example finished
2011-04-28 05:11:52 +08:00
<h3><a class="noimpl" href="#">Custom Overlays</a></h3>
examples
2011-04-18 20:53:32 +08:00
<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 />
mobile example finished
2011-04-28 05:11:52 +08:00
<h3><a class="noimpl" href="#">OOP in Leaflet</a></h3>
examples
2011-04-18 20:53:32 +08:00
<p>Here you will learn how to use Leaflet <acronym title="Object Oriented Programming">OOP</acronym> facilities to simplify and organize your code.</p>
<hr />
<p>More examples coming soon!</p>
<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>
<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>
Reference in New Issue Copy Permalink