87 lines
3.9 KiB
HTML
87 lines
3.9 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 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>
|
||
|
|
|
||
|
|
<h3><a href="#">Leaflet quick start guide</a></h3>
|
||
|
|
|
||
|
|
<p>A simple example that will quickly get you started with Leaflet basics. You will find out how to:</p>
|
||
|
|
<ul>
|
||
|
|
<li>put a Leaflet map (with CloudMade tiles) on your page</li>
|
||
|
|
<li>add markers, polylines, polygons and circles to it</li>
|
||
|
|
<li>attach popups to them</li>
|
||
|
|
<li>deal with events (e.g. do something on map click)</li>
|
||
|
|
</ul>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h3><a href="#">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 zoom the map to the currently detected user location.</p>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h3><a href="#">Markers with custom icons</a></h3>
|
||
|
|
<p>This example will show you how to create customized markers for your map.</p>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h3><a href="#">Custom controls</a></h3>
|
||
|
|
<p>A brief tutorial on implementing custom map controls.</p>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h3><a 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 />
|
||
|
|
|
||
|
|
<h3><a href="#">OOP in Leaflet</a></h3>
|
||
|
|
<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">© 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>
|