cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/gh-pages' into gh-pages-master

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-07-05 17:02:03 +03:00
commit 5546720b37
11 changed files with 194 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/css/screen.css
View File

@ -86,6 +86,12 @@ code {
-moz-box-shadow: 0 0 15px #ddd;
-webkit-box-shadow: 0 0 15px #ddd;
}
pre code a {
text-decoration: none;
}
pre code a:hover {
text-decoration: underline;
}
table {
border-collapse: collapse;
@ -254,4 +260,4 @@ h3 span {
.last ul {
margin-right: 0;
}
}

6
download.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Download</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Download</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -29,12 +29,12 @@
<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>
<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><a href="examples.html">Examples</a></li>
<li><a href="examples.html">Tutorials</a></li>
<li><a href="reference.html">Documentation</a></li>
<li><span>Download</span></li>
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>

12
examples.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Examples</title>
<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" />
@ -29,12 +29,12 @@
<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>
<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>Examples</span></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">@LeafletJS</a></li>
@ -52,7 +52,7 @@
<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>
</p>
<h3>Leaflet examples</h3>
<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>
@ -92,10 +92,6 @@
<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 class="noimpl" 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 />

6
examples/custom-icons.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Markers With Custom Icons Example</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Markers With Custom Icons Example</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -29,12 +29,12 @@
<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>
<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><a href="../examples.html">Examples</a></li>
<li><a href="../examples.html">Tutorials</a></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>

6
examples/geojson.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Leaflet on Mobile Example</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Leaflet on Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -29,12 +29,12 @@
<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>
<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><a href="../examples.html">Examples</a></li>
<li><a href="../examples.html">Tutorials</a></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>

6
examples/layers-control.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Layers Control Example</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Layers Control Example</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -29,12 +29,12 @@
<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>
<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><a href="../examples.html">Examples</a></li>
<li><a href="../examples.html">Tutorials</a></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>

6
examples/mobile.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Leaflet on Mobile Example</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Leaflet on Mobile Example</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -27,12 +27,12 @@
<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>
<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><a href="../examples.html">Examples</a></li>
<li><a href="../examples.html">Tutorials</a></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>

6
examples/quick-start.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Quick Start Guide</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Quick Start Guide</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -29,12 +29,12 @@
<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>
<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><a href="../examples.html">Examples</a></li>
<li><a href="../examples.html">Tutorials</a></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>

6
features.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Features</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Features</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -29,12 +29,12 @@
<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>
<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><span>Features</span></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="examples.html">Tutorials</a></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>

22
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade</title>
<meta charset="utf-8" />
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
@ -30,13 +30,13 @@
<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>
<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 class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
<li><span>Overview</span></li>
<li><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="examples.html">Tutorials</a></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>
@ -46,19 +46,19 @@
<p>
<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>
<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="105px" height="20px"></iframe>
<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>
<a href="http://twitter.com/LeafletJS" data-show-count="true" data-width="235px" class="twitter-follow-button">Follow @LeafletJS</a>
<a href="http://twitter.com/LeafletJS" data-show-count="true" data-show-screen-name="false" data-width="170px" class="twitter-follow-button">Follow @LeafletJS</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=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>
</p>
<!-- <h3>About the library</h3> -->
<p>Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API. Weighing just about 22kb of gzipped JS code, it still has all the <a href="features.html">features</a> most developers ever need for online maps, while providing a fast, 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, taking advantage of HTML5 and CSS3 on modern browsers. The focus is on usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support, convention over configuration and <a href="reference.html" title="Leaflet API reference">an 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>
<p>Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by <a href="http://agafonkin.com/en">Vladimir Agafonkin</a> of <a href="http://cloudmade.com">CloudMade</a> with a team of dedicated <a href="https://github.com/CloudMade/Leaflet/graphs/contributors">contributors</a>. Weighing just about <abbr title="That's 81 KB minified and 136 KB in the source form, with 6 KB of CSS (1.4 KB gzipped) and 11 KB of images">22 KB of gzipped JS code</abbr>, it still has all the <a href="features.html">features</a> most developers ever need for online maps, while providing a fast, 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, taking advantage of HTML5 and CSS3 on modern browsers. The focus is on usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support and <a href="reference.html" title="Leaflet API reference">an easy-to-use API</a> with <abbr title="Simplicity and reasonable defaults so that the API doesn't get in your way, while not losing flexibility">convention over configuration</abbr>. 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>
<h3>Basic usage example</h3>
<div id="map"></div>
@ -76,17 +76,17 @@
marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
</script>
<p>Here we create a map with tiles of our choice, add a marker and bind a popup with some text to it:</p>
<p>Here we create a map with <abbr title="Here we use the beautiful CloudMade tiles which require an API key (get one for free!), but Leaflet doesn't force you to — use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:</p>
<pre><code class="javascript">// initialize the map on the "map" div
var map = new L.Map('map');
// 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', {
// create a CloudMade tile layer with style #997 (or use other provider of your choice)
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/<a href="http://cloudmade.com/register">[API-key]</a>/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
// add the layer to the map, set the view to a given place and zoom
map.addLayer(cloudmade).setView(new L.LatLng(51.505, -0.09), 13);
// create a marker in the given location and add it to the map

163
reference.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Documentation</title>
<title>Leaflet - a JavaScript library for mobile-friendly interactive maps by CloudMade - Documentation</title>
<meta charset="utf-8" />
@ -27,12 +27,12 @@
<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>
<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><a href="examples.html">Examples</a></li>
<li><a href="examples.html">Tutorials</a></li>
<li><span>Documentation</span></li>
<li><a href="download.html">Download</a></li>
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
@ -131,8 +131,8 @@
</ul>
<h4>Utility</h4>
<ul>
<li><a class="nodocs" href="#class">Class</a></li>
<li><a href="#">Browser</a></li>
<li><a href="#class">Class</a></li>
<li><a href="#browser">Browser</a></li>
<li><a class="nodocs" href="#">Util</a></li>
<!-- <li><a class="nodocs" href="#">LineUtil</a></li>
<li><a class="nodocs" href="#">PolyUtil</a></li> -->
@ -334,7 +334,7 @@ map.addLayer(cloudmade);</code></pre>
</tr>
</table>
<h3 id="map-events">Events</h3>
<p>You can subscribe to the following events using <a href="#events">these methods</a>.</p>
@ -1199,15 +1199,15 @@ map.openPopup(popup);</code></pre>
</table>
<h3 id="url-template">URL template</h3>
<p>A string of the following form:</p>
<pre><code class="javascript">'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'</code></pre>
<p><code>{s}</code> means one of the randomly chosen subdomains (their range is specified in options; <code>a</code>, <code>b</code> or <code>c</code> by default, can be omitted), <code>{z}</code> &mdash; zoom level, <code>{x}</code> and <code>{y}</code> &mdash; tile coordinates.</p>
<p>You can use custom keys in the template, which will be evaluated from TileLayer options, like this:</p>
<pre><code class="javascript">new L.TileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});</code></pre>
<h3 id="tilelayer-options">Options</h3>
@ -2751,6 +2751,13 @@ map.addControl(layersControl);</code></pre>
alert(e.latlng);
});</code></pre>
<p>Leaflet deals with event listeners by reference, so if you want to add a listener and then remove it, define it as a function:</p>
<pre><code>function onClick(e) { ... }
map.on('click', onClick);
map.off('click', onClick);</code></pre>
<h3>Methods</h3>
<table>
<tr>
@ -2955,10 +2962,142 @@ map.addControl(layersControl);</code></pre>
<h2 id="class">L.Class</h2>
<p><code>L.Class</code> powers the OOP facilities of Leaflet and is used to create almost all of the Leaflet classes documented here.</p>
<p>In addition to implementing a simple classical inheritance model, it introduces several special properties for convenient code organization &mdash; <code>options</code>, <code>includes</code> and <code>statics</code>.</p>
<pre><code>var MyClass = L.Class.extend({
initialize: function (greeter) {
this.greeter = greeter;
// class constructor
},
greet: function (name) {
alert(this.greeter + ', ' + name)
}
});
// create instance of MyClass, passing "Hello" to the constructor
var a = new MyClass("Hello");
// call greet method, alerting "Hello, World"
a.greet("World");
</code></pre>
<h3>Inheritance</h3>
<p>You use <code>L.Class.extend</code> to define new classes, but you can use the same method on any class to inherit from it:</p>
<pre><code>var MyChildClass = MyClass.extend({
// ... new properties and methods
});</code></pre>
<p>This will create a class that inherits all methods and properties of the parent class (through a proper prototype chain), adding or overriding the ones you pass to <code>extend</code>. It will also properly react to <code>instanceof</code>:</p>
<pre><code>var a = new MyChildClass();
a instanceof MyChildClass; // true
a instanceof MyClass; // true
</code></pre>
<p>You can call parent methods (including constructor) from corresponding child ones (as you do with <code>super</code> calls in other languages) by accessing parent class prototype and using JavaScript's <code>call</code> or <code>apply</code>:</p>
<pre><code>var MyChildClass = MyClass.extend({
initialize: function () {
MyClass.prototype.initialize.call("Yo");
},
greet: function (name) {
MyClass.prototype.greet.call(this, 'bro ' + name + '!');
}
});
var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"</code></pre>
<h3>Options</h3>
<p><code>options</code> is a special property that unlike other objects that you pass to <code>extend</code> will be merged with the parent one instead of overriding it completely, which makes managing configuration of objects and default values convenient:</p>
<pre><code>var MyClass = L.Class.extend({
options: {
myOption1: 'foo',
myOption2: 'bar'
}
});
var MyChildClass = L.Class.extend({
options: {
myOption1: 'baz',
myOption3: 5
}
});
var a = new MyChildClass();
a.options.myOption1; // 'baz'
a.options.myOption2; // 'bar'
a.options.myOption3; // 5</code></pre>
<p>There's also <code>L.Util.setOptions</code>, a method for conveniently merging options passed to constructor with the defauls defines in the class:</p>
<pre><code>var MyClass = L.Class.extend({
options: {
foo: 'bar',
bla: 5
},
initialize: function (options) {
L.Util.setOptions(this, options);
...
}
});
var a = new MyClass({bla: 10});
a.options; // {foo: 'bar', bla: 10}</code></pre>
<h3>Includes</h3>
<p><code>includes</code> is a special class property that merges all specified objects into the class (such objects are called mixins). A good example of this is <code>L.Mixin.Events</code> that <a href="#events">event-related methods</a> like <code>on</code>, <code>off</code> and <code>fire</code> to the class.</p>
<pre><code> var MyMixin = {
foo: function () { ... },
bar: 5
};
var MyClass = L.Class.extend({
includes: MyMixin
});
var a = new MyClass();
a.foo();</code></pre>
<p>You can also do such includes in runtime with the <code>include</code> method:</p>
<pre><code>MyClass.include(MyMixin);</code></pre>
<h3>Statics</h3>
<p><code>statics</code> is just a convenience property that injects specified object properties as the static properties of the class, useful for defining constants:</p>
<pre><code>var MyClass = L.Class.extend({
statics: {
FOO: 'bar',
BLA: 5
}
});
MyClass.FOO; // 'bar'</code></pre>
<h2 id="browser">L.Browser</h2>
<p>A namespace with properties for browser/feature detection used by Leaflet internally.</p>
<pre><code>if (L.Browser.ie6) {
alert('Upgrade your browser, dude!');
}</code></pre>
<table>
<tr>
<th>property</th>
@ -3065,7 +3204,7 @@ map.addControl(layersControl);</code></pre>
...
// you include Leaflet, it replaces the L variable to Leaflet namespace
var Leaflet = L.noConflict();
var Leaflet = L.noConflict();
// now L points to that other library again, and you can use Leaflet.Map etc.</code></pre>