503 changed files with 24035 additions and 201395 deletions
--- a/.gitignore
+++ b/.gitignore
@ -8,12 +8,3 @@ _site
 *.sublime-*
 _site
 dist/*.js
 dist/*.map
 dist/reference.html
 coverage/
 *.js.html
 .mailmap
 bower.json
 component.json
 debug/local/
 Gemfile.lock
--- a/.travis.yml
+++ b/.travis.yml
@ -1,28 +0,0 @@
 sudo: false
 language: node_js
 node_js:
  - node
 addons:
  artifacts:
    paths:
    - dist
    target_paths:
    - content/leaflet/${NAME}
 env:
  global:
  - ARTIFACTS_BUCKET=leafletjs-cdn
  - ARTIFACTS_PERMISSIONS=public-read
  - secure: |-
      JlC1rD7WryxlUbWmD3NWVX9E60XB/+ss7+j0OaY3WqWziGUWDCuoVkOMGXnp
      Ev27O8qhlmRkeyiimUN64UzK0yeZ139DcZMY6r4A5E2kwHYRAO/H/zl5RAGo
      Yd9GUPwZfr3xV8WhH2GFy/L/mRjkGwue2o6ZxdsqBOKfYaF9Ryg=
  - secure: |-
      XW1hzORAtSpTgTKkQwel5gRMDy6SotzeSRsVV2jQCn46VIMx8G/J5nOI+ImL
      yeoH12PhCR0h39dM7mq8TYJo5DHwvbotI5nQhpMruSt8eMFbym8nGiqQh806
      fSJXkxmQ4MAjUdNFDIirBHhdZme8q3PueFzJ+5odFMvPGn/aITQ=
 after_success:
  - npm run build
  - cd dist && zip -x .DS_Store -r leaflet.zip . && cd ..
  - NAME=$TRAVIS_BRANCH
  - '[[ $TRAVIS_PULL_REQUEST != ''false'' ]] && NAME=$TRAVIS_PULL_REQUEST'
  - '[[ -n $TRAVIS_TAG ]] && NAME=$TRAVIS_TAG'
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/docs/CNAME
+++ b/docs/CNAME
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -4,23 +4,18 @@ Contributing to Leaflet
 1. [Getting Involved](#getting-involved)
 2. [Reporting Bugs](#reporting-bugs)
 3. [Contributing Code](#contributing-code)
- 4. [Running the Tests](#running-the-tests)
+ 4. [Improving Documentation](#improving-documentation)
 5. [Code Coverage](#code-coverage)
 6. [Improving Documentation](#improving-documentation)
 7. [Code of Conduct](#code-of-conduct)
 8. [Thank You](#thank-you)
 ## Getting Involved
 Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
-However, they're not the only way to get involved with Leaflet development.
+However, they're not the only way to get involved with the development of Leaflet.
-You can help the project tremendously by discovering and [reporting bugs](#reporting-bugs);
+You can help the project tremendously by discovering and [reporting bugs](#reporting-bugs),
-[improving documentation](#improving-documentation);
+[improving documentation](#improving-documentation),
-helping others on [Stack Overflow](https://stackoverflow.com/questions/tagged/leaflet),
+helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
-[GIS Stack Exchange](https://gis.stackexchange.com/questions/tagged/leaflet)
+and [GitHub issues](https://github.com/Leaflet/Leaflet/issues),
-and [GitHub issues](https://github.com/Leaflet/Leaflet/issues);
+showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com),
-showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com);
+tweeting to [@LeafletJS](http://twitter.com/LeafletJS)
 tweeting to [@LeafletJS](http://twitter.com/LeafletJS);
 and spreading the word about Leaflet among your colleagues and friends.
 ## Reporting Bugs
@ -31,35 +26,31 @@ first make sure that your issue is caused by Leaflet, not your application code
 Second, search the already reported issues for similar cases,
 and if it's already reported, just add any additional details in the comments.
-After you've made sure that you've found a new Leaflet bug,
+After you made sure that you've found a new Leaflet bug,
 here are some tips for creating a helpful report that will make fixing it much easier and quicker:
 * Write a **descriptive, specific title**. Bad: *Problem with polylines*. Good: *Doing X in IE9 causes Z*.
 * Include **browser, OS and Leaflet version** info in the description.
- * Create a **simple test case** that demonstrates the bug (e.g. using [Leaflet playground](http://playground-leaflet.rhcloud.com/)).
+ * Create a **simple test case** that demonstrates the bug (e.g. using [JSFiddle](http://jsfiddle.net/)).
 * Check whether the bug can be reproduced in **other browsers**.
 * Check if the bug occurs in the stable version, master, or both.
 * *Bonus tip:* if the bug only appears in the master version but the stable version is fine,
   use `git bisect` to find the exact commit that introduced the bug.
 If you just want some help with your project,
 try asking on [Stack Overflow](https://stackoverflow.com/questions/tagged/leaflet)
 or [GIS Stack Exchange](https://gis.stackexchange.com/questions/tagged/leaflet) instead.
 ## Contributing Code
 ### Considerations for Accepting Patches
-While we happily accept patches, we're also committed to keeping Leaflet simple, lightweight and blazingly fast.
+While we happily accept patches, we're also commited to keeping Leaflet simple, lightweight and blazingly fast.
 So bugfixes, performance optimizations and small improvements that don't add a lot of code
 are much more likely to get accepted quickly.
-Before sending a pull request with a new feature, check if it's been discussed before already
+Before sending a pull request with a new feature, first check if it's been discussed before already
 (either on [GitHub issues](https://github.com/Leaflet/Leaflet/issues)
 or [Leaflet UserVoice](http://leaflet.uservoice.com/)),
-and ask yourself two questions:
+and then ask yourself two questions:
- 1. Are you sure that this new feature is important enough to justify its presence in the Leaflet core?
+ 1. Are you sure that this new feature is important enough to justify its presense in the Leaflet core?
    Or will it look better as a plugin in a separate repository?
 2. Is it written in a simple, concise way that doesn't add bulk to the codebase?
@ -68,17 +59,17 @@ please consider submitting another pull request with the corresponding [document
 ### Setting up the Build System
-The Leaflet build system uses [Node](http://nodejs.org/), and the [Jake](http://jakejs.com/) Javascript build tool.
+To set up the Leaflet build system, install [Node](http://nodejs.org/),
-To set up the Leaflet build system, install Node then run the following commands in the project root to install dependencies:
+then run the following commands in the project root (with superuser permissions):
 ```
-npm install
+npm install -g jake
-```
+npm install jshint
-or, if you prefer [`yarn`](https://yarnpkg.com/) over `npm`:
+npm install uglify-js
 ```
 yarn install
 ```
 You can build minified Leaflet by running `jake` (it will be built from source in the `dist` folder).
 ### Making Changes to Leaflet Source
 If you're not yet familiar with the way GitHub works (forking, pull requests, etc.),
@ -89,73 +80,26 @@ You should always write each batch of changes (feature, bugfix, etc.) in **its o
 Please do not commit to the `master` branch, or your unrelated changes will go into the same pull request.
 You should also follow the code style and whitespace conventions of the original codebase.
 In particular, use tabs for indentation and spaces for alignment.
-Before committing your changes, run `npm run lint` to catch any JS errors in the code and fix them.
+Before commiting your changes, run `jake lint` to catch any JS errors in the code and fix them.
 If you add any new files to the Leaflet source, make sure to also add them to `build/deps.js`
 so that the build system knows about them.
-Also, please make sure that you have [line endings configured properly](https://help.github.com/articles/dealing-with-line-endings) in Git! Otherwise the diff will show that all lines of a file were changed even if you touched only one.
+But please **do not commit the built files** (`leaflet.js` and `leaflet-src.js`) along with your changes,
 otherwise there may be problems merging the pull request.
 These files are only commited in the `master` branch of the main Leaflet repository.
 Happy coding!
 ### Using RollupJS
 The source JavaScript code for Leaflet is a few dozen files, in the `src/` directory.
 But normally, Leaflet is loaded in a web browser as just one JavaScript file.
 In order to create this file, run `npm run rollup` or `yarn run rollup`.
 You'll find `dist/leaflet-src.js` and `dist/leaflet.js`. The difference is that
 `dist/leaflet-src.js` has sourcemaps and it's not uglified, so it's better for
 development. `dist/leaflet.js` is uglified and thus is smaller, so it's better
 for deployment.
 When developing (or bugfixing) core Leaflet functionalities, it's common to use
 the webpages in the `debug/` directory, and run the unit tests (`spec/index.html`)
 in a graphical browser. This requires regenerating the bundled files quickly.
 In order to do so, run `npm run watch` or `yarn run watch`. This will keep
 on rebuilding the bundles whenever any source file changes.
 ## Running the Tests
 To run the tests from the command line,
 install [PhantomJS](http://phantomjs.org/) (and make sure it's in your `PATH`),
 then run:
 ```
 npm run test
 ```
 To run all the tests in actual browsers at the same time, you can do:
 ```
 npm run test -- --ff --chrome --safari --ie
 ```
 To run the tests in a browser manually, open `spec/index.html`.
 ## Code Coverage
 To generate a detailed report about test coverage (which helps tremendously when working on test improvements), run:
 ```
 npm run test -- --cov
 ```
 After that, open `coverage/<environment>/index.html` in a browser to see the report.
 From there you can click through folders/files to get details on their individual coverage.
 ## Improving Documentation
-The code of the live Leaflet website that contains all documentation and examples is located in the `docs/` directory of the `master` branch
+The code of the live Leaflet website that contains all documentation and examples is located in the `gh-pages` branch
-and is automatically generated from a set of HTML and Markdown files by [Jekyll](http://jekyllrb.com/).
+and is automatically generated from a set of HTML and Markdown files by [Jekyll](https://github.com/mojombo/jekyll).
 The easiest way to make little improvements such as fixing typos without even leaving the browser
 is by editing one of the files with the online GitHub editor:
-browse the [`docs/ directory`](https://github.com/Leaflet/Leaflet/tree/master/docs),
+browse the [gh-pages branch](https://github.com/Leaflet/Leaflet/tree/gh-pages),
-choose a certain file for editing (e.g. `plugins.md` for the list of Leaflet plugins),
+choose a certain file for editing (e.g. `reference.html` for API reference),
 click the Edit button, make changes and follow instructions from there.
 Once it gets merged, the changes will immediately appear on the website.
@ -163,46 +107,18 @@ If you need to make edits in a local repository to see how it looks in the proce
 1. [Install Ruby](http://www.ruby-lang.org/en/) if don't have it yet.
 2. Run `gem install jekyll`.
- 3. Enter the directory where you cloned the Leaflet repository
+ 3. Run `jekyll --auto` inside the `Leaflet` folder.
- 4. Make sure you are in the `master` branch by running `git checkout master`
+ 4. Open the website from the `_site` folder.
 5. Enter the documentation subdirectory by running `cd docs`
 6. Run `jekyll serve --watch`.
 7. Open `localhost:4000` in your web browser.
-Now any file changes will be updated when you reload pages automatically.
+Now any file changes will be reflected on the generated pages automatically.
-After committing the changes, just send a pull request.
+After commiting the changes, just send a pull request.
-### API documentation
+If you need to update documentation according to a new feature that only appeared in the master version (not stable one),
-
+you need to make changes to `gh-pages-master` branch instead of `gh-pages`.
-Since Leaflet 1.0.0-rc1, the API documentation in `reference-1.0.0.html` is handled
+It will get merged into the latter when released as stable.
 via [Leafdoc](https://github.com/Leaflet/Leafdoc). This means that next to the
 code for every method, option or property there is a special code comment documenting
 that feature. In order to edit the API documentation, just edit these comments in the
 source code.
 In order to generate the documentation, make sure that the development dependencies
 are installed (run either `npm install` or `yarn install`), then just run
 ```
 npm run docs
 ```
 and you'll find a `.html` file in the `dist/` directory.
 On every release of a new Leaflet version, this file will be generated and copied
 over to `docs/reference.html` - there is no need to send pull requests with changes to this file to update the API documentation.
 ## Code of Conduct
 Everyone is invited to participate in the Leaflet community and related projects:
 we want to create a welcoming and friendly environment.
 Harassment of participants or other unethical and unprofessional behavior will not be tolerated in our spaces.
 The [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/)
 applies to all projects under the Leaflet organization.
 Report any issues to agafonkin@gmail.com.
 ## Thank You
-Not only does your contribution to Leaflet and its community earn our gratitude, but it also makes you AWESOME.
+Not only are we grateful for any contributions, &mdash; helping Leaflet and its community actually makes you AWESOME.
 Join [this approved list of awesome people](https://github.com/Leaflet/Leaflet/graphs/contributors)
 and help us push the limits of what's possible with online maps!
--- a/FAQ.md
+++ b/FAQ.md
@ -1,141 +0,0 @@
 # Leaflet FAQ
 This is a collection of answers to the most frequently asked questions about Leaflet.
 1. [Data Providers](#data-providers)
 2. [Commercial Use and Licensing](#commercial-use-and-licensing)
 3. [Features](#features)
 4. [Performance](#performance)
 5. [Misc](#misc)
 ## Data Providers
 #### The map is wrong in my neighborhood, could you fix it?
 Nope, but you can.
 The map you see on Leaflet examples is based on [OpenStreetMap](http://openstreetmap.org),
 a free editable map of the world.
 Signing up and editing the map there is easy,
 and the changes will be reflected on the map in a few minutes.
 #### What map tiles can I use with Leaflet? Is it limited to OpenStreetMap?
 Leaflet is provider-agnostic, meaning you can use any map provider as long as you conform to its terms of use.
 You can roll your own tiles as well.
 [OpenStreetMap](http://openstreetmap.org) is the most popular data source among different tile providers,
 but there are providers that use other sources.
 Check out [this example](http://leaflet-extras.github.io/leaflet-providers/preview/)
 with over seventy different layers to choose from.
 Popular commercial options, free up to a particular number of requests, include
 [MapBox](http://mapbox.com),
 [Bing Maps](http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx) (using a [plugin](https://github.com/shramov/leaflet-plugins)),
 [Esri ArcGIS](http://www.esri.com/software/arcgis/arcgisonline/maps/maps-and-map-layers) ([official plugin](https://github.com/Esri/esri-leaflet)),
 [MapQuest](https://developer.mapquest.com/products) ([official plugins](https://developer.mapquest.com/documentation/leaflet-plugins))
 and [Here Maps](https://developer.here.com/).
 Always be sure to **read the terms of use** of a chosen tile provider, **know its limitations**, and **attribute it properly** in your app.
 #### I'm looking for satellite imagery to use with my Leaflet map, any options?
 [MapBox](http://mapbox.com),
 [Bing Maps](http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx),
 [ArcGIS](http://www.esri.com/software/arcgis/arcgisonline/maps/maps-and-map-layers)
 and [MapQuest Open](http://developer.mapquest.com/web/products/open/map) provide satellite imagery among others.
 #### I want to use Google Maps API tiles with Leaflet, can I do that?
 The problem with Google is that its [Terms of Use](https://developers.google.com/maps/terms) forbid any means of tile access other than through the Google Maps API.
 You can add the Google Maps API as a Leaflet layer with the [GoogleMutant plugin](https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant). But note that the map experience will not be perfect, because Leaflet must wait for the Google Maps JS engine to load the map tiles, so you might experience glitches and lagging when using it.
 #### I want to roll my own OSM tile server for Leaflet, where do I start?
 Check out [this excellent guide](http://switch2osm.org/serving-tiles/).
 #### I want to create tiles from my own data for use with Leaflet, what are the options?
 There's a number of services that allow you to do this easily,
 notably [MapBox](https://www.mapbox.com/), [CartoDB](http://cartodb.com/) and [GIS Cloud](http://www.giscloud.com/).
 If you want to make tiles on your own, probably the easiest way is using [TileMill](https://www.mapbox.com/tilemill/).
 TileMill can export your map as a single [.mbtiles](https://www.mapbox.com/developers/mbtiles/) file, which can be copied to a webserver and accessed by Leaflet with [a small PHP script](https://github.com/infostreams/mbtiles-php).
 Alternatively, you can [extract](https://github.com/mapbox/mbutil) the tiled images from the .mbtiles database and place them directly on your webserver with absolutely no server-side dependencies.
 ## Commercial Use and Licensing
 #### I have an app that gets lots of hits a day, and I want to switch from Google/Bing/whatever to Leaflet. Is there a fee for using it?
 Leaflet, unlike Google Maps and other all-in-one solutions, is just a JavaScript library.
 It's free to use, but doesn't provide map imagery on its own &mdash;
 you have to choose a tile service to combine with it.
 There are [plenty of options](#what-map-tiles-can-i-use-with-leaflet-is-it-limited-to-openstreetmap) for a tile service,
 each with their own terms of use, prices (some of them free), features, limitations, etc.
 Choice is yours.
 #### I'm building a commercial app that I plan to sell. Can I use Leaflet in it?
 You're welcome, as the code is published under the very permissive [2-clause BSD License](https://github.com/Leaflet/Leaflet/blob/master/LICENSE).
 Just make sure to attribute the use of the library somewhere in the app UI or the distribution
 (e.g. keep the Leaflet link on the map, or mention the use on the About page or a Readme file, etc.) and you'll be fine.
 That only applies to the code though.
 Make sure you conform to the terms of use of the tile images provider(s) that you choose as well.
 ## Features
 #### What's the best way to put the data I have on a Leaflet map?
 Check out [this awesome cheatsheet](https://github.com/tmcw/mapmakers-cheatsheet).
 #### Why is there still no feature X in Leaflet?
 First of all, did you check out the [Leaflet plugins page](http://leafletjs.com/plugins.html)?
 It lists about a hundred plugins doing all kinds of crazy stuff,
 and there's a high possibility that it has what you're looking for.
 Generally, we do our best to keep the Leaflet core small, lightweight and simple,
 focusing on _quality_ instead of _quantity_, and leaving all the rest to plugin authors.
 Check out [this video](http://www.youtube.com/watch?v=_P2SaCPbJ4w) of a talk by the Leaflet creator for more background on the story and philosophy behind Leaflet.
 Another essential read is [Advocating Simplicity in Open Source](http://blog.universalmind.com/advocating-simplicity-in-open-source/) by the same guy.
 ## Performance
 #### I have thousands of markers on my map. How do I make it faster and more usable?
 Check out the [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) plugin. It's amazing.
 #### I have vector data with many thousands of points on my map. Any performance tips?
 Leaflet generally does a pretty good job of handling heavy vector data
 with its real-time clipping and simplification algorithms,
 but browser technology still has its limits.
 Try [switching from SVG to Canvas as the default rendering back-end](http://leafletjs.com/reference.html#global),
 it may help considerably (depends on the app and the data).
 If you still have too much data to render, you'll have to use some help of a server-side service
 like [MapBox](https://www.mapbox.com/),
 [CartoDB](http://cartodb.com/)
 and [GIS Cloud](http://www.giscloud.com/)
 (they all work great with Leaflet).
 What they do under the hood is serving rendered data as image tiles,
 along with additional data to enable interactivity like hovering shapes
 (e.g. done using [UTFGrid](https://www.mapbox.com/developers/utfgrid/) &mdash;
 Leaflet [has a nice plugin](https://github.com/danzel/Leaflet.utfgrid) for it).
 ## Misc
 #### I downloaded the Leaflet source but didn't find `leaflet.js` there. Why is that?
 You can download the built versions using links from the [download page](http://leafletjs.com/download.html).
 It even includes the latest build of the development version (`master` branch),
 updated automatically on each commit to the repo.
 We removed the built versions from the repository because it's a chore to build and commit them manually on each change,
 and it often complicates merging branches and managing contributions.
 There's a common complaint that Leaflet can't be used with [Bower](http://bower.io/) because of that, but we'll resolve the issue soon.
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@ -1,25 +0,0 @@
 <!--
 Thanks for taking the time to open an issue! Help us have good bug requests:
 - [ ] I'm reporting a bug, not asking for help; support questions like "How can I do X with Leaflet?" will be closed (use [Stack Overflow](http://stackoverflow.com/) or [gis.stackexchange.com](http://gis.stackexchange.com/) for questions)
 - [ ] I've looked at the [documentation](http://leafletjs.com/reference.html) to make sure the behaviour is documented and expected
 - [ ] I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
 - [ ] I've searched through the issues to make sure it's not yet reported
 -->
 ## How to reproduce
 - Leaflet version I'm using:
 - Browser (with version) I'm using:
 - OS/Platform (with version) I'm using:
 - step 1
 - step 2
 ## What behaviour I'm expecting and which behaviour I'm seeing
 ## Minimal example reproducing the issue
 - [ ] this example is as simple as possible
 - [ ] this example does not rely on any third party code
 Using http://leafletjs.com/edit.html or any other jsfiddle-like site.
--- a/Jakefile.js
+++ b/Jakefile.js
@ -1,107 +1,23 @@
 /*
-Leaflet building, testing and linting scripts.
+Leaflet building and linting scripts.
 To use, install Node, then run the following commands in the project root:
    npm install -g jake
-    npm install
+    npm install uglify-js
    npm install jshint
-To check the code for errors and build Leaflet from source, run "jake".
+To check the code and build Leaflet from source, run "jake"
 To run the tests, run "jake test". To build the documentation, run "jake docs".
 For a custom build, open build/build.html in the browser and follow the instructions.
 */
-var buildDocs = require('./build/docs'),
+var build = require('./build/build.js');
    git = require('git-rev-sync'),
    path = require('path');
-function hint(msg, args) {
+desc('Check Leaflet source for errors with JSHint');
-	return function () {
+task('lint', build.lint);
 		console.log(msg);
 		jake.exec('node node_modules/eslint/bin/eslint.js ' + args,
 				{printStdout: true}, function () {
 			console.log('\tCheck passed.\n');
 			complete();
 		});
 	};
 }
-// Returns the version string in package.json, plus a semver build metadata if
+desc('Combine and compress Leaflet source files');
-// this is not an official release
+task('build', ['lint'], build.build);
 function calculateVersion(officialRelease) {
-	var version = require('./package.json').version;
+task('default', ['build']);
 	if (officialRelease) {
 		return version;
 	} else {
 		return version + '+' + git.short();
 	}
 }
 desc('Check Leaflet source for errors with ESLint');
 task('lint', {async: true}, hint('Checking for JS errors...', 'src'));
 desc('Check Leaflet specs source for errors with ESLint');
 task('lintspec', {async: true}, hint('Checking for specs JS errors...', 'spec/suites'));
 desc('Run PhantomJS tests');
 task('test', ['lint', 'lintspec'], {async: true}, function () {
 	var karma = require('karma'),
 	 testConfig = {configFile : path.join(__dirname, './spec/karma.conf.js')};
 	 testConfig.browsers = ['PhantomJSCustom'];
 	 function isArgv(optName) {
 		 return process.argv.indexOf(optName) !== -1;
 	 }
 	 if (isArgv('--chrome')) {
 		 testConfig.browsers.push('Chrome');
 	 }
 	 if (isArgv('--safari')) {
 		 testConfig.browsers.push('Safari');
 	 }
 	 if (isArgv('--ff')) {
 		 testConfig.browsers.push('Firefox');
 	 }
 	 if (isArgv('--ie')) {
 		 testConfig.browsers.push('IE');
 	 }
 	 if (isArgv('--cov')) {
 		 testConfig.preprocessors = {
 			 'src/**/*.js': 'coverage'
 		 };
 		 testConfig.coverageReporter = {
 			 type : 'html',
 	 dir : 'coverage/'
 		 };
 		 testConfig.reporters = ['coverage'];
 	 }
 	 console.log('Running tests...');
 	 var server = new karma.Server(testConfig, function(exitCode) {
 		 if (!exitCode) {
 			 console.log('\tTests ran successfully.\n');
 			 complete();
 		 } else {
 			 process.exit(exitCode);
 		 }
 	 });
 	 server.start();
 });
 desc('Build documentation');
 task('docs', {}, function() {
 	buildDocs();
 });
 task('default', ['test', 'build']);
 jake.addListener('complete', function () {
  process.exit();
 });
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (c) 2010-2017, Vladimir Agafonkin
+Copyright (c) 2010-2013, Vladimir Agafonkin
 Copyright (c) 2010-2011, CloudMade
 All rights reserved.
--- a/PLUGIN-GUIDE.md
+++ b/PLUGIN-GUIDE.md
@ -1,221 +0,0 @@
 # Leaflet Plugin Authoring Guide
 One of the greatest things about Leaflet is its powerful plugin ecosystem.
 The [Leaflet plugins page](http://leafletjs.com/plugins.html) lists dozens of awesome plugins, and more are being added every week.
 This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself.
 1. [Presentation](#presentation)
 	- [Repository](#repository)
 	- [Name](#name)
 	- [Demo](#demo)
 	- [Readme](#readme)
 	- [License](#license)
 2. [Code](#code)
 	- [File Structure](#file-structure)
 	- [Code Conventions](#code-conventions)
 	- [Plugin API](#plugin-api)
 3. [Publishing on NPM](#publishing-on-npm)
 4. [Module Loaders](#module-loaders)
 5. [Adding to the plugins list](#adding-to-the-plugins-list)
 ## Presentation
 ### Repository
 The best place to put your Leaflet plugin is a separate [GitHub](http://github.com) repository.
 If you create a collection of plugins for different uses,
 don't put them in one repo &mdash;
 it's usually easier to work with small, self-contained plugins in individual repositories.
 ### Name
 Most existing plugins follow the convention of naming plugins (and repos) like this: `Leaflet.MyPluginName`.
 You can use other forms (e.g. "leaflet-my-plugin-name"),
 just make sure to include the word "Leaflet" in the name so that it's obvious that it's a Leaflet plugin.
 ### Demo
 The most essential thing to do when publishing a plugin is to include a demo that showcases what the plugin does &mdash;
 it's usually the first thing people will look for.
 The easiest way to put up a demo is using [GitHub Pages](http://pages.github.com/).
 A good [starting point](https://help.github.com/articles/creating-project-pages-manually) is creating a `gh-pages` branch in your repo and adding an `index.html` page to it  &mdash;
 after pushing, it'll be published as `http://<user>.github.io/<repo>`.
 ### Readme
 The next thing you need to have is a [good `README.md`](https://github.com/noffle/art-of-readme) in the root of the repo (or a link to a website with a similar content).
 At a minimum it should contain the following items:
 - name of the plugin
 - a simple, concise description of what it does
 - requirements
 	- Leaflet version
 	- other external dependencies (if any)
 	- browser / device compatibility
 - links to demos
 - instructions for including the plugin
 - simple usage code example
 - API reference (methods, options, events)
 ### License
 Every open source repository should include a license.
 If you don't know what open source license to choose for your code,
 [MIT License](http://opensource.org/licenses/MIT) and [BSD 2-Clause License](http://opensource.org/licenses/BSD-2-Clause) are both good choices.
 You can either put it in the repo as a `LICENSE` file or just link to the license from the Readme.
 ## Code
 ### File Structure
 Keep the file structure clean and simple,
 don't pile up lots of files in one place  &mdash;
 make it easy for a new person to find their way in your repo.
 A barebones repo for a simple plugin would look like this:
 ```
 my-plugin.js
 README.md
 ```
 An example of a more sophisticated plugin file structure:
 ```
 /src        - JS source files
 /dist       - minified plugin JS, CSS, images
 /spec       - test files
 /lib        - any external libraries/plugins if necessary
 /examples   - HTML examples of plugin usage
 README.md
 LICENSE
 package.json
 ```
 ### Code Conventions
 Everyone's tastes are different, but it's important to be consistent with whatever conventions you choose for your plugin.
 For a good starting point, check out [Airbnb JavaScript Guide](https://github.com/airbnb/javascript).
 Leaflet follows pretty much the same conventions
 except for using smart tabs (hard tabs for indentation, spaces for alignment)
 and putting a space after the `function` keyword.
 ### Plugin API
 Never expose global variables in your plugin.<br>
 If you have a new class, put it directly in the `L` namespace (`L.MyPlugin`).<br>
 If you inherit one of the existing classes, make it a sub-property (`L.TileLayer.Banana`).<br>
 Every class should have a factory function in camelCase, e.g. (`L.tileLayer.banana`).<br>
 If you want to add new methods to existing Leaflet classes, you can do it like this: `L.Marker.include({myPlugin: …})`.
 Function, method, property and factory names should be in `camelCase`.<br>
 Class names should be in `CapitalizedCamelCase`.
 If you have a lot of arguments in your function, consider accepting an options object instead
 (putting default values where possible so that users don't need to specify all of them):
 ```js
 // bad
 marker.myPlugin('bla', 'foo', null, {}, 5, 0);
 // good
 marker.myPlugin('bla', {
 	optionOne: 'foo',
 	optionThree: 5
 });
 ```
 And most importantly, keep it simple. Leaflet is all about *simplicity*.
 ## Publishing on NPM
 NPM (Node Packaged Modules) is a package manager and code repository for JavaScript. Publishing your module on NPM allows other developers to quickly find and install your plugin as well as any other plugins it depends on.
 NPM has an excellent [developers guide](https://www.npmjs.org/doc/misc/npm-developers.html) to help you through the process.
 When you publish your plugin you should add a dependency on `leaflet` to your `package.json` file. This will automatically install Leaflet when your package is installed.
 Here is an example of a `package.json` file for a Leaflet plugin.
 ```json
 {
  "name": "my-leaflet-plugin",
  "version": "1.0.0",
  "description": "A simple leaflet plugin.",
  "main": "my-plugin.js",
  "author": "You",
  "license": "IST",
  "peerDependencies": {
    "leaflet": "^1.0.0"
  }
 }
 ```
 If possible, do not commit your minified files (e.g. `dist`) to a repo; this can
 lead to confussion when trying to debug the wrong file. Instead, use `npm` to
 trigger a build/minification just before publishing your package with a
 [`prepublish` script](https://docs.npmjs.com/misc/scripts#common-uses), for example:
 ```json
 {
  "name": "my-leaflet-plugin",
  ...
  "scripts": {
    "prepublish": "grunt build"
  }
 }
 ```
 You can then use the [`.gitignore`](https://help.github.com/articles/ignoring-files/)
 file to make sure the minified files are not versioned, and an
 [empty `.npmignore`](https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package)
 to ensure that they are published to NPM.
 ## Module Loaders
 Module loaders such as [RequireJS](http://requirejs.org/) and [Browserify](http://browserify.org/) implement module systems like AMD (Asynchronous Module Definition) and CommonJS to allow developers to modularize and load their code.
 You can add support for AMD/CommonJS loaders to your Leaflet plugin by following this pattern based on the [Universal Module  Definition](https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js)
 ```js
 (function (factory, window) {
    // define an AMD module that relies on 'leaflet'
    if (typeof define === 'function' && define.amd) {
        define(['leaflet'], factory);
    // define a Common JS module that relies on 'leaflet'
    } else if (typeof exports === 'object') {
        module.exports = factory(require('leaflet'));
    }
    // attach your plugin to the global 'L' variable
    if (typeof window !== 'undefined' && window.L) {
        window.L.YourPlugin = factory(L);
    }
 }(function (L) {
    var MyLeafletPlugin = {};
    // implement your plugin
    // return your plugin when you are done
    return MyLeafletPlugin;
 }, window));
 ```
 Now your plugin is available as an AMD and CommonJS module and can be used in module loaders like Browserify and RequireJS.
 ## Adding to the plugins list
 Once your plugin is published, it is a good idea to add it to the [Leaflet plugins list](http://leafletjs.com/plugins.html). To do so:
 * [Fork](https://help.github.com/articles/fork-a-repo/) the Leaflet repo.
 * In the `docs/plugins.md` file, find the section your plugin should go in, and add a table row with information and links about your plugin.
 * Commit the code to your fork.
 * [Open a pull request](https://help.github.com/articles/creating-a-pull-request/) from your fork to Leaflet's original repo.
 Once the pull request is done, a Leaflet maintainer will have a quick look at your
 plugin and, if everything looks right, your plugin will appear in the list shortly thereafter.
--- a/README.md
+++ b/README.md
@ -1,32 +1,28 @@
-<img width="600" src="https://rawgit.com/Leaflet/Leaflet/master/src/images/logo.svg" alt="Leaflet" />
+<img src="http://leafletjs.com/docs/images/logo.png" alt="Leaflet" />
-Leaflet is the leading open-source JavaScript library for **mobile-friendly interactive maps**.
+Leaflet is a modern open-source JavaScript library for **mobile-friendly interactive maps**.
-Weighing just about 37 KB of gzipped JS code, it has all the mapping [features][] most developers ever need.
+It is developed by [Vladimir Agafonkin][] with a team of dedicated [contributors][].
 Weighing just about 27 KB of gzipped JS code, it has all the [features][] most developers ever need for online maps.
 Leaflet is designed with *simplicity*, *performance* and *usability* in mind.
 It works efficiently across all major desktop and mobile platforms out of the box,
 taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too.
-It can be extended with a huge amount of [plugins][],
+It can also be extended with many [plugins][],
 has a beautiful, easy to use and [well-documented][] API
 and a simple, readable [source code][] that is a joy to [contribute][] to.
-For more info, docs and tutorials, check out the [official website][].<br>
+For more information, check out the [official website][].
 For **Leaflet downloads** (including the built master version), check out the [download page][].
 We're happy to meet new contributors.
 If you want to **get involved** with Leaflet development, check out the [contribution guide][contribute].
-Let's make the best mapping library that will ever exist,
+Let's make the best open-source library for maps that can possibly exist!
 and push the limits of what's possible with online maps!
 [![Build Status](https://travis-ci.org/Leaflet/Leaflet.svg?branch=master)](https://travis-ci.org/Leaflet/Leaflet)
 [Vladimir Agafonkin]: http://agafonkin.com/en
 [contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
- [features]: http://leafletjs.com/#features
+ [features]: http://leafletjs.com/features.html
 [plugins]: http://leafletjs.com/plugins.html
 [well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
 [source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
 [hosted on GitHub]: http://github.com/Leaflet/Leaflet
 [contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
 [official website]: http://leafletjs.com
 [download page]: http://leafletjs.com/download.html
--- a/RELEASE.md
+++ b/RELEASE.md
@ -1,29 +0,0 @@
 Documentation for the release process of Leaflet.
 **Please note that you will need to have a git remote called `origin` that points to Leaflet's GitHub repo, since the publish script assumes it**
 1. Make a new release branch (for example named `prepare-X.Y.Z`)
 2. Make sure you do not have any `package.lock.json` or `yarn.lock` locally, since they can potentially make you build with the wrong package versions
 3. Update [the changelog](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md) since last release and commit to the release branch
 4. Write a blog post about the new release and put in `/docs/_posts` and commit to the release branch
 5. Bump version number in `package.json` and commit to `master`
 6. Run `npm run release`
 7. Verify that the release was correctly published to NPM by checking:
    * [Leaflet NPM package page](https://www.npmjs.com/package/leaflet)
    * files on [Leaflet unpkg page](https://unpkg.com/leaflet@latest/)
 8. Update API docs:
    * run `npm run docs`
    * Copy the built docs from `dist/reference-X.Y.Z.html` to `docs/reference-X.Y.Z.html`
    * Update the built docs header to use Jekyll style; see commit [11d716f0964d8bc0d058ca09e9ba8003451b4b8d](https://github.com/Leaflet/Leaflet/commit/11d716f0964d8bc0d058ca09e9ba8003451b4b8d) as reference for the needed changes
    * Commit the new docs to the release branch
 9. Update `docs/reference.html` to redirect to the new version and commit the change to the release branch
 10. Update integrity hashes:
    * Checkout the release tag (`git checkout vX.Y.Z`)
    * Run `npm run integrity` or simply `node ./build/integrity.js` if you're not on Debian
    * Copy the hashes and update `integrity_hash_css`, `integrity_hash_source` and `integrity_hash_uglified` in `docs/_config.yml`; commit changes to the release branch
 11. Update link to latest release in `docs/download.html`, and commit to the release branch
 12. Add link to new version reference in `docs/reference-versions.html`, and commit to the release branch
 13. Update `latest_leaflet_version` in `docs/_config.yml` and commit to the release branch
 14. Update the announcement section in `docs/index.html` and commit to the release branch
 15. If it looks like everything is good at this point, merge the release branch into `master`
 16. Make a new release on [Leaflet's GitHub release page](https://github.com/Leaflet/Leaflet/releases/) with the most important parts of the changelog
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,6 @@
 exclude: build, debug, node_modules, spec, src, CNAME, Jakefile.js, reference-tpl.html, CHANGELOG.md, README.md, LICENSE, DOCS-TODO.md
 markdown: kramdown
 kramdown:
  entity_output: as_input
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -0,0 +1,199 @@
 <!DOCTYPE html>
 <html>
 <head>
 	{% capture title %}{% if page.title %}{{ page.title }} - {% elsif post.title %}{{ post.title }} - {% endif %}{% endcapture %}
 	<title>{{ title }}Leaflet - a JavaScript library for mobile-friendly maps</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 mobile-friendly interactive maps." />
 	<meta property="og:image" content="http://leafletjs.com/docs/images/logo.png" />
 	<meta itemprop="name" content="Leaflet">
 	<meta itemprop="description" content="Leaflet — a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.">
 	<meta itemprop="image" content="http://leafletjs.com/docs/images/logo.png">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{% endcapture %}
 	<link rel="icon" type="image/png" href="{{ root }}docs/images/favicon.png" />
 	<link href="http://leafletjs.com/atom.xml" type="application/atom+xml" rel="alternate" title="Leaflet Dev Blog Atom Feed" />
 	<!-- Blueprint -->
 	<link rel="stylesheet" href="{{ root }}docs/css/blueprint/screen.css" media="screen, projection">
 	<link rel="stylesheet" href="{{ root }}docs/css/blueprint/print.css" media="print">
 	<!--[if lt IE 8]><link rel="stylesheet" href="{{ root }}docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
 	<link rel="stylesheet" href="{{ root }}docs/css/screen.css" media="screen, projection" />
 	<script src="{{ root }}docs/highlight/highlight.pack.js"></script>
 	<link rel="stylesheet" href="{{ root }}docs/highlight/styles/github.css" />
 	<!-- Leaflet -->
 	<link rel="stylesheet" href="{{ root }}dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="{{ root }}dist/leaflet.ie.css" /><![endif]-->
 	<script src="{{ root }}dist/leaflet.js"></script>
 	{% if page.css %}<style>{{ page.css }}</style>{% endif %}
 	<script>
 		CM_ATTR = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
 				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
 				'Imagery © <a href="http://cloudmade.com">CloudMade</a>';
 		CM_URL = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
 		OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 		OSM_ATTRIB = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 	</script>
 </head>
 <body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
 	<div class="container">
 		<h1><a href="http://leafletjs.com">Leaflet</a></h1>
 		<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps<!-- by <a href="http://cloudmade.com">CloudMade</a>--></h3>
 		<div class="social-buttons">
 			<iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
 			<!--<iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>-->
 			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leafletjs.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps" data-via="LeafletJS" data-related="CloudMade" data-count="none">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%2Fleafletjs.com&amp;layout=button_count&amp;show_faces=false&amp;width=83&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:83px; height:20px;" allowTransparency="true"></iframe>
 			<!--<div class="g-plusone" data-size="medium" data-href="http://leafletjs.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>
 		<ul class="nav clearfix">
 			<!-- <li><a class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
 			<li>
 				{% if page.title == nil %}
 					<span>Overview</span>
 				{% else %}
 					<a href="{{ root }}index.html">Overview</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Features' %}
 					<span>Features</span>
 				{% else %}
 					<a href="{{ root }}features.html">Features</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Tutorials' %}
 					<span>Tutorials</span>
 				{% else %}
 					<a href="{{ root }}examples.html"{% if page.tutorial == true %} class="active"{% endif %}>Tutorials</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Documentation' %}
 					<span>API</span>
 				{% else %}
 					<a href="{{ root }}reference.html">API</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Download' %}
 					<span>Download</span>
 				{% else %}
 					<a href="{{ root }}download.html">Download</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Plugins' %}
 					<span>Plugins</span>
 				{% else %}
 					<a href="{{ root }}plugins.html">Plugins</a>
 				{% endif %}
 			</li>
 			<li>
 				{% if page.title == 'Blog' %}
 					<span>Blog</span>
 				{% else %}
 					<a href="{{ root }}blog.html"{% if page.post == true %} class="active"{% endif %}>Blog</a>
 				{% endif %}
 			</li>
 			<li><a class="forum-link" href="https://groups.google.com/forum/#!forum/leaflet-js">Forum</a></li>
 			<li><a class="twitter-link" href="http://twitter.com/LeafletJS">Twitter</a></li>
 			<li><a class="github-link" href="http://github.com/Leaflet/Leaflet">GitHub</a></li>
 		</ul>
 		{{ content }}
 		<div class="footer">
 			<hr />
 			<p class="quiet">&copy; 2010&ndash;2013 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, 2010&ndash;2011 <a href="http://cloudmade.com">CloudMade</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
 		</div>
 	</div>
 	<a href="http://github.com/Leaflet/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 = '    ';
 		(function () {
 			var codes = document.getElementsByTagName('code'),
 				parentClass;
 			for (var i = 0, len = codes.length; i < len; i++) {
 				if (!codes[i].className) {
 					parentClass = codes[i].parentNode.className;
 					if (parentClass) {
 						codes[i].className = parentClass;
 					} else if (codes[i].innerHTML.match(/^\s*&lt;/)) {
 						codes[i].className = 'xml';
 					} else {
 						codes[i].className = 'javascript';
 					}
 				}
 			}
 		})();
 		hljs.initHighlighting();
 	</script>
 	<script>
 		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>
 		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>
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@ -1,8 +1,7 @@
 ---
-root: "../../../"
+layout: default
-layout: v2
+root: ../../../
 post: true
 bodyclass: post-page
 ---
 <p><a href="../../../blog.html">&larr; Back to the list of blog posts</a></p>
--- a/_layouts/tutorial.html
+++ b/_layouts/tutorial.html
@ -0,0 +1,9 @@
 ---
 layout: default
 root: ../
 tutorial: true
 ---
 <p><a href="../examples.html">&larr; Back to the list of tutorials</a></p>
 {{ content }}
--- a/docs/_posts/2012-07-30-leaflet-0-4-released.md
+++ b/docs/_posts/2012-07-30-leaflet-0-4-released.md
@ -215,7 +215,7 @@ Vladimir Agafonkin, Leaflet maintainer.
 <script>
 	var map = L.map('map').setView([51.503, -0.09], 13);
-	L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'examples.map-i875mjb7'}).addTo(map);
+	L.tileLayer(CM_URL, {attribution: CM_ATTR, styleId: 997}).addTo(map);
 	var polygon = L.polygon([
 		[51.509, -0.08],
--- a/docs/_posts/2012-08-07-leaflet-0-4-3-and-a-new-tutorial.md
+++ b/docs/_posts/2012-08-07-leaflet-0-4-3-and-a-new-tutorial.md
--- a/docs/_posts/2012-08-20-guest-post-markerclusterer-0-1-released.md
+++ b/docs/_posts/2012-08-20-guest-post-markerclusterer-0-1-released.md
@ -10,7 +10,7 @@ _This is a guest post from Dave Leaver, an active Leaflet contributor (particula
 Almost anyone who has a map with markers on it will eventually end up having those markers overlap. At my day job at <a href="http://www.smartrak.co.nz/" title="Smartrak GPS Fleet Tracking">Smartrak</a> we regularly have customers with thousands of points on the map. When you zoom it out, these markers all overlap and make the map look messy and crowded. There are also cases where the markers overlap even on the maximum zoom level, which makes interacting with them impossible. Also, having a large amount of markers on the map usually ends up lowering performance to an unacceptable level.
-To improve this, many sites use marker clustering, a technique of grouping markers that are close to each other together on each zom level. One good example of this is <a href="http://www.redfin.com/homes-for-sale">Redfin</a>. We needed something like this, but in Leaflet. In the spirit of open source we developed and released our solution so that everyone can take advantage of it. So we proudly present <a href="https://github.com/leaflet/Leaflet.markercluster">Leaflet.MarkerCluster</a>.
+To improve this, many sites use marker clustering, a technique of grouping markers that are close to each other together on each zom level. One good example of this is <a href="http://www.redfin.com/homes-for-sale">Redfin</a>. We needed something like this, but in Leaflet. In the spirit of open source we developed and released our solution so that everyone can take advantage of it. So we proudly present <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.MarkerCluster</a>.
 <div id="map" class="map" style="height: 320px"></div>
@ -20,7 +20,7 @@ To improve this, many sites use marker clustering, a technique of grouping marke
 The clusterer has all sorts of great built in behaviour:
 * Everything is brilliantly animated. As you zoom in and out you can logically see which clusters have become which markers.
- * It is very fast, so for example [clustering 50,000 points](https://leaflet.github.com/Leaflet.markercluster/example/marker-clustering-realworld.50000.html) isn't a problem. Also, all the heavy calculation happens on initial page load, and after this the map works smoothly.
+ * It is very fast, so for example [clustering 50,000 points](http://danzel.github.com/Leaflet.markercluster/example/marker-clustering-realworld.50000.html) isn't a problem. Also, all the heavy calculation happens on initial page load, and after this the map works smoothly.
 * Markers that don't need clustering aren't and will be visible at the relevant zoom levels.
 * When you mouse over a cluster the bounds of the marker within that cluster are shown.
 * Clicking a cluster will zoom you in to the bounds of its children.
@ -54,7 +54,7 @@ You can also use all of the [FeatureGroup events](../../../reference.html#featur
 ### Get It
-You can download the latest release on the <a href="https://github.com/leaflet/Leaflet.markercluster/downloads">github download page</a>.
+You can download the latest release on the <a href="https://github.com/danzel/Leaflet.markercluster/downloads">github download page</a>.
 ### The Technical Bits
@ -73,28 +73,28 @@ These clusters are stored in a tree (A cluster contains its child clusters) with
 `L.DistanceGrid` provides some nice optimization when clustering (contributed by [Vladimir](http://agafonkin.com/en/), Leaflet maintainer).
 To cluster the markers, we need to compare every marker with every other marker to try form a cluster.
-To make this quicker, we need reduce the set of markers we need to compare with. `DistanceGrid` does this by putting all markers on a grid sized the same as the distance we need to search. Then, when looking for a marker to cluster with, we only need to look at markers in the grid square we are in and its immediate neighbours. This can be quite a big performance win as we only look at markers that we are likely to form a cluster with. (<a href="https://github.com/leaflet/Leaflet.markercluster/pull/29">check out the initial PR for numbers</a>)
+To make this quicker, we need reduce the set of markers we need to compare with. `DistanceGrid` does this by putting all markers on a grid sized the same as the distance we need to search. Then, when looking for a marker to cluster with, we only need to look at markers in the grid square we are in and its immediate neighbours. This can be quite a big performance win as we only look at markers that we are likely to form a cluster with. (<a href="https://github.com/danzel/Leaflet.markercluster/pull/29">check out the initial PR for numbers</a>)
 ### Closing Words
 I hope you enjoy using the clusterer and get everything you want out of it. If you do use it in a public site please <a href="mailto:danzel@localhost.geek.nz">throw me an email</a> so I can check it out and potentially link it on the github site.
-If you have any issues also please log a bug on <a href="https://github.com/leaflet/Leaflet.markercluster">the github page</a>.
+If you have any issues also please log a bug on <a href="https://github.com/danzel/Leaflet.markercluster">the github page</a>.
 Enjoy!<br />
 Dave Leaver.
-<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
+<link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.css" />
-<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
+<link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
-<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.ie.css" /><![endif]-->
+<!--[if lte IE 8]><link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.Default.ie.css" /><![endif]-->
-<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
+<script src="http://danzel.github.com/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
-<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
+<script src="http://danzel.github.com/Leaflet.markercluster/example/realworld.388.js"></script>
 <script>
-	var mapbox = new L.TileLayer(MB_URL, {maxZoom: 18, attribution: MB_ATTR, id: 'examples.map-i875mjb7'}),
+	var cloudmade = new L.TileLayer(CM_URL, {maxZoom: 18, attribution: CM_ATTR, styleId: 997}),
 		latlng = new L.LatLng(-37.820, 175.217);
-	var map = new L.Map('map', {center: latlng, zoom: 15, layers: [mapbox]});
+	var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
 	map.attributionControl.addAttribution("Points &copy 2012 LINZ");
--- a/docs/_posts/2012-10-25-leaflet-0-4-5-bugfix-release-and-plans-for-0.5.md
+++ b/docs/_posts/2012-10-25-leaflet-0-4-5-bugfix-release-and-plans-for-0.5.md
@ -1,6 +1,6 @@
 ---
 layout: post
-title: Leaflet 0.4.5 Bugfix Release and Plans for 0.5
+title: Leaflet 0.4.5 bugfix release and plans for 0.5
 description: Leaflet 0.4.5 released, containing a small but important zoom animation bugfix for upcoming Chrome 23+ (currently beta) and IE10. Work on future 0.5 release goes on!
 author: Vladimir Agafonkin
 authorsite: http://agafonkin.com/en
--- a/docs/atom.xml
+++ b/docs/atom.xml
@ -1,4 +1,5 @@
 ---
 layout: nil
 title: Leaflet Developer Blog Atom Feed
 ---
 <?xml version="1.0" encoding="utf-8"?>
@ -10,7 +11,7 @@ title: Leaflet Developer Blog Atom Feed
 	<link href="http://leafletjs.com"/>
 	<updated>{{ site.time | date_to_xmlschema }}</updated>
-	<id>http://leafletjs.com/</id>
+	<id>http://leaflet.cloudmade.com/</id>
 	<author>
 		<name>Vladimir Agafonkin</name>
@ -21,7 +22,7 @@ title: Leaflet Developer Blog Atom Feed
 		<title>{{ post.title }}</title>
 		<link href="http://leafletjs.com{{ post.url }}"/>
 		<updated>{{ post.date | date_to_xmlschema }}</updated>
-		<id>http://leafletjs.com{{ post.id }}</id>
+		<id>http://leaflet.cloudmade.com{{ post.id }}</id>
 		<content type="html">{{ post.content | xml_escape }}</content>
 	</entry>
 	{% endfor %}
--- a/docs/blog.md
+++ b/docs/blog.md
@ -1,7 +1,6 @@
 ---
-layout: v2
+layout: default
 title: Blog
 bodyclass: blog-page
 ---
 ## Leaflet Developer Blog
@ -12,10 +11,10 @@ The main place for all important Leaflet-related news, tutorials, tips and devel
 {% for post in site.posts %}
 <div class="clearfix">
-	<div class="post-date">
+	<div class="span-3 post-date">
 		{{ post.date | date_to_string }}
 	</div>
-	<div class="post-info">
+	<div class="span-17 last">
 		<h3 class="post-title"><a href="{{ post.url | replace_first: '/', '' }}">{{ post.title }}</a></h3>
 		<p>{{ post.description }} <span class="quiet">&hellip;</span></p>
 	</div>
--- a/bower.json
+++ b/bower.json
@ -1,18 +0,0 @@
 {
  "name": "leaflet",
  "description": "JavaScript library for mobile-friendly interactive maps",
  "license": "BSD-2-Clause",
  "main": [
    "dist/leaflet.css",
    "dist/leaflet-src.js"
  ],
  "ignore": [
    ".*",
    "CHANGELOG.json",
    "FAQ.md",
    "debug",
    "spec",
    "src",
    "build"
  ]
 }
--- a/build/build.html
+++ b/build/build.html
@ -0,0 +1,243 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet Build Helper</title>
 	<script type="text/javascript" src="deps.js"></script>
 	<style type="text/css">
 		body {
 			font: 12px/1.4 Verdana, sans-serif;
 			text-align: center;
 			padding: 2em 0;
 		}
 		#container {
 			text-align: left;
 			margin: 0 auto;
 			width: 780px;
 		}
 		#deplist {
 			list-style: none;
 			padding: 0;
 		}
 		#deplist li {
 			padding-top: 7px;
 			padding-bottom: 7px;
 			border-bottom: 1px solid #ddd;
 		}
 		#deplist li.heading {
 			border: none;
 			background: #ddd;
 			padding: 5px 10px;
 			margin-top: 25px;
 			border-radius: 5px;
 		}
 		#deplist input {
 			float: left;
 			margin-right: 5px;
 			display: inline;
 		}
 		#deplist label {
 			float: left;
 			width: 160px;
 			font-weight: bold;
 		}
 		#deplist div {
 			display: table-cell;
 			height: 1%;
 		}
 		#deplist .desc {
 		}
 		#deplist .deps {
 			color: #777;
 		}
 		#command {
 			width: 100%;
 		}
 		#command2 {
 			width: 200px;
 		}
 		#toolbar {
 			padding-bottom: 10px;
 			border-bottom: 1px solid #ddd;
 		}
 		h2 {
 			margin-top: 2em;
 		}
 	</style>
 </head>
 <body>
 	<div id="container">
 		<h1>Leaflet Build Helper</h1>
 		<p id="toolbar">
 			<a id="select-all" href="#all">Select All</a> |
 			<a id="deselect-all" href="#none">Deselect All</a>
 		</p>
 		<ul id="deplist"></ul>
 		<h2>Building using Node and UglifyJS</h2>
 		<ol>
 			<li><a href="http://nodejs.org/#download">Download and install Node</a></li>
 			<li>Run this in the command line:<br />
 			<pre><code>npm install -g jake
 npm install jshint
 npm install uglify-js</code></pre></li>
 			<li>Run this command inside the Leaflet directory: <br /><input type="text" id="command2" />
 		</ol>
 		<h2>Building using Closure Compiler</h2>
 		<ol>
 			<li><a href="http://closure-compiler.googlecode.com/files/compiler-latest.zip">Download Closure Compiler</a>, extract it into <code>closure-compiler</code> directory</li>
 			<li>Run this command in the root Leaflet directory: <br /><input type="text" id="command" /></li>
 		</ol>
 	</div>
 	<script type="text/javascript">
 		var deplist = document.getElementById('deplist'),
 			commandInput = document.getElementById('command'),
 			commandInput2 = document.getElementById('command2');
 		document.getElementById('select-all').onclick = function() {
 			var checks = deplist.getElementsByTagName('input');
 			for (var i = 0; i < checks.length; i++) {
 				checks[i].checked = true;
 			}
 			updateCommand();
 			return false;
 		};
 		document.getElementById('deselect-all').onclick = function() {
 			var checks = deplist.getElementsByTagName('input');
 			for (var i = 0; i < checks.length; i++) {
 				if (!checks[i].disabled) {
 					checks[i].checked = false;
 				}
 			}
 			updateCommand();
 			return false;
 		};
 		function updateCommand() {
 			var files = {};
 			var checks = deplist.getElementsByTagName('input');
 			var compsStr = '';
 			for (var i = 0, len = checks.length; i < len; i++) {
 				if (checks[i].checked) {
 					var srcs = deps[checks[i].id].src;
 					for (var j = 0, len2 = srcs.length; j < len2; j++) {
 						files[srcs[j]] = true;
 					}
 					compsStr = '1' + compsStr;
 				} else {
 					compsStr = '0' + compsStr;
 				}
 			}
 			var command = 'java -jar closure-compiler/compiler.jar ';
 			for (var src in files) {
 				command += '--js src/' + src + ' ';
 			}
 			command += '--js_output_file dist/leaflet-custom.js';
 			commandInput.value = command;
 			commandInput2.value = 'jake build[' + parseInt(compsStr, 2).toString(32) + ',custom]';
 		}
 		function inputSelect() {
 			this.focus();
 			this.select();
 		};
 		commandInput.onclick = inputSelect;
 		commandInput2.onclick = inputSelect;
 		function onCheckboxChange() {
 			if (this.checked) {
 				var depDeps = deps[this.id].deps;
 				if (depDeps) {
 					for (var i = 0; i < depDeps.length; i++) {
 						var check = document.getElementById(depDeps[i]);
 						if (!check.checked) {
 							check.checked = true;
 							check.onchange();
 						}
 					}
 				}
 			} else {
 				var checks = deplist.getElementsByTagName('input');
 				for (var i = 0; i < checks.length; i++) {
 					var dep = deps[checks[i].id];
 					if (!dep.deps) { continue; }
 					for (var j = 0; j < dep.deps.length; j++) {
 						if (dep.deps[j] === this.id) {
 							if (checks[i].checked) {
 								checks[i].checked = false;
 								checks[i].onchange();
 							}
 						}
 					}
 				}
 			}
 			updateCommand();
 		}
 		for (var name in deps) {
 			var li = document.createElement('li');
 			if (deps[name].heading) {
 				var heading = document.createElement('li');
 				heading.className = 'heading';
 				heading.appendChild(document.createTextNode(deps[name].heading));
 				deplist.appendChild(heading);
 			}
 			var div = document.createElement('div');
 			var label = document.createElement('label');
 			var check = document.createElement('input');
 			check.type = 'checkbox';
 			check.id = name;
 			label.appendChild(check);
 			check.onchange = onCheckboxChange;
 			if (name == 'Core') {
 				check.checked = true;
 				check.disabled = true;
 			}
 			label.appendChild(document.createTextNode(name));
 			label.htmlFor = name;
 			li.appendChild(label);
 			var desc = document.createElement('span');
 			desc.className = 'desc';
 			desc.appendChild(document.createTextNode(deps[name].desc));
 			var depText = deps[name].deps && deps[name].deps.join(', ');
 			if (depText) {
 				var depspan = document.createElement('span');
 				depspan.className = 'deps';
 				depspan.appendChild(document.createTextNode('Deps: ' + depText));
 			}
 			div.appendChild(desc);
 			div.appendChild(document.createElement('br'));
 			if (depText) { div.appendChild(depspan); }
 			li.appendChild(div);
 			deplist.appendChild(li);
 		}
 		updateCommand();
 	</script>
 </body>
 </html>
--- a/build/build.js
+++ b/build/build.js
@ -0,0 +1,155 @@
 var fs = require('fs'),
    jshint = require('jshint'),
    UglifyJS = require('uglify-js'),
    deps = require('./deps.js').deps,
    hintrc = require('./hintrc.js').config;
 function lintFiles(files) {
 	var errorsFound = 0,
 	    i, j, len, len2, src, errors, e;
 	for (i = 0, len = files.length; i < len; i++) {
 		jshint.JSHINT(fs.readFileSync(files[i], 'utf8'), hintrc);
 		errors = jshint.JSHINT.errors;
 		for (j = 0, len2 = errors.length; j < len2; j++) {
 			e = errors[j];
 			console.log(files[i] + '\tline ' + e.line + '\tcol ' + e.character + '\t ' + e.reason);
 		}
 		errorsFound += len2;
 	}
 	return errorsFound;
 }
 function getFiles(compsBase32) {
 	var memo = {},
 	    comps;
 	if (compsBase32) {
 		comps = parseInt(compsBase32, 32).toString(2).split('');
 		console.log('Managing dependencies...')
 	}
 	function addFiles(srcs) {
 		for (var j = 0, len = srcs.length; j < len; j++) {
 			memo[srcs[j]] = true;
 		}
 	}
 	for (var i in deps) {
 		if (comps) {
 			if (parseInt(comps.pop(), 2) === 1) {
 				console.log('\t* ' + i);
 				addFiles(deps[i].src);
 			} else {
 				console.log('\t  ' + i);
 			}
 		} else {
 			addFiles(deps[i].src);
 		}
 	}
 	var files = [];
 	for (var src in memo) {
 		files.push('src/' + src);
 	}
 	return files;
 }
 exports.lint = function () {
 	var files = getFiles();
 	console.log('Checking for JS errors...');
 	var errorsFound = lintFiles(files);
 	if (errorsFound > 0) {
 		console.log(errorsFound + ' error(s) found.\n');
 		fail();
 	} else {
 		console.log('\tCheck passed');
 	}
 };
 function getSizeDelta(newContent, oldContent) {
 	if (!oldContent) {
 		return 'new';
 	}
 	var newLen = newContent.replace(/\r\n?/g, '\n').length,
 		oldLen = oldContent.replace(/\r\n?/g, '\n').length,
 		delta = newLen - oldLen;
 	return (delta >= 0 ? '+' : '') + delta;
 }
 function loadSilently(path) {
 	try {
 		return fs.readFileSync(path, 'utf8');
 	} catch (e) {
 		return null;
 	}
 }
 function combineFiles(files) {
 	var content = '';
 	for (var i = 0, len = files.length; i < len; i++) {
 		content += fs.readFileSync(files[i], 'utf8') + '\n\n';
 	}
 	return content;
 }
 exports.build = function (compsBase32, buildName) {
 	var files = getFiles(compsBase32);
 	console.log('Concatenating ' + files.length + ' files...');
 	var copy = fs.readFileSync('src/copyright.js', 'utf8'),
 	    intro = '(function (window, document, undefined) {',
 	    outro = '}(this, document));',
 	    newSrc = copy + intro + combineFiles(files) + outro,
 	    pathPart = 'dist/leaflet' + (buildName ? '-' + buildName : ''),
 	    srcPath = pathPart + '-src.js',
 	    oldSrc = loadSilently(srcPath),
 	    srcDelta = getSizeDelta(newSrc, oldSrc);
 	console.log('\tUncompressed size: ' + newSrc.length + ' bytes (' + srcDelta + ')');
 	if (newSrc === oldSrc) {
 		console.log('\tNo changes');
 	} else {
 		fs.writeFileSync(srcPath, newSrc);
 		console.log('\tSaved to ' + srcPath);
 	}
 	console.log('Compressing...');
 	var path = pathPart + '.js',
 	    oldCompressed = loadSilently(path),
 	    newCompressed = copy + UglifyJS.minify(newSrc, {
 	        warnings: true,
 	        fromString: true
 	    }).code,
 	    delta = getSizeDelta(newCompressed, oldCompressed);
 	console.log('\tCompressed size: ' + newCompressed.length + ' bytes (' + delta + ')');
 	if (newCompressed === oldCompressed) {
 		console.log('\tNo changes');
 	} else {
 		fs.writeFileSync(path, newCompressed);
 		console.log('\tSaved to ' + path);
 	}
 };
--- a/build/deps.js
+++ b/build/deps.js
@ -0,0 +1,272 @@
 var deps = {
 	Core: {
 		src: ['Leaflet.js',
 		      'core/Util.js',
 		      'core/Class.js',
 		      'core/Events.js',
 		      'core/Browser.js',
 		      'geometry/Point.js',
 		      'geometry/Bounds.js',
 		      'geometry/Transformation.js',
 		      'dom/DomUtil.js',
 		      'geo/LatLng.js',
 		      'geo/LatLngBounds.js',
 		      'geo/projection/Projection.js',
 		      'geo/projection/Projection.SphericalMercator.js',
 		      'geo/projection/Projection.LonLat.js',
 		      'geo/crs/CRS.js',
 		      'geo/crs/CRS.Simple.js',
 		      'geo/crs/CRS.EPSG3857.js',
 		      'geo/crs/CRS.EPSG4326.js',
 		      'map/Map.js'],
 		desc: 'The core of the library, including OOP, events, DOM facilities, basic units, projections (EPSG:3857 and EPSG:4326) and the base Map class.'
 	},
 	EPSG3395: {
 		src: ['geo/projection/Projection.Mercator.js',
 		      'geo/crs/CRS.EPSG3395.js'],
 		desc: 'EPSG:3395 projection (used by some map providers).',
 		heading: 'Additional projections'
 	},
 	TileLayer: {
 		src: ['layer/tile/TileLayer.js'],
 		desc: 'The base class for displaying tile layers on the map.',
 		heading: 'Layers'
 	},
 	TileLayerWMS: {
 		src: ['layer/tile/TileLayer.WMS.js'],
 		desc: 'WMS tile layer.',
 		deps: ['TileLayer']
 	},
 	TileLayerCanvas: {
 		src: ['layer/tile/TileLayer.Canvas.js'],
 		desc: 'Tile layer made from canvases (for custom drawing purposes).',
 		deps: ['TileLayer']
 	},
 	ImageOverlay: {
 		src: ['layer/ImageOverlay.js'],
 		desc: 'Used to display an image over a particular rectangular area of the map.'
 	},
 	Marker: {
 		src: ['layer/marker/Icon.js',
 		      'layer/marker/Icon.Default.js',
 		      'layer/marker/Marker.js'],
 		desc: 'Markers to put on the map.'
 	},
 	DivIcon: {
 		src: ['layer/marker/DivIcon.js'],
 		deps: ['Marker'],
 		desc: 'Lightweight div-based icon for markers.'
 	},
 	Popup: {
 		src: ['layer/Popup.js',
 		      'layer/marker/Marker.Popup.js',
 		      'map/ext/Map.Popup.js'],
 		deps: ['Marker'],
 		desc: 'Used to display the map popup (used mostly for binding HTML data to markers and paths on click).'
 	},
 	LayerGroup: {
 		src: ['layer/LayerGroup.js'],
 		desc: 'Allows grouping several layers to handle them as one.'
 	},
 	FeatureGroup: {
 		src: ['layer/FeatureGroup.js'],
 		deps: ['LayerGroup', 'Popup'],
 		desc: 'Extends LayerGroup with mouse events and bindPopup method shared between layers.'
 	},
 	Path: {
 		src: ['layer/vector/Path.js',
 		      'layer/vector/Path.SVG.js',
 		      'layer/vector/Path.Popup.js'],
 		desc: 'Vector rendering core (SVG-powered), enables overlaying the map with SVG paths.',
 		heading: 'Vector layers'
 	},
 	PathVML: {
 		src: ['layer/vector/Path.VML.js'],
 		desc: 'VML fallback for vector rendering core (IE 6-8).'
 	},
 	PathCanvas: {
 		src: ['layer/vector/canvas/Path.Canvas.js'],
 		deps: ['Path', 'Polyline', 'Polygon', 'Circle'],
 		desc: 'Canvas fallback for vector rendering core (makes it work on Android 2+).'
 	},
 	Polyline: {
 		src: ['geometry/LineUtil.js',
 		      'layer/vector/Polyline.js'],
 		deps: ['Path'],
 		desc: 'Polyline overlays.'
 	},
 	Polygon: {
 		src: ['geometry/PolyUtil.js',
 		      'layer/vector/Polygon.js'],
 		deps: ['Polyline'],
 		desc: 'Polygon overlays.'
 	},
 	MultiPoly: {
 		src: ['layer/vector/MultiPoly.js'],
 		deps: ['FeatureGroup', 'Polyline', 'Polygon'],
 		desc: 'MultiPolygon and MultyPolyline layers.'
 	},
 	Rectangle: {
 		src: ['layer/vector/Rectangle.js'],
 		deps: ['Polygon'],
 		desc: ['Rectangle overlays.']
 	},
 	Circle: {
 		src: ['layer/vector/Circle.js'],
 		deps: ['Path'],
 		desc: 'Circle overlays (with radius in meters).'
 	},
 	CircleMarker: {
 		src: ['layer/vector/CircleMarker.js'],
 		deps: ['Circle'],
 		desc: 'Circle overlays with a constant pixel radius.'
 	},
 	VectorsCanvas: {
 		src: ['layer/vector/canvas/Polyline.Canvas.js',
 		      'layer/vector/canvas/Polygon.Canvas.js',
 		      'layer/vector/canvas/Circle.Canvas.js'],
 		deps: ['PathCanvas', 'Polyline', 'Polygon', 'Circle'],
 		desc: 'Canvas fallback for vector layers (polygons, polylines, circles)'
 	},
 	GeoJSON: {
 		src: ['layer/GeoJSON.js'],
 		deps: ['Marker', 'MultiPoly', 'FeatureGroup'],
 		desc: 'GeoJSON layer, parses the data and adds corresponding layers above.'
 	},
 	MapDrag: {
 		src: ['dom/DomEvent.js',
 		      'dom/Draggable.js',
 		      'core/Handler.js',
 		      'map/handler/Map.Drag.js'],
 		desc: 'Makes the map draggable (by mouse or touch).',
 		heading: 'Interaction'
 	},
 	MouseZoom: {
 		src: ['dom/DomEvent.js',
 		      'core/Handler.js',
 		      'map/handler/Map.DoubleClickZoom.js',
 		      'map/handler/Map.ScrollWheelZoom.js'],
 		desc: 'Scroll wheel zoom and double click zoom on the map.'
 	},
 	TouchZoom: {
 		src: ['dom/DomEvent.js',
 		      'dom/DomEvent.DoubleTap.js',
 		      'dom/DomEvent.MsTouch.js',
 		      'core/Handler.js',
 		      'map/handler/Map.TouchZoom.js'],
 		deps: ['MapAnimationZoom'],
 		desc: 'Enables smooth touch zooming on iOS and IE10 and double tap on iOS/IE10/Android.'
 	},
 	BoxZoom: {
 		src: ['map/handler/Map.BoxZoom.js'],
 		desc: 'Enables zooming to bounding box by shift-dragging the map.'
 	},
 	Keyboard: {
 		src: ['map/handler/Map.Keyboard.js'],
 		desc: 'Enables keyboard pan/zoom when the map is focused.'
 	},
 	MarkerDrag: {
 		src: ['layer/marker/Marker.Drag.js'],
 		deps: ['Marker'],
 		desc: 'Makes markers draggable (by mouse or touch).'
 	},
 	PolyEdit: {
 		src: ['layer/vector/Polyline.Edit.js'],
 		deps: ['Polyline', 'DivIcon'],
 		desc: 'Polyline and polygon editing.'
 	},
 	ControlZoom: {
 		src: ['control/Control.js',
 		      'map/ext/Map.Control.js',
 		      'control/Control.Zoom.js'],
 		heading: 'Controls',
 		desc: 'Basic zoom control with two buttons (zoom in / zoom out).'
 	},
 	ControlAttrib: {
 		src: ['control/Control.js',
 		      'map/ext/Map.Control.js',
 		      'control/Control.Attribution.js'],
 		desc: 'Attribution control.'
 	},
 	ControlScale: {
 		src: ['control/Control.js',
 		      'map/ext/Map.Control.js',
 		      'control/Control.Scale.js'],
 		desc: 'Scale control.'
 	},
 	ControlLayers: {
 		src: ['control/Control.js',
 		      'map/ext/Map.Control.js',
 		      'control/Control.Layers.js'],
 		desc: 'Layer Switcher control.'
 	},
 	AnimationPan: {
 		src: [
 			'dom/DomEvent.js',
 			'dom/PosAnimation.js',
 			'map/anim/Map.PanAnimation.js'
 			],
 		deps: ['AnimationPan'],
 		desc: 'Core panning animation support.'
 	},
 	AnimationTimer: {
 		src: ['dom/PosAnimation.Timer.js'],
 		deps: ['AnimationPan'],
 		desc: 'Timer-based pan animation fallback for browsers that don\'t support CSS3 transitions.'
 	},
 	AnimationZoom: {
 		src: ['map/anim/Map.ZoomAnimation.js'],
 		deps: ['AnimationPan'],
 		desc: 'Smooth zooming animation. Works only on browsers that support CSS3 Transitions.'
 	},
 	Geolocation: {
 		src: ['map/ext/Map.Geolocation.js'],
 		desc: 'Adds Map#locate method and related events to make geolocation easier.',
 		heading: 'Misc'
 	}
 };
 if (typeof exports !== 'undefined') {
 	exports.deps = deps;
 }
--- a/build/docs-index.leafdoc
+++ b/build/docs-index.leafdoc
@ -1,63 +0,0 @@
 This file just defines the order of the classes in the docs.
@class Map
@class Marker
@class Popup
@class Tooltip
@class TileLayer
@class TileLayer.WMS
@class ImageOverlay
@class VideoOverlay
@class Path
@class Polyline
@class Polygon
@class Rectangle
@class Circle
@class CircleMarker
@class SVG
@class Canvas
@class LayerGroup
@class FeatureGroup
@class GeoJSON
@class GridLayer
@class LatLng
@class LatLngBounds
@class Point
@class Bounds
@class Icon
@class DivIcon
@class Control.Zoom
@class Control.Attribution
@class Control.Layers
@class Control.Scale
@class Browser
@class Util
@class Transformation
@class LineUtil
@class PolyUtil
@class DomEvent
@class DomUtil
@class PosAnimation
@class Draggable
@class Class
@class Evented
@class Layer
@class Interactive layer
@class Control
@class Handler
@class Projection
@class CRS
@class Renderer
@class Event objects
--- a/build/docs-misc.leafdoc
+++ b/build/docs-misc.leafdoc
@ -1,51 +0,0 @@
 Miscellaneous bits of documentation that don't really fit anywhere else
@namespace Global Switches
 Global switches are created for rare cases and generally make
 Leaflet to not detect a particular browser feature even if it's
 there. You need to set the switch as a global variable to true
 before including Leaflet on the page, like this:
 ```html
 <script>L_NO_TOUCH = true;</script>
 <script src="leaflet.js"></script>
 ```
 | Switch         |   Description    |
 | -------------- | ---------------- |
 | `L_NO_TOUCH`   | Forces Leaflet to not use touch events even if it detects them. |
 | `L_DISABLE_3D` | Forces Leaflet to not use hardware-accelerated CSS 3D transforms for positioning (which may cause glitches in some rare environments) even if they're supported. |
@namespace noConflict
 This method restores the `L` global variable to the original value
 it had before Leaflet inclusion, and returns the real Leaflet
 namespace so you can put it elsewhere, like this:
 ```html
 <script src='libs/l.js'>
 <!-- L points to some other library -->
 <script src='leaflet.js'>
 <!-- you include Leaflet, it replaces the L variable to Leaflet namespace -->
 <script>
 var Leaflet = L.noConflict();
 // now L points to that other library again, and you can use Leaflet.Map etc.
 </script>
 ```
@namespace version
 A constant that represents the Leaflet version in use.
 ```js
 L.version; // contains "1.0.0" (or whatever version is currently in use)
 ```
--- a/build/docs.js
+++ b/build/docs.js
@ -1,37 +0,0 @@
 var packageDef = require('../package.json');
 function buildDocs() {
 	console.log('Building Leaflet documentation with Leafdoc');
 	var LeafDoc = require('leafdoc');
 	var doc = new LeafDoc({
 		templateDir: 'build/leafdoc-templates',
 		showInheritancesWhenEmpty: true,
 		leadingCharacter: '@'
 	});
 	// Note to Vladimir: Iván's never gonna uncomment the following line. He's
 	// too proud of the little leaves around the code.
 	//doc.setLeadingChar('@');
 	// Leaflet uses a couple of non-standard documentable things. They are not
 	// important enough to be classes/namespaces of their own, and should
 	// just be listed in a table like the rest of documentables:
 	doc.registerDocumentable('pane', 'Map panes');
 	doc.registerDocumentable('projection', 'Defined projections');
 	doc.registerDocumentable('crs', 'Defined CRSs');
 	doc.addFile('build/docs-index.leafdoc', false);
 	doc.addDir('src');
 	doc.addFile('build/docs-misc.leafdoc', false);
 	var out = doc.outputStr();
 	var fs = require('fs');
 	fs.writeFileSync('dist/reference-' + packageDef.version + '.html', out);
 }
 module.exports = buildDocs;
--- a/build/hintrc.js
+++ b/build/hintrc.js
@ -0,0 +1,47 @@
 exports.config = {
 	"browser": true,
 	"node": true,
 	"predef": ["L"],
 	"debug": false,
 	"devel": false,
 	"es5": false,
 	"strict": false,
 	"globalstrict": false,
 	"asi": false,
 	"laxbreak": false,
 	"bitwise": true,
 	"boss": false,
 	"curly": true,
 	"eqnull": false,
 	"evil": false,
 	"expr": false,
 	"forin": true,
 	"immed": true,
 	"latedef": true,
 	"loopfunc": false,
 	"noarg": true,
 	"regexp": true,
 	"regexdash": false,
 	"scripturl": false,
 	"shadow": false,
 	"supernew": false,
 	"undef": true,
 	"funcscope": false,
 	"newcap": true,
 	"noempty": true,
 	"nonew": true,
 	"nomen": false,
 	"onevar": false,
 	"plusplus": false,
 	"sub": false,
 	"indent": 4,
 	"eqeqeq": true,
 	"trailing": true,
 	"white": true,
 	"smarttabs": true
 };
--- a/build/integrity.js
+++ b/build/integrity.js
@ -1,29 +0,0 @@
 // This script calculates the integrity hashes of the files in dist/ , and
 // **overwrites** the values in the documentation.
 var ssri = require('ssri');
 var fs   = require('fs');
 var version = require('../package.json').version;
 const integritySrc = ssri.fromData(fs.readFileSync('dist/leaflet-src.js'));
 const integrityUglified = ssri.fromData(fs.readFileSync('dist/leaflet.js'));
 const integrityCss = ssri.fromData(fs.readFileSync('dist/leaflet.css'));
 console.log('Integrity hashes for ', version, ':');
 console.log('dist/leaflet-src.js: ', integritySrc.toString());
 console.log('dist/leaflet.js:     ', integrityUglified.toString());
 console.log('dist/leaflet.css:    ', integrityCss.toString());
 var docConfig = fs.readFileSync('docs/_config.yml').toString();
 docConfig = docConfig.
 	replace(/latest_leaflet_version:.*/,  'latest_leaflet_version: ' + version).
 	replace(/integrity_hash_source:.*/,   'integrity_hash_source: "' +   integritySrc.toString() + '"').
 	replace(/integrity_hash_uglified:.*/, 'integrity_hash_uglified: "' + integrityUglified.toString() + '"').
 	replace(/integrity_hash_css:.*/,      'integrity_hash_css: "' +      integrityCss.toString() + '"');
 // console.log('New jekyll docs config: \n', docConfig);
 fs.writeFileSync('docs/_config.yml', docConfig);
--- a/build/leafdoc-templates/comments.hbs
+++ b/build/leafdoc-templates/comments.hbs
@ -1 +0,0 @@
 {{{rawmarkdown comments}}}
--- a/build/leafdoc-templates/constructor.hbs
+++ b/build/leafdoc-templates/constructor.hbs
@ -1,17 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Constructor</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>(
 		{{~#each params~}}
 			{{#if type}}<nobr>&lt;{{{type type}}}&gt;</nobr> {{/if}}<i>{{name}}</i>
 			{{~#unless @last}}, {{/unless}}{{/each~}}
 		)</nobr></code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/crs.hbs
+++ b/build/leafdoc-templates/crs.hbs
@ -1,13 +0,0 @@
 <table><thead>
 	<tr>
 		<th>CRS</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b></code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/destructor.hbs
+++ b/build/leafdoc-templates/destructor.hbs
@ -1,17 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Destructor</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>(
 		{{~#each params~}}
 			{{#if type}}<nobr>&lt;{{{type type}}}&gt;</nobr> {{/if}}<i>{{name}}</i>
 			{{~#unless @last}}, {{/unless}}{{/each~}}
 		)</nobr></code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/event.hbs
+++ b/build/leafdoc-templates/event.hbs
@ -1,15 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Event</th>
 		<th>Data</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>
 		<td><code>{{{type type}}}</code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/example.hbs
+++ b/build/leafdoc-templates/example.hbs
@ -1,4 +0,0 @@
 {{#each documentables}}
 {{{rawmarkdown comments}}}
 {{/each}}
--- a/build/leafdoc-templates/factory.hbs
+++ b/build/leafdoc-templates/factory.hbs
@ -1,17 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Factory</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>(
 		{{~#each params~}}
 			{{#if type}}<nobr>&lt;{{{type type}}}&gt;</nobr> {{/if}}<i>{{name}}</i>
 			{{~#unless @last}}, {{/unless}}{{/each~}}
 		)</nobr></code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/function.hbs
+++ b/build/leafdoc-templates/function.hbs
@ -1,19 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Function</th>
 		<th>Returns</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>(
 		{{~#each params~}}
 			{{#if type}}<nobr>&lt;{{{type type}}}&gt;</nobr> {{/if}}<i>{{name}}</i>
 			{{~#unless @last}}, {{/unless}}{{/each~}}
 		)</nobr></code></td>
 		<td><code>{{{type type}}}</code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/html.hbs
+++ b/build/leafdoc-templates/html.hbs
@ -1,319 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>{{ title }}</title>
 	<meta charset="utf-8">
 	<link rel="stylesheet" href="../docs/docs/css/normalize.css" />
 	<link rel="stylesheet" href="../docs/docs/css/main.css" />
 	<script src="../docs/docs/highlight/highlight.pack.js"></script>
 	<link rel="stylesheet" href="../docs/docs/highlight/styles/github-gist.css" />
 	<link rel="stylesheet" href="leaflet.css" />
 	<script src="leaflet.js"></script>
 </head>
 <body class='api-page'>
 	<div class='container'>
 	<h2>Leaflet API reference</h2>
 	<div id="toc" class="clearfix">
 		<div class="toc-col map-col">
 			<h4>Map</h4>
 			<ul>
 				<li><a href="#map-example">Usage example</a></li>
 				<li><a href="#map-factory">Creation</a></li>
 				<li><a href="#map-option">Options</a></li>
 				<li><a href="#map-event">Events</a></li>
 			</ul>
 			<h4>Map Methods</h4>
 			<ul>
 				<li><a href="#map-methods-for-modifying-map-state">Modifying map state</a></li>
 				<li><a href="#map-methods-for-getting-map-state">Getting map state</a></li>
 				<li><a href="#map-methods-for-layers-and-controls">Layers and controls</a></li>
 				<li><a href="#map-conversion-methods">Conversion methods</a></li>
 				<li><a href="#map-other-methods">Other methods</a></li>
 			</ul>
 			<h4>Map Misc</h4>
 			<ul>
 				<li><a href="#map-property">Properties</a></li>
 				<li><a href="#map-pane">Panes</a></li>
 			</ul>
 		</div>
 		<div class="toc-col">
 			<h4>UI Layers</h4>
 			<ul>
 				<li><a href="#marker">Marker</a></li>
 				<li><a href="#popup">Popup</a></li>
 				<li><a href="#tooltip">Tooltip</a></li>
 			</ul>
 			<h4>Raster Layers</h4>
 			<ul>
 				<li><a href="#tilelayer">TileLayer</a></li>
 				<li><a href="#tilelayer-wms">TileLayer.WMS</a></li>
 				<li><a href="#imageoverlay">ImageOverlay</a></li>
 				<li><a href="#videooverlay">VideoOverlay</a></li>
 			</ul>
 			<h4>Vector Layers</h4>
 			<ul>
 				<li><a href="#path">Path</a></li>
 				<li><a href="#polyline">Polyline</a></li>
 				<li><a href="#polygon">Polygon</a></li>
 				<li><a href="#rectangle">Rectangle</a></li>
 				<li><a href="#circle">Circle</a></li>
 				<li><a href="#circlemarker">CircleMarker</a></li>
 				<li><a href="#svg">SVG</a></li>
 				<li><a href="#canvas">Canvas</a></li>
 			</ul>
 		</div>
 		<div class="toc-col">
 			<h4>Other Layers</h4>
 			<ul>
 				<li><a href="#layergroup">LayerGroup</a></li>
 				<li><a href="#featuregroup">FeatureGroup</a></li>
 				<li><a href="#geojson">GeoJSON</a></li>
 				<li><a href="#gridlayer">GridLayer</a></li>
 			</ul>
 			<h4>Basic Types</h4>
 			<ul>
 				<li><a href="#latlng">LatLng</a></li>
 				<li><a href="#latlngbounds">LatLngBounds</a></li>
 				<li><a href="#point">Point</a></li>
 				<li><a href="#bounds">Bounds</a></li>
 				<li><a href="#icon">Icon</a></li>
 				<li><a href="#divicon">DivIcon</a></li>
 			</ul>
 			<h4>Controls</h4>
 			<ul>
 				<li><a href="#control-zoom">Zoom</a></li>
 				<li><a href="#control-attribution">Attribution</a></li>
 				<li><a href="#control-layers">Layers</a></li>
 				<li><a href="#control-scale">Scale</a></li>
 			</ul>
 		</div>
 		<div class="toc-col">
 <!-- 			<h4>Shared Methods</h4> -->
 <!-- 			<ul> -->
 <!-- 				<li><a href="#evented">Event</a></li> -->
 <!-- 				<li><a href="#layers">Layer</a></li> -->
 <!-- 				<li><a href="#popup">Popup</a></li> -->
 <!-- 			</ul> -->
 			<h4>Utility</h4>
 			<ul>
 				<li><a href="#browser">Browser</a></li>
 				<li><a href="#util">Util</a></li>
 				<li><a href="#transformation">Transformation</a></li>
 				<li><a href="#lineutil">LineUtil</a></li>
 				<li><a href="#polyutil">PolyUtil</a></li>
 			</ul>
 			<h4>DOM Utility</h4>
 			<ul>
 				<li><a href="#domevent">DomEvent</a></li>
 				<li><a href="#domutil">DomUtil</a></li>
 				<li><a href="#posanimation">PosAnimation</a></li>
 				<li><a href="#draggable">Draggable</a></li>
 			</ul>
 		</div>
 		<div class="toc-col last-col">
 			<h4>Base Classes</h4>
 			<ul>
 				<li><a href="#class">Class</a></li>
 				<li><a href="#evented">Evented</a></li>
 				<li><a href="#layer">Layer</a></li>
 				<li><a href="#interactive-layer">Interactive layer</a></li>
 				<li><a href="#control">Control</a></li>
 				<li><a href="#handler">Handler</a></li>
 				<!--<li><a class="nodocs" href="#">IFeature</a></li>-->
 				<li><a href="#projection">Projection</a></li>
 				<li><a href="#crs">CRS</a></li>
 				<li><a href="#renderer">Renderer</a></li>
 			</ul>
 			<h4>Misc</h4>
 			<ul>
 				<li><a href="#event-objects">Event objects</a></li>
 				<li><a href="#global-switches">global switches</a></li>
 				<li><a href="#noconflict">noConflict</a></li>
 				<li><a href="#version">version</a></li>
 			</ul>
 		</div>
 	</div>
 	{{{ body }}}
 	<div class="footer">
 		<p>© 2017 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Maps © <a 	href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
 	</div>
 	</div>
 	<script src="http://leafletjs.com/docs/js/docs.js"></script>
 	<script>
 	hljs.configure({tabReplace: '    '});
 	hljs.initHighlightingOnLoad();
 	var elems = document.querySelectorAll('h2, h3, h4, tr');
 	for (var i = 0, len = elems.length; i < len; i++) {
 		var el = elems[i];
 		if (el.id) {
 			var anchor = document.createElement('a');
 			anchor.setAttribute('anchor', el.id);
 			if (!el.children.length) {
 				// For headers, insert the anchor before.
 				el.parentNode.insertBefore(anchor, el);
 			} else {
 				// For table rows, insert the anchor inside the first <td>
 				el.querySelector('td').appendChild(anchor);
 				// Clicking on the row (meaning "the link icon on the ::before)
 				// jumps to the item
 				el.parentNode.onclick = function(hash){
 					return function(ev) {
 						if (ev.offsetX < 0) {
 							window.location.hash = '#' + ev.target.parentNode.id;
 						}
 					};
 				}(el.id);
 			}
 		}
 	}
 	elems = document.querySelectorAll('div.accordion');
 	for (var i = 0, len = elems.length; i < len; i++) {
 		var el = elems[i];
 		el.querySelector('label').addEventListener('click', function(c){
 			return function() {
 				if (c.className === 'accordion expanded') {
 					c.className = 'accordion collapsed';
 				} else {
 					c.className = 'accordion expanded';
 				}
 			};
 		}(el));
 // 		el.className = 'accordion collapsed';
 // 		el.querySelector('.accordion-content').style.display = 'none';
 	}
 </script>
 <style>
 	h2 {
 		margin-top: 2em;
 	}
 	h3 {
 		margin-top: 1em;
 		margin-bottom: .5em;
 	}
 	div.accordion {
 		width: 100%;
 /* 		overflow: hidden; */
 	}
 	div.accordion-overflow {
 		width: 100%;
 		overflow: hidden;
 	}
 	label,
 	section > h4 {
 		display: block;
 		font-weight: 500;
 		margin: 1em 0 0.25em;
 	}
 	label {
 		cursor: pointer;
 	}
 	div.accordion > div.accordion-overflow > div.accordion-content {
 		max-height: 0;
 		display: none;
 	}
 	div.accordion.collapsed > div.accordion-overflow > div.accordion-content {
 		animation-duration: 0.4s;
 		animation-name: collapse;
 /* 		height: 0; */
 		max-height: 0;
 		display: block;
 		overflow: hidden;
 	}
 	div.accordion.expanded > div.accordion-overflow > div.accordion-content {
 		animation-duration: 0.4s;
 		animation-name: expand;
 /* 		height: auto; */
 		max-height: none;
 		display: block;
 	}
 	@keyframes collapse {
 		0% { max-height: 100vh; }
 		100% { max-height: 0; }
 	}
 	@keyframes expand {
 		0% { max-height: 0; }
 		100% { max-height: 100vh; }
 	}
 /*	div.accordion > div.accordion-content {
 		transition: max-height 0.4s ease-out 0s;
 	}*/
 	div.accordion.expanded > label > span.expander {
 		transform: rotate(90deg);
 	}
 	div.accordion > label > span.expander {
 		transition: transform 0.4s ease-out 0s;
 		display: inline-block;
 		font-size: 12px;
 	}
 	table {
 		margin-bottom: 0;
 	}
 /* 	Markdown renders some spurious <p>s inside the table cells */
 	td > p {
 		margin:0;
 	}
 /* 	This just looks bad (with the current grey headers for sections which Vlad doesn't really like, so might have to change this) */
 	section.collapsable > div.section-comments > p {
 		margin:0;
 	}
 	div.section-comments {
 		margin-bottom: 0.25em;
 	}
 /*	section.collapsable div.section-comments {
 		margin: 1em;
 		font-size: 12px;
 	}*/
 	section.collapsable pre {
 		margin:0;
 	}
 	section {
 		margin-left: 0.5em;
 	}
 	section h4, section.collapsable h4 {
 		margin-left: -0.5em;
 	}
 </style>
 </body></html>
--- a/build/leafdoc-templates/inherited.hbs
+++ b/build/leafdoc-templates/inherited.hbs
@ -1,7 +0,0 @@
 <div class='accordion'>
 	<label><span class='expander'>▶</span> {{name}} inherited from {{{type ancestor}}}</label>
 	<div class='accordion-overflow'>
 		<div class='accordion-content'>{{{inherited}}}</div>
 	</div>
 </div>
--- a/build/leafdoc-templates/method.hbs
+++ b/build/leafdoc-templates/method.hbs
@ -1,19 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Method</th>
 		<th>Returns</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>(
 		{{~#each params~}}
 			{{#if type}}<nobr>&lt;{{{type type}}}&gt;</nobr> {{/if}}<i>{{name}}</i>
 			{{~#unless @last}}, {{/unless}}{{/each~}}
 		)</nobr></code></td>
 		<td><code>{{{type type}}}</code></td>
 		<td>{{{rawmarkdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/namespace.hbs
+++ b/build/leafdoc-templates/namespace.hbs
@ -1,7 +0,0 @@
 {{#if name ~}}
 <h2 id='{{id}}'>{{name}}</h2>
 {{~ else ~}}
 <span id='{{id}}'></span>
 {{/if}}
 {{{rawmarkdown comments}}}
 {{{supersections}}}
--- a/build/leafdoc-templates/option.hbs
+++ b/build/leafdoc-templates/option.hbs
@ -1,17 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Option</th>
 		<th>Type</th>
 		<th>Default</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b></code></td>
 		<td><code>{{{type type}}}</code>
 		<td><code>{{defaultValue}}</code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/pane.hbs
+++ b/build/leafdoc-templates/pane.hbs
@ -1,17 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Pane</th>
 		<th>Type</th>
 		<th>Z-index</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b></code></td>
 		<td><code>{{{type type}}}</code>
 		<td><code>{{defaultValue}}</code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/projection.hbs
+++ b/build/leafdoc-templates/projection.hbs
@ -1,13 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Projection</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b></code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/property.hbs
+++ b/build/leafdoc-templates/property.hbs
@ -1,15 +0,0 @@
 <table><thead>
 	<tr>
 		<th>Property</th>
 		<th>Type</th>
 		<th>Description</th>
 	</tr>
 	</thead><tbody>
 	{{#each documentables}}
 	<tr id='{{id}}'>
 		<td><code><b>{{name}}</b>
 		<td><code>{{{type type}}}</code></td>
 		<td>{{{markdown comments}}}</td>
 	</tr>
 	{{/each}}
 </tbody></table>
--- a/build/leafdoc-templates/section.hbs
+++ b/build/leafdoc-templates/section.hbs
@ -1,11 +0,0 @@
 <section {{#if isSecondarySection}}class='collapsable'{{/if}}>
 {{#if name}}<h4 id='{{id}}'>{{name}}</h4>{{/if}}
 {{#if comments~}}
 <div class='section-comments'>{{{markdown comments}}}</div>
 {{/if}}
 {{{documentables}}}
 </section>
--- a/build/leafdoc-templates/supersection.hbs
+++ b/build/leafdoc-templates/supersection.hbs
@ -1,7 +0,0 @@
 <section>
 <h3 id='{{id}}'>{{name}}</h3>
 {{markdown comments}}
 {{{sections}}}
 {{{inheritances}}}
 </section>
--- a/build/publish.sh
+++ b/build/publish.sh
@ -1,36 +0,0 @@
 #!/bin/bash
 npm update
 VERSION=$(node --eval "console.log(require('./package.json').version);")
 npm test || exit 1
 echo "Ready to publish Leaflet version $VERSION."
 echo "Has the version number been bumped?"
 read -n1 -r -p "Press Ctrl+C to cancel, or any other key to continue." key
 git checkout -b build
 export NODE_ENV=release
 npm run-script build
 echo "Creating git tag v$VERSION..."
 git add dist/leaflet-src.js dist/leaflet.js dist/leaflet-src.js.map dist/leaflet.js.map -f
 git commit -m "v$VERSION"
 git tag v$VERSION -f
 git push --tags -f
 echo "Uploading to NPM..."
 npm publish
 git checkout master
 git branch -D build
 echo "All done."
 echo "Remember to run 'npm run-script integrity' and then commit the changes to the master branch, in order to update the website."
--- a/build/rollup-config.js
+++ b/build/rollup-config.js
@ -1,39 +0,0 @@
 // Config file for running Rollup in "normal" mode (non-watch)
 import rollupGitVersion from 'rollup-plugin-git-version'
 import json from 'rollup-plugin-json'
 import gitRev from 'git-rev-sync'
 let version = require('../package.json').version;
 let release;
 // Skip the git branch+rev in the banner when doing a release build
 if (process.env.NODE_ENV === 'release') {
 	release = true;
 } else {
 	release = false;
 	const branch = gitRev.branch();
 	const rev = gitRev.short();
 	version += '+' + branch + '.' + rev;
 }
 const banner = `/* @preserve
 * Leaflet ${version}, a JS library for interactive maps. http://leafletjs.com
 * (c) 2010-2017 Vladimir Agafonkin, (c) 2010-2011 CloudMade
 */
 `;
 export default {
 	input: 'src/Leaflet.js',
 	output: {
 		file: 'dist/leaflet-src.js',
 		format: 'umd',
 		name: 'L',
 		banner: banner,
 		sourcemap: true
 	},
 	legacy: true, // Needed to create files loadable by IE8
 	plugins: [
 		release ? json() : rollupGitVersion()
 	]
 };
--- a/build/rollup-watch-config.js
+++ b/build/rollup-watch-config.js
@ -1,29 +0,0 @@
 // Config file for running Rollup in "watch" mode
 // This adds a sanity check to help ourselves to run 'rollup -w' as needed.
 import rollupGitVersion from 'rollup-plugin-git-version'
 import gitRev from 'git-rev-sync'
 const branch = gitRev.branch();
 const rev = gitRev.short();
 const version = require('../package.json').version + '+' + branch + '.' + rev;
 const banner = `/* @preserve
 * Leaflet ${version}, a JS library for interactive maps. http://leafletjs.com
 * (c) 2010-2016 Vladimir Agafonkin, (c) 2010-2011 CloudMade
 */
 `;
 export default {
 	input: 'src/Leaflet.js',
 	output: {
 		file: 'dist/leaflet-src.js',
 		format: 'umd',
 		name: 'L',
 		banner: banner,
 		sourcemap: true
 	},
 	legacy: true, // Needed to create files loadable by IE8
 	plugins: [
 		rollupGitVersion()
 	]
 };
--- a/debug/hacks/jitter.html
+++ b/debug/hacks/jitter.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<meta name="viewport" content="width=device-width,initial-scale=1 maximum-scale=1.0 user-scalable=0">
 	<link rel="stylesheet" href="../css/screen.css" />
@ -14,7 +15,7 @@
 	<div id="map"></div>
 	<div >
-		<form method="get">Click in field then scroll map (in up/left direction) to see shift of map tiles.
+		<form method="get">Click in field then scroll map (in up/left direction) to see shift of map tiles. 
 			<fieldset><label for="textField">Name</label>:
 				<input id="textField" name="textField" type="text" value="">
 			</fieldset>
@ -22,18 +23,20 @@
 		Bug tested to occur on: Safari on Mac (Tested in 5.1.7), iPad/iPhone 5.1.1., Android 4 Browser. Hack is in L.Browser.chrome and TileLayer._addTile
 </div>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
-		osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			maxZoom: 18,
-		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+			attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
 			key: 'BC9A493B41014CAABB98F0471D759707'
 		});
 		//Disable the hack fix
 		L.Browser.chrome = true;
 		var map = L.map('map')
 				.setView([50.5, 30.51], 15)
-				.addLayer(osm);
+				.addLayer(cloudmade);
 	</script>
 </body>
 </html>
--- a/debug/leaflet-include.js
+++ b/debug/leaflet-include.js
@ -1 +0,0 @@
 ../dist/leaflet-src.js
--- a/debug/leaflet-include.js
+++ b/debug/leaflet-include.js
@ -0,0 +1,135 @@
 (function() {
 	//TODO replace script list with the one from ../buid/deps.js
 	var scripts = [
 		'Leaflet.js',
 		'core/Util.js',
 		'core/Class.js',
 		'core/Events.js',
 		'core/Browser.js',
 		'geometry/Point.js',
 		'geometry/Bounds.js',
 		'geometry/Transformation.js',
 		'geometry/LineUtil.js',
 		'geometry/PolyUtil.js',
 		'dom/DomEvent.js',
 		'dom/DomEvent.DoubleTap.js',
 		'dom/DomEvent.MsTouch.js',
 		'dom/DomUtil.js',
 		'dom/Draggable.js',
 		'dom/PosAnimation.js',
 		'dom/PosAnimation.Timer.js',
 		// 'dom/transition/Transition.js',
 		// 'dom/transition/Transition.Native.js',
 		// 'dom/transition/Transition.Timer.js',
 		'geo/LatLng.js',
 		'geo/LatLngBounds.js',
 		'geo/projection/Projection.js',
 		'geo/projection/Projection.SphericalMercator.js',
 		'geo/projection/Projection.LonLat.js',
 		'geo/projection/Projection.Mercator.js',
 		'geo/crs/CRS.js',
 		'geo/crs/CRS.EPSG3857.js',
 		'geo/crs/CRS.EPSG4326.js',
 		'geo/crs/CRS.EPSG3395.js',
 		'geo/crs/CRS.Simple.js',
 		'map/Map.js',
 		'map/ext/Map.Geolocation.js',
 		'map/ext/Map.Popup.js',
 		'map/ext/Map.Control.js',
 		'map/anim/Map.PanAnimation.js',
 		'map/anim/Map.ZoomAnimation.js',
 		'core/Handler.js',
 		'map/handler/Map.Drag.js',
 		'map/handler/Map.TouchZoom.js',
 		'map/handler/Map.DoubleClickZoom.js',
 		'map/handler/Map.ScrollWheelZoom.js',
 		'map/handler/Map.BoxZoom.js',
 		'map/handler/Map.Keyboard.js',
 		'layer/LayerGroup.js',
 		'layer/FeatureGroup.js',
 		'layer/tile/TileLayer.js',
 		'layer/tile/TileLayer.WMS.js',
 		'layer/tile/TileLayer.Canvas.js',
 		'layer/ImageOverlay.js',
 		'layer/Popup.js',
 		'layer/marker/Icon.js',
 		'layer/marker/Icon.Default.js',
 		'layer/marker/DivIcon.js',
 		'layer/marker/Marker.js',
 		'layer/marker/Marker.Popup.js',
 		'layer/marker/Marker.Drag.js',
 		'layer/vector/Path.js',
 		'layer/vector/Path.Popup.js',
 		'layer/vector/Path.SVG.js',
 		'layer/vector/Path.VML.js',
 		'layer/vector/canvas/Path.Canvas.js',
 		'layer/vector/Polyline.js',
 		'layer/vector/Polyline.Edit.js',
 		'layer/vector/canvas/Polyline.Canvas.js',
 		'layer/vector/Polygon.js',
 		'layer/vector/Rectangle.js',
 		'layer/vector/canvas/Polygon.Canvas.js',
 		'layer/vector/MultiPoly.js',
 		'layer/vector/Circle.js',
 		'layer/vector/canvas/Circle.Canvas.js',
 		'layer/vector/CircleMarker.js',
 		'layer/GeoJSON.js',
 		'control/Control.js',
 		'control/Control.Zoom.js',
 		'control/Control.Attribution.js',
 		'control/Control.Layers.js',
 		'control/Control.Scale.js'
 	];
 	function getSrcUrl() {
 		var scripts = document.getElementsByTagName('script');
 		for (var i = 0; i < scripts.length; i++) {
 			var src = scripts[i].src;
 			if (src) {
 				var res = src.match(/^(.*)leaflet-include\.js$/);
 				if (res) {
 					return res[1] + '../src/';
 				}
 			}
 		}
 	}
 	var path = getSrcUrl();
    for (var i = 0; i < scripts.length; i++) {
 		document.writeln("<script src='" + path + scripts[i] + "'></script>");
 	}
    document.writeln('<script defer>L.Icon.Default.imagePath = "' + path + '../dist/images";</script>');
 })();
 function getRandomLatLng(map) {
 	var bounds = map.getBounds(),
 		southWest = bounds.getSouthWest(),
 		northEast = bounds.getNorthEast(),
 		lngSpan = northEast.lng - southWest.lng,
 		latSpan = northEast.lat - southWest.lat;
 	return new L.LatLng(
 			southWest.lat + latSpan * Math.random(),
 	        southWest.lng + lngSpan * Math.random());
 }
 function logEvent(e) {
 	console.log(e.type);
 }
--- a/debug/map/canvas.html
+++ b/debug/map/canvas.html
@ -4,31 +4,31 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
-
+	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
-
+	
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
-	<script>
+	<script type="text/javascript">
 		var tiles = new L.GridLayer();
 		tiles.createTile = function(coords) {
 			var tile = document.createElement('canvas'),
 			    ctx = tile.getContext('2d');
 			tile.width = tile.height = 256;
 		var tiles = new L.TileLayer.Canvas();
 		tiles.drawTile = function(canvas, tile, zoom) {
 			var ctx = canvas.getContext('2d');
 			ctx.fillStyle = 'white';
 			ctx.fillRect(0, 0, 255, 255);
-
+			
 			ctx.fillStyle = 'black';
-			ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
+			ctx.fillText('x: ' + tile.x + ', y: ' + tile.y + ', zoom:' + zoom, 20, 20);
-
+			
 			ctx.strokeStyle = 'red';
 			ctx.beginPath();
 			ctx.moveTo(0, 0);
@ -37,12 +37,10 @@
 			ctx.lineTo(0, 255);
 			ctx.closePath();
 			ctx.stroke();
 			return tile;
 		}
-
+	
 		var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
-
+		
 	</script>
 </body>
-</html>
+</html>
--- a/debug/map/control-layers.html
+++ b/debug/map/control-layers.html
@ -1,50 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var geojson = {
 			"type": "Polygon",
 			"coordinates": [[
 				[5.4931640625, 51.781435604431195],
 				[0.9008789062499999, 53.35710874569601],
 				[-2.30712890625, 51.795027225829145],
 				[2.8125, 49.109837790524416],
 				[5.4931640625, 51.781435604431195]
 			]]
 		};
 		var map = L.map('map').setView([50.5, 0], 5);
 		var OSM_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 			maxZoom: 19,
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 		}).addTo(map);
 		var OSM_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
 			maxZoom: 18,
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 		});
 		L.control.layers({
 			'OSM': OSM_Mapnik,
 			'OSM BW': OSM_BlackAndWhite
 		}, {
 			'Circle': L.circle([53, 4], 111111).addTo(map),
 			'Polygon': L.polygon([[48, -3], [50, -4], [52, 4]]),
 			'GeoJSON': L.geoJson(geojson),
 		}, {
 			collapsed: false
 		}).addTo(map);
 	</script>
 </body>
 </html>
--- a/debug/map/controls.html
+++ b/debug/map/controls.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
@ -13,25 +14,28 @@
 	<div id="map"></div>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		function getCloudMadeUrl(styleId) {
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			return 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/' + styleId + '/256/{z}/{x}/{y}.png';
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+		}
 			osm2 = new L.TileLayer(osmUrl, {attribution: 'Hello world'});
-		var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(50.5, 30.512), 15);
+		var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
 			cloudmade = new L.TileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution}),
 			cloudmade2 = new L.TileLayer(getCloudMadeUrl(998), {attribution: 'Hello world'});
-		var marker = new L.Marker(new L.LatLng(50.5, 30.505));
+		var map = new L.Map('map').addLayer(cloudmade).setView(new L.LatLng(50.5, 30.51), 15);
 		var marker = new L.CircleMarker(new L.LatLng(50.5, 30.505), {color: 'red'});
 		map.addLayer(marker);
-		marker.bindPopup("Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.").openPopup();
+		marker.bindPopup("Hello World").openPopup();
 		var marker2 = new L.Marker(new L.LatLng(50.502, 30.515));
 		map.addLayer(marker2);
 		var layersControl = new L.Control.Layers({
-			'OSM': osm,
+			'CloudMade Fresh': cloudmade,
-			'OSM2': osm2
+			'CloudMade Pale Dawn': cloudmade2
 		}, {
 			'Some marker': marker,
 			'Another marker': marker2
--- a/debug/map/geolocation.html
+++ b/debug/map/geolocation.html
@ -4,23 +4,25 @@
    <title>Leaflet geolocation debug page</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
-    <script>
+    <script type="text/javascript">
-        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
-        var map = new L.Map('map', {zoom: 15, layers: [osm]});
+        var map = new L.Map('map', {zoom: 15, layers: [cloudmade]});
        function logEvent(e) { console.log(e.type); }
        map.on('locationerror', logEvent);
--- a/debug/map/grid.html
+++ b/debug/map/grid.html
@ -1,48 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var grid = L.gridLayer({
 			attribution: 'Grid Layer'
 		});
 		grid.createTile = function (coords, done) {
 			var tile = document.createElement('div');
 			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
 			tile.style.outline = '1px solid red';
 			tile.style.background = 'white';
 			// test async
 			setTimeout(function () {
 				done(null, tile);
 			}, 500 + Math.random() * 500);
 			return tile;
 		};
 		grid.on('loading', function() { console.log('loading'); });
 		grid.on('load', function() { console.log('load'); });
 		grid.on('tileunload', function(tile) { console.log('tileunload ' + tile.coords.x + ',' + tile.coords.y + ',' + tile.coords.z); });
 		var map = L.map('map')
 				.setView([50.5, 30.51], 10)
 				.addLayer(grid);
 	</script>
 </body>
 </html>
--- a/debug/map/iframe.html
+++ b/debug/map/iframe.html
@ -1,11 +0,0 @@
 <style>
 	iframe {
 		position: absolute;
 		top: 50px;
 		left: 50px;
 		width: 500px;
 		height: 500px;
 	}
 </style>
 <iframe src="map.html">
 </iframe>
--- a/debug/map/image-overlay.html
+++ b/debug/map/image-overlay.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,33 +17,27 @@
 	<div id="map"></div>
 	<button id="populate">Populate with 10 markers</button>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
 			latlng = new L.LatLng(50.5, 30.51);
 		var map = new L.Map('map');
-		map.addLayer(osm);
+		map.addLayer(cloudmade);
 		var	bounds = new L.LatLngBounds(
-			new L.LatLng(40.71222,-74.22655),
+      		new L.LatLng(40.71222,-74.22655),
-			new L.LatLng(40.77394,-74.12544));
+      		new L.LatLng(40.77394,-74.12544));
 		map.fitBounds(bounds);
 		var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
-			opacity: 0.5,
+			opacity: 0.5
 			interactive: true,
 			attribution: '&copy; A.B.B Corp.'
 		});
 		map.addLayer(overlay);
 		overlay.on('dblclick',function (e) {
 			console.log('Double click on image.');
 		});
 	</script>
 </body>
 </html>
--- a/debug/map/layer_remove_add.html
+++ b/debug/map/layer_remove_add.html
@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet debug page</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
    <button id="removeAdd">Remove and Add Layer</button>
    <script>
        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    			attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    		}).addTo(map);
        L.DomUtil.get('removeAdd').onclick = function() {
            map.removeLayer(osm);
            setTimeout(function() {
                map.addLayer(osm);
            }, 1000);
        };
    </script>
 </body>
 </html>
--- a/debug/map/map-mobile.html
+++ b/debug/map/map-mobile.html
@ -6,6 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/mobile.css" />
@ -15,14 +16,14 @@
 	<div id="map"></div>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
 			latlng = new L.LatLng(50.5, 30.51);
-		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
 		var marker = new L.Marker(latlng);
 		map.addLayer(marker);
--- a/debug/map/map-popup.html
+++ b/debug/map/map-popup.html
@ -1,56 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
 		var map = L.map('map')
 				.setView([51.505, -0.09], 13)
 				.addLayer(osm);
 		L.marker([51.5, -0.09]).addTo(map)
 			.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
 		L.circle([51.508, -0.11], 500, {
 			color: 'red',
 			fillColor: '#f03',
 			fillOpacity: 0.5
 		}).addTo(map).bindPopup("I am a circle.");
 		L.polygon([
 			[51.509, -0.08],
 			[51.503, -0.06],
 			[51.51, -0.047]
 		]).addTo(map).bindPopup("I am a polygon.");
 		var popup = L.popup();
 		function onMapClick(e) {
 			popup
 				.setLatLng(e.latlng)
 				.setContent("You clicked the map at " + e.latlng.toString())
 				.openOn(map);
 		}
 		map.on('click', onMapClick);
 	</script>
 </body>
 </html>
--- a/debug/map/map-scaled.html
+++ b/debug/map/map-scaled.html
@ -1,38 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<style>
 		#map {
 			width: 400px;
 			height: 300px;
 			transform: scale(1.5, 1.5);
 			transform-origin: 0 0;
 		}
 	</style>
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
 		var map = L.map('map')
 				.setView([50.5, 30.51], 15)
 				.addLayer(osm);
 	</script>
 </body>
 </html>
--- a/debug/map/map.html
+++ b/debug/map/map.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -16,53 +17,42 @@
 	<div id="map"></div>
 	<button id="populate">Populate with 10 markers</button>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			maxZoom: 18,
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+			attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
 			key: 'BC9A493B41014CAABB98F0471D759707'
 		});
 		var map = L.map('map')
 				.setView([50.5, 30.51], 15)
-				.addLayer(osm);
+				.addLayer(cloudmade);
 		var markers = new L.FeatureGroup();
 		function getRandomLatLng(llbounds) {
 			var s = llbounds.getSouth(),
 			    n = llbounds.getNorth(),
 			    w = llbounds.getWest(),
 			    e = llbounds.getEast();
 			return L.latLng(
 				s + (Math.random() * (n - s)),
 				w + (Math.random() * (e - w))
 			)
 		}
 		function populate() {
 			for (var i = 0; i < 10; i++) {
-				L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
+				markers.addLayer(new L.Marker(getRandomLatLng(map)));
 			}
 			return false;
 		}
-		markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
+		markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>");
 		map.addLayer(markers);
 		populate();
 		L.DomUtil.get('populate').onclick = populate;
-		function logEvent(e) { console.log(e.type); }
+//		function logEvent(e) { console.log(e.type); }
-
+//
-		// map.on('click', logEvent);
+//		map.on('movestart', logEvent);
-		// map.on('contextmenu', logEvent);
+//		map.on('move', logEvent);
-
+//		map.on('moveend', logEvent);
-		// map.on('movestart', logEvent);
+//
-		// map.on('move', logEvent);
+//		map.on('zoomstart', logEvent);
-		// map.on('moveend', logEvent);
+//		map.on('zoomend', logEvent);
 		// map.on('zoomstart', logEvent);
 		// map.on('zoomend', logEvent);
 	</script>
 </body>
--- a/debug/map/marker-autopan.html
+++ b/debug/map/marker-autopan.html
@ -1,63 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet debug page</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
    <script>
        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
        var markerAutoPan = new L.Marker([0, -10], {
            draggable: true,
            autoPan: true,
            title: 'AutoPan'
        });
        map.addLayer(markerAutoPan);
        markerAutoPan.bindPopup("AutoPan");
        var markerDraggable = new L.Marker([0, 10], {
            title: 'Draggable'
        });
        map.addLayer(markerDraggable);
        markerDraggable.bindPopup("Draggable");
        markerDraggable.dragging.enable();
        var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
        map.addLayer(poly);
        poly.bindPopup("Polygon");
        markerDraggable.on('click', function(e) {
            console.log('markerDraggable click');
        });
        markerAutoPan.on('click', function(e) {
            console.log('markerAutoPan click');
        })
        map.on('click', function(e) {
            console.log('map click');
        });
        poly.on('click', function(e) {
            console.log('poly click');
        });
        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    			attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    		}).addTo(map);
    </script>
 </body>
 </html>
--- a/debug/map/markers.html
+++ b/debug/map/markers.html
@ -1,62 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet debug page</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
    <script>
        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
        var markerStatic = new L.Marker([0, -10], {
            draggable: false,
            title: 'Static'
        });
        map.addLayer(markerStatic);
        markerStatic.bindPopup("Static");
        var markerDraggable = new L.Marker([0, 10], {
            title: 'Draggable'
        });
        map.addLayer(markerDraggable);
        markerDraggable.bindPopup("Draggable");
        markerDraggable.dragging.enable();
        var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
        map.addLayer(poly);
        poly.bindPopup("Polygon");
        markerDraggable.on('click', function(e) {
            console.log('markerDraggable click');
        });
        markerStatic.on('click', function(e) {
            console.log('markerStatic click');
        })
        map.on('click', function(e) {
            console.log('map click');
        });
        poly.on('click', function(e) {
            console.log('poly click');
        });
        var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    			attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    		}).addTo(map);
    </script>
 </body>
 </html>
--- a/debug/map/max-bounds-bouncy.html
+++ b/debug/map/max-bounds-bouncy.html
@ -1,51 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/mobile.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>
 	<div id="map1" style="float: left; width:45%; height: 80%;"></div>
 	<div id="map2" style="float: left; width:45%; height: 80%;"></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
 		var map1 = new L.Map('map1', {
 			center: bounds.getCenter(),
 			zoom: 5,
 			layers: [osm1],
 			maxBounds: bounds,
 			maxBoundsViscosity: 0.75
 		});
 		var map2 = new L.Map('map2', {
 			center: bounds.getCenter(),
 			zoom: 5,
 			layers: [osm2],
 			maxBounds: bounds,
 			maxBoundsViscosity: 1.0
 		});
 		var latlngs = L.rectangle(bounds).getLatLngs();
 		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map1);
 		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map2);
 	</script>
 </body>
 </html>
--- a/debug/map/max-bounds-infinite.html
+++ b/debug/map/max-bounds-infinite.html
@ -1,36 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/mobile.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			bounds = new L.LatLngBounds(new L.LatLng(49.5, Number.NEGATIVE_INFINITY), new L.LatLng(61.2, Number.POSITIVE_INFINITY));
 		var map = new L.Map('map', {
 			center: L.latLng(49.5, 30),
 			zoom: 7,
 			layers: [osm],
 			maxBounds: bounds
 		});
 		map.setMaxBounds(bounds);	// Should not enter infinite recursion
 	</script>
 </body>
 </html>
--- a/debug/map/max-bounds.html
+++ b/debug/map/max-bounds.html
@ -6,36 +6,31 @@
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
-
+	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/mobile.css" />
-
+	
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
 			bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
-
+	
 		var map = new L.Map('map', {
 			center: bounds.getCenter(),
 			zoom: 7,
-			layers: [osm],
+			layers: [cloudmade],
 			maxBounds: bounds
 		});
-
+		
 		var latlngs = L.rectangle(bounds).getLatLngs();
 		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map);
 		map.setMaxBounds(bounds);	// Should not enter infinite recursion
 	</script>
 </body>
-</html>
+</html>
--- a/debug/map/opacity.html
+++ b/debug/map/opacity.html
@ -1,197 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 	<style>
 		.mapcontainer {
 			float:left;
 			position: relative;
 			width: 32%;
 			font-size: 12px;
 			font-family: sans-serif;
 			height: 340px;
 			margin-bottom: 15px;
 			background-color: #eee;
 			margin-right: 1%;
 		}
 		.map {
 			position: absolute;
 			width: 100%;
 			height: 280px;
 			bottom: 0px;
 		}
 	</style>
 </head>
 <body>
 	<p>These should all render identically.</p>
 	<div class="mapcontainer">
 		CASE 1: no opacity set on any layers
 		<br />
 		<div id="map1" class="map"></div>
 	</div>
 	<div class="mapcontainer">
 		CASE 2: opacity set to .99 on overlays but not on basemap
 		<br />
 		<div id="map2" class="map"></div>
 	</div>
 	<div class="mapcontainer">
 		CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
 		<br />
 		<div id="map3" class="map"></div>
 	</div>
 	<div class="mapcontainer">
 		CASE 4: opacity set to .99 on overlays but set to 1 on basemap
 		<br />
 		<div id="map4" class="map"></div>
 	</div>
 	<div class="mapcontainer">
 		CASE 5: opacity set to .99 on all layers
 		<br />
 		<div id="map5" class="map"></div>
 	</div>
 	<div class="mapcontainer">
 		CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
 		<br />
 		<div id="map6" class="map"></div>
 	</div>
 	<script>
 		var mapopts =  {
 			center: [35, -122],
 			zoom : 5
 		};
 		var map1 = L.map('map1', mapopts);
 		var map2 = L.map('map2', mapopts);
 		var map3 = L.map('map3', mapopts);
 		var map4 = L.map('map4', mapopts);
 		var map5 = L.map('map5', mapopts);
 		var map6 = L.map('map6', mapopts);
 		/**********
 		CASE 1: no opacity set on any layers
 		**********/
 		// OSM Basemap
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 		var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
 		// EEZs / Nations
 		var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true
 		}).addTo(map1);
 		// Marine Protected Areas overlay
 		var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false
 		}).addTo(map1);
 		/**********
 		CASE 2: opacity set on overlays but not on basemap
 		**********/
 		// OSM Basemap
 		var osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map2);
 		// EEZs / Nations
 		var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true,
 			opacity: 0.99
 		}).addTo(map2);
 		// Marine Protected Areas overlay
 		var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false,
 			opacity: 0.99
 		}).addTo(map2);
 		/**********
 		CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
 		**********/
 		// OSM Basemap
 		var osm3 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', zIndex: 0}).addTo(map3);
 		// EEZs / Nations
 		var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true,
 			opacity: 0.99
 		}).addTo(map3);
 		// Marine Protected Areas overlay
 		var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false,
 			opacity: 0.99
 		}).addTo(map3);
 		/**********
 		CASE 4: opacity set on overlays but set to 1 on basemap
 		**********/
 		// OSM Basemap
 		var osm4 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}).addTo(map4);
 		// EEZs / Nations
 		var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true,
 			opacity: 0.99
 		}).addTo(map4);
 		// Marine Protected Areas overlay
 		var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false,
 			opacity: 0.99
 		}).addTo(map4);
 		/**********
 		CASE 5: opacity set to .5 on all layers
 		**********/
 		// OSM Basemap
 		var osm5 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map5);
 		// EEZs / Nations
 		var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true,
 			opacity: 0.99
 		}).addTo(map5);
 		// Marine Protected Areas overlay
 		var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false,
 			opacity: 0.99
 		}).addTo(map5);
 		/**********
 		CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
 		**********/
 		// OSM Basemap
 		var osm6 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map6);
 		// EEZs / Nations
 		var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
 			tms: true,
 			opacity: 1
 		}).addTo(map6);
 		// Marine Protected Areas overlay
 		var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
 			tms: false,
 			opacity: 0.99
 		}).addTo(map6);
 	</script>
 </body>
 </html>
--- a/debug/map/popup.html
+++ b/debug/map/popup.html
@ -1,85 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>Leaflet debug page</title>
  <link rel="stylesheet" href="../../dist/leaflet.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/screen.css" />
  <script src="../leaflet-include.js"></script>
 </head>
 <body>
  <div id="map"></div>
  <script>
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
    var map = L.map('map')
        .setView([50.5, 30.51], 15)
        .addLayer(osm);
    function getRandomLatLng(llbounds) {
      var s = llbounds.getSouth(),
          n = llbounds.getNorth(),
          w = llbounds.getWest(),
          e = llbounds.getEast();
      return L.latLng(
        s + (Math.random() * (n - s)),
        w + (Math.random() * (e - w))
      )
    }
    var features = new L.FeatureGroup([
      L.marker(getRandomLatLng(map.getBounds())),
      L.polyline([
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds())
      ]),
      L.polygon([
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds())
      ])
    ]);
    features.bindPopup(function(layer){
      return 'Leaflet ID is ' + features.getLayerId(layer);
    }).addTo(map);
    var content = L.DomUtil.create('p', 'custom-popup');
    content.innerText = 'I\'m a red polygon';
    var polygon = L.polygon([
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds())
    ], {
      color: 'red'
    }).bindPopup(content).addTo(map);
    var polyline = L.polyline([
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds())
    ], {
      color: 'red'
    }).bindPopup('I\'m a red polyline').addTo(map);
    var marker = L.circleMarker(getRandomLatLng(map.getBounds()), {
      color: 'red',
      radius: 25
    }).bindPopup('I\'m a red circle').addTo(map);
  </script>
 </body>
 </html>
--- a/debug/map/rollup.html
+++ b/debug/map/rollup.html
@ -1,104 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../../dist/leaflet-src.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<button id="populate-markers">Populate with markers</button>
 	<button id="populate-circles">Populate with circles</button>
 	<button id="populate-lines">Populate with lines</button>
 	<button id="populate-polygons">Populate with polygons</button>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
 		var map = L.map('map')
 				.setView([50.5, 30.51], 15)
 				.addLayer(osm);
 		var markers = new L.FeatureGroup();
 		function getRandomLatLng(llbounds) {
 			var s = llbounds.getSouth(),
 			    n = llbounds.getNorth(),
 			    w = llbounds.getWest(),
 			    e = llbounds.getEast();
 			return L.latLng(
 				s + (Math.random() * (n - s)),
 				w + (Math.random() * (e - w))
 			)
 		}
 		function populateMarker() {
 			for (var i = 0; i < 5; i++) {
 				L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
 			}
 			return false;
 		}
 		function populateCircle() {
 			for (var i = 0; i < 5; i++) {
 				L.circleMarker(getRandomLatLng(map.getBounds())).addTo(markers);
 			}
 			return false;
 		}
 		function populateLine() {
 			var lineCoords = [];
 			for (var i = 0; i < 10; i++) {
 				lineCoords.push(getRandomLatLng(map.getBounds()));
 			}
 			L.polyline(lineCoords).addTo(map);
 			return false;
 		}
 		function populatePoly() {
 			var lineCoords = [];
 			for (var i = 0; i < 10; i++) {
 				lineCoords.push(getRandomLatLng(map.getBounds()));
 			}
 			L.polygon(lineCoords).addTo(map);
 			return false;
 		}
 		markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
 		L.DomUtil.get('populate-markers').onclick = populateMarker;
 		L.DomUtil.get('populate-circles').onclick = populateCircle;
 		L.DomUtil.get('populate-lines').onclick = populateLine;
 		L.DomUtil.get('populate-polygons').onclick = populatePoly;
 		function logEvent(e) { console.log(e.type); }
 		populateMarker();
 		populateCircle();
 		populateLine();
 		populatePoly();
 		// map.on('click', logEvent);
 		// map.on('contextmenu', logEvent);
 		// map.on('movestart', logEvent);
 		// map.on('move', logEvent);
 		// map.on('moveend', logEvent);
 		// map.on('zoomstart', logEvent);
 		// map.on('zoomend', logEvent);
 	</script>
 </body>
 </html>
--- a/debug/map/scroll.html
+++ b/debug/map/scroll.html
@ -4,9 +4,10 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
-
+	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
-
+	
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
@ -19,22 +20,16 @@
 		</div>
 	</div>
-	<script>
+	<script type="text/javascript">
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
 			latlng = new L.LatLng(50.5, 30.51);
-
+	
-		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
-
+	
-		var s = '';
+		
 		for (var i = 0; i < 100; i++) s += 'Test<br>';
 		var popup = L.popup({maxHeight: 100})
 			.setContent(s)
 			.setLatLng(latlng)
 			.openOn(map);
 	</script>
 </body>
-</html>
+</html>
--- a/debug/map/simple-proj.html
+++ b/debug/map/simple-proj.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -15,7 +16,7 @@
 	<div id="map"></div>
-	<script>
+	<script type="text/javascript">
 		var map = L.map('map', {
 			crs: L.CRS.Simple
@ -37,21 +38,6 @@
 		L.imageOverlay('http://leafletjs.com/docs/images/logo.png', [[0, 0], [73, 220]]).addTo(map);
 		var grid = L.gridLayer({
 			attribution: 'Grid Layer'
 		});
 		grid.createTile = function (coords) {
 			var tile = document.createElement('div');
 			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
 			tile.style.outline = '1px solid red';
 			tile.style.background = 'white';
 			return tile;
 		};
 		map.addLayer(grid);
 		L.circle([0, 0], 100, {color: 'red'}).addTo(map);
 	</script>
 </body>
--- a/debug/map/tile-debug.html
+++ b/debug/map/tile-debug.html
@ -1,248 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet tile debug</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    #outer {
        position: absolute;
        width: calc(2*256px + 600px);
        height: calc(2*256px + 400px);
        border: 10px solid rgba(0, 0, 255, 0.4);
        background-color: transparent;
    }
    #middle, #map {
        position: absolute;
        margin: calc(266px - 10px);
        width: 600px;
        height: 400px;
        border: 10px solid transparent;
    }
    #middle {
        pointer-events: none;
        z-index: 1000;
        border-color: rgba(0, 255, 0, 0.4);
    }
    #map {
        overflow: visible;
    }
    button {
        width: 40px;
        text-align: center;
        margin-right: 5px;
    }
    .grid {
        border: red 1px solid;
        line-height: 256px;
        text-align: center;
        box-sizing: border-box;
    }
    #stats {
        position: absolute;
        z-index: 1000;
        width: 300px;
        right: 0;
        top: 10px;
        bottom: 0;
    }
    #zoomtable td {
        height: 40px;
    }
    .diag {
        margin-bottom: 20px;
    }
    tr:nth-child(odd) {
        background-color: #eee;
    }
    </style>
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="outer"></div>
    <div id="middle"></div>
    <div id="map"></div>
    <div id="stats">
        <div class="diag">
            <div><button id="dc">DC</button>(flyTo)</div>
            <div><button id="sf">SF</button>(setView)</div>
            <div><button id="trd">TRD</button>(flyTo)</div>
            <div><button id="lnd">LND</button>(fract. zoom)</div>
            <div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
            <div><button id="mad">MAD</button>(fitBounds)</div>
            <div><button id="nul">NUL</button>(image overlay)</div>
            <div><button id="stop">stop</button></div>
        </div>
        <table id="zoomtable" class="diag">
            <tr><td>on movestart</td><td id='movestart' width=230></td></tr>
            <tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
            <tr><td>on move</td><td id='move'></td></tr>
            <tr><td>on moveend</td><td id='moveend'></td></tr>
            <tr><td>on zoomend</td><td id='zoomend'></td></tr>
            <tr><td>on grid load</td><td id='load'></td></tr>
        </table>
        <table>
            <tr>
                <th>event</th>
                <th>Grid</th>
                <th>Positron</th>
            </tr>
            <tr>
                <td>tileloadstart</td>
                <td id='grid-tileloadstart'></td>
                <td id='positron-tileloadstart'></td>
            </tr>
            <tr>
                <td>tileload</td>
                <td id='grid-tileload'></td>
                <td id='positron-tileload'></td>
            </tr>
            <tr>
                <td>tileerror</td>
                <td id='grid-tileerror'></td>
                <td id='positron-tileerror'></td>
            </tr>
            <tr>
                <td>tileunload</td>
                <td id='grid-tileunload'></td>
                <td id='positron-tileunload'></td>
            </tr>
            <tr>
                <td>visible</td>
                <td id='grid-visible'></td>
                <td id='positron-visible'></td>
            </tr>
            <tr>
                <td>grid load</td>
                <td id='grid-load'></td>
                <td id='positron-load'></td>
            </tr>
        </table>
        <button id="reset">reset</button>
    </div>
    <script>
        var kyiv = [50.5, 30.5],
            lnd = [51.51, -0.12],
            sf = [37.77, -122.42],
            dc = [38.91, -77.04],
            trd = [63.41, 10.41],
            madBounds = [[40.70, -4.19], [40.12, -3.31]],
            mad = [40.40, -3.7];
        var map = L.map('map', {
            // zoomSnap: 0,
            // zoomAnimation: false,
            fadeAnimation: false
        }).setView(dc, 16);
        var gridCounts = {},
            positronCounts = {},
            gridLoadData = {};
        resetCounter();
        var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        });
        var grid = L.gridLayer({
            attribution: 'Grid Layer',
            tileSize: L.point(256, 256)
        });
        grid.createTile = function (coords) {
            var tile = L.DomUtil.create('div', 'grid');
            var indexStr = [coords.x, coords.y, coords.z].join(', ');
            if (!(indexStr in gridLoadData)) {
                gridLoadData[indexStr] = 0;
            }
            tile.innerHTML = ++gridLoadData[indexStr];
            // double tile loading alert
            // if (gridLoadData[indexStr] > 1) {
                // alert(indexStr);
            // }
            // more tile loadings -> more red grid tile
            tile.style.backgroundColor = 'rgba(255,0,0,' + (gridLoadData[indexStr] - 1) / 5 + ')';
            return tile;
        };
        grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
            document.getElementById('grid-' + ev.type).innerHTML = ++gridCounts[ev.type];
            document.getElementById('grid-visible').innerHTML = grid._container.querySelectorAll('.leaflet-tile').length;
        });
        positron.on('tileload tileunload tileerror tileloadstart load', function(ev){
            document.getElementById('positron-' + ev.type).innerHTML = ++positronCounts[ev.type];
            document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
        });
        map.addLayer(positron);
        map.addLayer(grid);
        var marker1 = L.marker(kyiv).addTo(map),
            marker2 = L.marker(lnd).addTo(map),
            marker3 = L.marker(dc).addTo(map),
            marker4 = L.marker(sf).addTo(map),
            marker5 = L.marker(trd).addTo(map),
            marker6 = L.marker(mad).addTo(map);
        var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
        document.getElementById('dc').onclick   = function () { map.flyTo(dc,  7, {duration: 40}); };
        document.getElementById('sf').onclick   = function () { map.setView(sf, 10, {duration: 40, animate: true}); };
        document.getElementById('trd').onclick  = function () { map.flyTo(trd, 10, {duration: 40}); };
        document.getElementById('lnd').onclick  = function () { map.flyTo(lnd, 9.25, {duration: 40}); };
        document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25, {duration: 40}); };
        document.getElementById('mad').onclick  = function () { map.fitBounds(madBounds); };
        document.getElementById('nul').onclick  = function () { map.flyTo([0, 0], 10, {duration: 40}); };
        document.getElementById('stop').onclick = function () { map.stop(); };
        document.getElementById('reset').onclick = function () {
            resetCounter();
        }
        function attachMoveEvent(name) {
            map.on(name, function(){
                document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
            });
        }
        attachMoveEvent('movestart');
        attachMoveEvent('zoomstart');
        attachMoveEvent('move');
        attachMoveEvent('moveend');
        attachMoveEvent('zoomend');
        positron.on('load', function(){
            document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
        });
        function resetCounter() {
            var fields = ['tileload', 'tileerror', 'tileloadstart', 'tileunload', 'load', 'visible'];
            for (var i = 0; i < fields.length; i++) {
                gridCounts[fields[i]] = 0;
                positronCounts[fields[i]] = 0;
                document.getElementById('positron-' + fields[i]).innerHTML = 0;
                document.getElementById('grid-' + fields[i]).innerHTML = 0;
            }
        };
    </script>
 </body>
 </html>
--- a/debug/map/tile-opacity.html
+++ b/debug/map/tile-opacity.html
@ -1,31 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
 	<script>
 		var map = new L.Map('map');
 		var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
 			layers: 'nexrad-n0r-900913',
 			format: 'image/png',
 			transparent: true,
 			attribution: "Weather data &copy; 2011 IEM Nexrad",
 			opacity: 0.4
 		});
 		var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
 		map.addLayer(nexrad).fitBounds(bounds);
 	</script>
 </body>
 </html>
--- a/debug/map/tooltip.html
+++ b/debug/map/tooltip.html
@ -1,68 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 	<style type="text/css">
 		.my-div-icon {
 			background-color: goldenrod;
 			text-align: center;
 		}
 		#map {
 			width: 100%;
 		}
 	</style>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var center = [41.2058, 9.4307];
 		var map = L.map('map').setView(center, 13);
 		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 			attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 		}).addTo(map);
 		L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]]).addTo(map).bindTooltip('Default centered polygon tooltip');
 		L.polygon([[41.20, 9.41], [41.20, 9.39], [41.21, 9.40]]).addTo(map).bindTooltip('Polygon tooltip following mouse', {sticky: true});
 		L.polygon([[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]).addTo(map).bindTooltip('Permanent polygon tooltip', {permanent: true});
 		L.marker([41.20, 9.4307]).addTo(map).bindTooltip('tooltip on the left', {direction: 'left'});
 		L.marker([41.206, 9.44]).addTo(map).bindTooltip('click me, I have a popup', {permanent: true, interactive: true}).bindPopup('See?');
 		L.circleMarker([41.206, 9.48], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello Left World', {direction: 'left'});
 		L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello top World', {direction: 'top', permanent: true});
 		L.circleMarker([41.20, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Seems I am centered', {direction: 'center', permanent: true, interactive: true}).bindPopup('Yeah');
 		L.circleMarker([41.195, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Me too', {direction: 'center'}).bindPopup('Yeah');
 		var icon = L.divIcon({
 			className: 'my-div-icon',
 			html: '<p>A div icon</p>',
 			iconSize: [50, 50]
 		});
 		L.marker([41.22, 9.48], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip following mouse', {sticky: true, direction: 'auto'});
 		L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip with custom offset', {direction: 'top', offset: [-25, -25]});
 		L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindTooltip('Draggable marker tooltip', {permanent: true, direction: 'auto'});
 		L.marker([41.19, 9.43]).addTo(map).bindTooltip('Clickable marker tooltip', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); });
 		var marker1 = L.marker([41.18, 9.45], {description: 'Marker 1'});
 		var marker2 = L.marker([41.18, 9.46], {description: 'Marker 2'});
 		var group = new L.FeatureGroup([marker1, marker2]).addTo(map);
 		group.bindTooltip(function (layer) {
 			return 'Group tooltip: ' + layer.options.description;
 		}, {opacity: 0.7});
 		L.marker([41.18, 9.35]).addTo(map).bindTooltip('Top tooltip is top', {permanent: true, direction: 'top'});
 		L.marker([41.173, 9.37]).addTo(map).bindTooltip('Bottom tooltip is weird but ok', {permanent: true, direction: 'bottom'});
 		L.polyline([[41.20, 9.36], [41.205, 9.35], [41.19, 9.34]]).bindTooltip('Polyline tooltip', {permanent: true, direction: 'top'}).addTo(map);
 		L.polygon([[41.21, 9.36], [41.24, 9.35], [41.23, 9.34]]).addTo(map).bindTooltip('Top tooltip following mouse', {sticky: true, direction: 'top'});
 	</script>
 </body>
 </html>
--- a/debug/map/videooverlay.html
+++ b/debug/map/videooverlay.html
@ -1,78 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<meta charset="utf-8" />
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map" style='width:750px; height: 450px;'></div>
 	<button id="populate">Populate with 10 markers</button>
 	<script type="text/javascript">
 		var map = L.map('map');
 		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
 			maxZoom: 18,
 			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
 				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
 				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
 			id: 'mapbox.satellite'
 		}).addTo(map);
 		var videoUrls = [
 			'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
 			'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
 		],
 		bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
 		map.fitBounds(bounds);
 		var overlay = L.videoOverlay(videoUrls, bounds, {
 			opacity: 0.8,
 			interactive: true,
 			autoplay: false
 		});
 		map.addLayer(overlay);
 		overlay.on('dblclick',function (e) {
 			console.log('Double click on image.');
 		});
 		overlay.on('load', function () {
 			var MyPauseControl = L.Control.extend({
 				onAdd: function() {
 					var button = L.DomUtil.create('button');
 					button.innerHTML = '⏸';
 					L.DomEvent.on(button, 'click', function () {
 						overlay.getElement().pause();
 					});
 					return button;
 				}
 			});
 			var MyPlayControl = L.Control.extend({
 				onAdd: function() {
 					var button = L.DomUtil.create('button');
 					button.innerHTML = '⏵';
 					L.DomEvent.on(button, 'click', function () {
 						overlay.getElement().play();
 					});
 					return button;
 				}
 			});
 			var pauseControl = (new MyPauseControl()).addTo(map);
 			var playControl = (new MyPlayControl()).addTo(map);
 		});
 	</script>
 </body>
 </html>
--- a/debug/map/wms-marble.html
+++ b/debug/map/wms-marble.html
@ -4,26 +4,27 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
-
+	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
-
+	
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
-	<script>
+	<script type="text/javascript">
 		var map = new L.Map('map', {crs: L.CRS.EPSG4326});
-
+	
 		var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
 			layers: 'bluemarble',
 			attribution: "Data &copy; NASA Blue Marble, image service by OpenGeo",
-			minZoom: 0,
+			minZoom: 2,
 			maxZoom: 5
 		});
 		map.addLayer(bluemarble).fitWorld();
 	</script>
 </body>
-</html>
+</html>
--- a/debug/map/wms.html
+++ b/debug/map/wms.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
@ -13,13 +14,13 @@
 	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
-	<script>
+	<script type="text/javascript">
 		var map = new L.Map('map');
-		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
-			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer(osmUrl, {attribution: osmAttrib}),
+			cloudmade = new L.TileLayer(cloudmadeUrl, {styleId: 997, attribution: cloudmadeAttribution}),
-			osm2 = L.tileLayer(osmUrl, {attribution: osmAttrib});
+			cloudmade2 = new L.TileLayer(cloudmadeUrl, {styleId: 998, attribution: cloudmadeAttribution});
 		var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
 			layers: 'nexrad-n0r-900913',
@ -31,9 +32,9 @@
 		var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
-		map.addLayer(osm).addLayer(nexrad).fitBounds(bounds);
+		map.addLayer(cloudmade).addLayer(nexrad).fitBounds(bounds);
-		L.control.layers({"CM": osm, "CM2": osm2}, {"NexRad": nexrad}).addTo(map);
+		L.control.layers({"CM": cloudmade, "CM2": cloudmade2}, {"NexRad": nexrad}).addTo(map);
 	</script>
 </body>
 </html>
--- a/debug/map/zoom-delta.html
+++ b/debug/map/zoom-delta.html
@ -1,108 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<meta name="viewport" content="initial-scale=1.0" />
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/mobile.css" />
 	<script src="../leaflet-include.js"></script>
 	<style>
 	.container {
 		float:left; width: 600px; height: 600px;
 		position: relative;
 		border: 1px solid gray;
 	}
 	#map1, #map2 {
 		position:absolute;
 		top:2em;
 		bottom:2em;
 		left:0;
 		right:0;
 	}
 	#zoom1, #zoom2 {
 		position:absolute;
 		bottom:0;
 		left:0;
 		right:0;
 	}
 	</style>
 </head>
 <body>
 	<h1>Zoom delta test.</h1>
 	<p>Zooming with touch zoom, box zoom or flyTo then <code>map.stop()</code> must make the zoom level snap to the value of the <code>zoomSnap</code> option. Zoom interactions (keyboard, mouse wheel, zoom control buttons must change the zoom by the amount in the <code>zoomDelta</code> option.</p>
 	<div>
 		<button id="sf">SF</button>
 		<button id="trd">TRD</button>
 		<button id="stop">stop</button>
 	</div>
 	<div class='container'>
 		Snap: 0.25. Delta: 0.5.
 		<div id="map1"></div>
 		<span id="zoom1"></span>
 	</div>
 	<div class='container'>
 		Snap: 0 (off). Delta: 0.25.
 		<div id="map2"></div>
 		<span id="zoom2"></span>
 	</div>
 	<script>
 		var sf = [37.77, -122.42],
 			trd = [63.41, 10.41];
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			center = L.latLng(63.41, 10.41);
 		var map1 = new L.Map('map1', {
 			center: center,
 			layers: [osm1],
 			zoom: 5,
 			zoomSnap: 0.25,
 			zoomDelta: 0.5,
 			wheelPxPerZoomLevel: 50
 		});
 		var map2 = new L.Map('map2', {
 			center: center,
 			layers: [osm2],
 			zoom: 5,
 			zoomSnap: 0,
 			zoomDelta: 0.25,
 			wheelPxPerZoomLevel: 50
 		});
 		map1.on('zoomend',function(){
 			document.getElementById('zoom1').innerHTML = "Zoom level: " + map1.getZoom();
 		});
 		map2.on('zoomend',function(){
 			document.getElementById('zoom2').innerHTML = "Zoom level: " + map2.getZoom();
 		});
 		document.getElementById('sf').onclick   = function () {
 			map1.flyTo(sf, 10, {duration: 20});
 			map2.flyTo(sf, 10, {duration: 20});
 		};
 		document.getElementById('trd').onclick  = function () {
 			map1.flyTo(trd, 10, {duration: 20});
 			map2.flyTo(trd, 10, {duration: 20});
 		};
 		document.getElementById('stop').onclick = function () {
 			map1.stop();
 			map2.stop();
 		};
 	</script>
 </body>
 </html>
--- a/debug/map/zoom-remain-centered.html
+++ b/debug/map/zoom-remain-centered.html
@ -1,43 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		// Check the 'center' setting of the scroll-wheel, double-click and touch-zoom
 		// handlers
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {minZoom: 14, attribution: osmAttrib}),
 			latlng = new L.LatLng(51.1788409,-1.82618);
 		var map = new L.Map('map', {
 			center: latlng,
 			zoom: 15,
 			layers: [osm],
 			scrollWheelZoom: 'center', // zoom to center regardless where mouse is
 			doubleClickZoom: 'center',
 			touchZoom:       'center'
 		});
 		L.marker(latlng).addTo(map);
 		L.control.scale().addTo(map);
 	</script>
 </body>
 </html>
--- a/debug/map/zoomlevels.html
+++ b/debug/map/zoomlevels.html
@ -4,6 +4,7 @@
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
@ -13,37 +14,29 @@
 	<div id="map"></div>
-	<script>
+	<script type="text/javascript">
 	    // Test that changing between layers with differing zoomlevels also updates
-        // the zoomlevels in the map + also
+        // the zoomlevels in the map + also 
 		function getCloudMadeUrl(styleId) {
 			return 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/' + styleId + '/256/{z}/{x}/{y}.png';
 		}
 		var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
-		var osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+		var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-			osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: osmAttrib, minZoom: 0, maxZoom: 10}).addTo(map),
+			cloudmade = L.tileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution, minZoom: 0, maxZoom: 10}).addTo(map),
-			osm2 = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
+			cloudmade2 = L.tileLayer(getCloudMadeUrl(998), {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
-
+		
 		L.control.layers({
-			'OSM (5-18)': osm2,
+			'CloudMade Pale Dawn (5-18)': cloudmade2,
-			'OSM (0-10)': osm
+			'CloudMade Fresh (0-10)': cloudmade
 		}).addTo(map);
 		L.control.scale().addTo(map);
 		function getRandomLatLng(llbounds) {
 			var s = llbounds.getSouth(),
 			    n = llbounds.getNorth(),
 			    w = llbounds.getWest(),
 			    e = llbounds.getEast();
 			return L.latLng(
 				s + (Math.random() * (n - s)),
 				w + (Math.random() * (e - w))
 			)
 		}
 		for (var i = 0; i < 1000; i++) {
-			L.marker(getRandomLatLng(map.getBounds())).addTo(map);
+			L.marker(getRandomLatLng(map)).addTo(map);
 		}
--- a/debug/map/zoompan.html
+++ b/debug/map/zoompan.html
@ -1,104 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<style>
 	#map {
 		width: 600px;
 		height: 400px;
 	}
 	button {
 		min-width: 3em;
 		text-align: center;
 	}
 	</style>
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<div id="map"></div>
 	<div style="position: absolute; left: 620px; top: 10px; z-index: 500">
 		<div><button id="dc">DC</button>(flyTo)</div>
 		<div><button id="sf">SF</button>(setView, 5 sec)</div>
 		<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
 		<div><button id="lnd">LND</button>(fract. zoom)</div>
 		<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
 		<div><button id="mad">MAD</button>(fitBounds)</div>
 		<div><button id="nul">NUL</button>(image overlay)</div>
 		<div><button id="stop">stop</button></div>
 		<table>
 		<tr><td>on movestart</td><td id='movestart'></td></tr>
 		<tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
 		<tr><td>on move</td><td id='move'></td></tr>
 		<tr><td>on moveend</td><td id='moveend'></td></tr>
 		<tr><td>on zoomend</td><td id='zoomend'></td></tr>
 		<tr><td>on grid load</td><td id='load'></td></tr>
 	</div>
 	<script>
 		var kyiv = [50.5, 30.5],
 			lnd = [51.51, -0.12],
 			sf = [37.77, -122.42],
 			dc = [38.91, -77.04],
 			trd = [63.41, 10.41],
 			madBounds = [[40.70, -4.19], [40.12, -3.31]],
 			mad = [40.40, -3.7];
 		var map = L.map('map', {
            zoomSnap: 0.25
        }).setView(dc, 14);
 		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 		}).addTo(map);
 		var path = new L.Polyline([kyiv, trd, lnd, mad, dc, sf]).addTo(map);
 		var marker1 = L.marker(kyiv).addTo(map),
 			marker2 = L.marker(lnd).addTo(map),
 			marker3 = L.marker(dc).addTo(map),
 			marker4 = L.marker(sf).addTo(map),
 			marker5 = L.marker(trd).addTo(map),
 			marker6 = L.marker(mad).addTo(map);
 		var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
 		document.getElementById('dc').onclick   = function () { map.flyTo(dc,  4); };
 		document.getElementById('sf').onclick   = function () { map.setView(sf, 10, {duration: 5, animate: true}); };
 		document.getElementById('trd').onclick  = function () { map.flyTo(trd, 10, {duration: 20}); };
 		document.getElementById('lnd').onclick  = function () { map.flyTo(lnd, 9.25); };
 		document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
 		document.getElementById('nul').onclick  = function () { map.flyTo([0, 0], 10); };
 		document.getElementById('mad').onclick  = function () { map.fitBounds(madBounds); };
 		document.getElementById('stop').onclick = function () { map.stop(); };
 		function logEvent(e) { console.log(e.type); }
 		function attachMoveEvent(name) {
 			map.on(name, function(){
 				document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
 			});
 		}
 		attachMoveEvent('movestart');
 		attachMoveEvent('zoomstart');
 		attachMoveEvent('move');
 		attachMoveEvent('moveend');
 		attachMoveEvent('zoomend');
 		positron.on('load', function(){
 			document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
 		});
 	</script>
 </body>
 </html>
--- a/debug/tests/add_remove_layers.html
+++ b/debug/tests/add_remove_layers.html
@ -6,8 +6,75 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
    <link rel="stylesheet" href="../css/screen.css" />
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
    <script>
        L_PREFER_CANVAS = true;
        $(document).ready(function() {
            var map;
            var myLayerGroup = new L.LayerGroup();
            initmap();
            function initmap() {
                // set up the map
                map = new L.Map('map');
                // create the tile layer with correct attribution
                var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var osmAttrib = 'Map data © OpenStreetMap contributors';
                var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17, attribution: osmAttrib, detectRetina: true });
                map.addLayer(osm);
                map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
                drawTestLine();
            };
            function drawTestLine() {
                var lat = 51;
                var long = 7;
                for (var i = 0; i < 50; i++) {
                    var myCircle = new L.Circle(new L.LatLng(lat, long),3);
                    myCircle.on('click',
                        function (e) {
                            popup = new L.Popup();
                            popup.setLatLng(this.getLatLng());
                            var popuptxt = "Hello!";
                            alert("I am the click function");
                                    popup.setContent(popuptxt);
                                    map.openPopup(popup);
                        });
                    myLayerGroup.addLayer(myCircle);
                        lat = lat + 0.0001;
                        long = long + 0.0001;
                }
            map.addLayer(myLayerGroup);
            };
            $("#b1").click(function() {
              map.addLayer(myLayerGroup);
            });
            $("#b2").click(function() {
              map.removeLayer(myLayerGroup);
            });
        });
    </script>
    <script src="../leaflet-include.js"></script>
 </head>
@ -17,54 +84,5 @@
        <button type="button" id="b1"> Add Layer</button>
        <button type="button" id="b2"> Remove Layer</button>
    </div>
    <script>
        var map;
        var myLayerGroup = new L.LayerGroup();
        // set up the map
        map = new L.Map('map', {preferCanvas: true});
        // create the tile layer with correct attribution
        var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib = 'Map data © OpenStreetMap contributors';
        var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17, attribution: osmAttrib, detectRetina: true });
        map.addLayer(osm);
        map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
        drawTestLine();
        function drawTestLine() {
            var lat = 51;
            var long = 7;
            for (var i = 0; i < 50; i++) {
                var myCircle = new L.Circle(new L.LatLng(lat, long),3);
                myCircle.on('click',
                    function (e) {
                        popup = new L.Popup();
                        popup.setLatLng(this.getLatLng());
                        var popuptxt = "Hello!";
                        alert("I am the click function");
                                popup.setContent(popuptxt);
                                map.openPopup(popup);
                    });
                myLayerGroup.addLayer(myCircle);
                    lat = lat + 0.0001;
                    long = long + 0.0001;
            }
            map.addLayer(myLayerGroup);
        };
        L.DomEvent.on(L.DomUtil.get('b1'), 'click', function () {
          map.addLayer(myLayerGroup);
        });
        L.DomEvent.on(L.DomUtil.get('b2'), 'click', function () {
          map.removeLayer(myLayerGroup);
        });
    </script>
 </body>
 </html>
--- a/debug/tests/bringtoback.html
+++ b/debug/tests/bringtoback.html
@ -6,16 +6,18 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 	<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
 </head>
 <body>
 	<div id="map"></div>
 	<button id="foo">Click to add layer, then zoom out or in</button>
-	<script>
+	<script type="text/javascript">
 	var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });
@ -24,7 +26,7 @@
 	map.addLayer(demoMap);
-	document.getElementById('foo').addEventListener('click', function() {
+	$('#foo').click(function() {
 		var topoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}';
 	var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
 	map.addLayer(topoMap);
--- a/debug/tests/canvasloop.html
+++ b/debug/tests/canvasloop.html
@ -1,38 +0,0 @@
 <html>
    <head>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <link rel="stylesheet" href="../css/screen.css" />
        <script src="../leaflet-include.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <script>
            //Init a map, and attempt a locate.
            var map = L.map('map', {
                center: [39.84, -96.591],
                zoom: 4,
                preferCanvas: true
            }).locate();
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            var vanillaLayer = new L.LayerGroup();
            map.addLayer(vanillaLayer);
            map.on('moveend',function(e) {
                console.log('moveend fired.')
            });
            //For experiments using setRadius
            var marker = L.circleMarker(map.getCenter(),{radius:30}).addTo(vanillaLayer);
        </script>
    </body>
 </html>
--- a/debug/tests/click_on_canvas.html
+++ b/debug/tests/click_on_canvas.html
@ -6,48 +6,46 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
    <link rel="stylesheet" href="../css/screen.css" />
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
    <script>
        L_PREFER_CANVAS = true;
        $(document).ready(function() {
            var map = L.map('map', {
                minZoom: 1,
                maxZoom: 19,
                center: [51.505, -0.09],
                zoom: 9
            });
            var polygons = new L.FeatureGroup();
            var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
            polygons.addLayer(
            new L.Polyline(
            points, {
                weight: 2,
                opacity: 1,
                smoothFactor: 1,
                color: 'red'
            }));
            polygons.on('click', function(m) {
                // m.layer is the clicked polygon here
                //m.layer.bindPopup('hello!').openPopup();
                console.log(m.layer)
            });
            polygons.addTo(map);
        });
    </script>
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
    <script>
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
        var map = L.map('map', {
            minZoom: 1,
            maxZoom: 19,
            center: [51.505, -0.09],
            zoom: 9,
            layers: [osm],
            preferCanvas: true
        });
        var polygons = new L.FeatureGroup();
        var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
        polygons.addLayer(
        new L.Polyline(
        points, {
            weight: 10,
            opacity: 1,
            smoothFactor: 1,
            color: 'red',
            interactive:true
        }));
        polygons.on('click', function(m) {
            // m.layer is the clicked polygon here
            //m.layer.bindPopup('hello!').openPopup();
            console.log(m.layer)
        });
        polygons.addTo(map);
    </script>
 </body>
 </html>
--- a/debug/tests/click_on_canvas_broken.html
+++ b/debug/tests/click_on_canvas_broken.html
@ -0,0 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet debug page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
    <link rel="stylesheet" href="../css/screen.css" />
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
    <script>
        L_PREFER_CANVAS = true;
        $(document).ready(function() {
            var map = L.map('map', {
                minZoom: 1,
                maxZoom: 19,
                center: [51.505, -0.09],
                zoom: 9
            });
            var polygons = new L.FeatureGroup();
            var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
            polygons.addLayer(
            new L.Polyline(
            points, {
                weight: 2,
                opacity: 1,
                smoothFactor: 1,
                color: 'red'
            }));
            polygons.on('click', function(m) {
                // m.layer is the clicked polygon here
                //m.layer.bindPopup('hello!').openPopup();
                console.log(m.layer)
            });
            polygons.addTo(map);
        });
    </script>
    <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
 </head>
 <body>
    <div id="map"></div>
 </body>
 </html>
--- a/debug/tests/custom-panes.html
+++ b/debug/tests/custom-panes.html
@ -1,69 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 	<style>
 		body { max-width: 1200px }
 		#mapSvg { width: 500px; height: 500px; margin: 20px }
 		#mapCanvas { width: 500px; height: 500px; margin: 20px }
 		.left { float: left; text-align: center }
 		.right { float: right; text-align: center }
 	</style>
 </head>
 <body>
 	<div class="right">
 		<h1>Canvas</h1>
 		<div id="mapCanvas"></div>
 	</div>
 	<div class="left">
 		<h1>SVG</h1>
 		<div id="mapSvg"></div>
 	</div>
 	<script>
 		function makeMap(container, options) {
 			var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 				osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 				osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
 			var map = L.map(container, options)
 				.setView([50.5, 30.51], 15)
 				.addLayer(osm);
 				map.createPane('custom1');
 				map.createPane('custom2');
 				map.getPane('custom1').style.zIndex = 601;
 				map.getPane('custom2').style.zIndex = 701;
 				var panes = ['overlayPane', 'custom1', 'custom2'];
 			function makeFeatures(i) {
 				L.marker([50.505-i*0.005, 30.51]).addTo(map);
 				L.circleMarker([50.505-i*0.005, 30.51], { radius: 30, pane: panes[i] })
 					.bindPopup(function(layer) {
 						return 'Pane: ' + panes[i];
 					})
 					.addTo(map);
 			}
 			for (var i = 0; i < 3; i++)
 				makeFeatures(i);
 		}
 		makeMap('mapSvg');
 		makeMap('mapCanvas', { preferCanvas: true });
 	</script>
 </body>
 </html>
--- a/debug/tests/detached-dom-memory-leak.html
+++ b/debug/tests/detached-dom-memory-leak.html
@ -1,55 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 	<script>
 	var map,
 		mapDiv,
 		osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
 	var recreateMap = function(){
 		// destroy previous map and div
 		if(map) map.remove();	// This will destroy all DOM childs from layers and controls
 		if(mapDiv) mapDiv.parentNode.removeChild(mapDiv); // This will destroy the map div
 		// create new map div
 		var randomDivId = 'mapId' + new Date().getTime();
 		mapDiv = document.createElement('div');
 		mapDiv.id = randomDivId;
 		mapDiv.style.height = '200px';
 		mapDiv.style.width = '200px';
 		document.getElementsByTagName('body')[0].appendChild(mapDiv);
 		// attach map to div
 		map = L.map(randomDivId).setView([51.505, -0.09], 13);
 		map.addLayer(osm);
 	};
 	var interval = null;
 	function start(){
 		interval = window.setInterval(recreateMap, 200);
 	}
 	function stop() {
 		window.clearInterval(interval);
 	}
 	</script>
 </head>
 <body>
 This page will destroy and recreate a map div lots of times. Developer tools shall not display a memory leak.
 <div>
 <button onclick='recreateMap();'>Once</button>
 <button onclick='start();'>Start</button>
 <button onclick='stop();'>Stop</button>
 </div>
 </body>
 </html>
--- a/debug/tests/doubleclick-events-slowdown.html
+++ b/debug/tests/doubleclick-events-slowdown.html
@ -1,82 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="../css/screen.css" />
 	<script src="../leaflet-include.js"></script>
 </head>
 <body>
 	<p>This test is meant for testing the performance of doubleclick event handler in IE. See <a href='https://github.com/Leaflet/Leaflet/issues/4127'>#4127</a> and <a href='https://github.com/Leaflet/Leaflet/issues/2820'>#2820</a></p>
 	<div id="map"></div>
 	<button id="populate">Populate with 100 more markers</button><div id='perf'></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
 		var map = L.map('map')
 				.setView([0, 0], 0)
 				.addLayer(osm);
 		var markers = new L.FeatureGroup();
 		function getEventHandler(i) {
 			return function(ev) { document.getElementById('perf').innerHTML = ('Event on marker ' + i + ': ' + ev.type); }
 		}
 		function getRandomLatLng(llbounds) {
 			var s = llbounds.getSouth(),
 			    n = llbounds.getNorth(),
 			    w = llbounds.getWest(),
 			    e = llbounds.getEast();
 			return L.latLng(
 				s + (Math.random() * (n - s)),
 				w + (Math.random() * (e - w))
 			)
 		}
 		function populate() {
 			var start = performance ? performance.now() : 0;
 			for (var i = 0; i < 100; i++) {
 				L.marker(getRandomLatLng(map.getBounds())).addTo(markers).on('dblclick', getEventHandler(i));
 			}
 			var end = performance ? performance.now() : 0;
 			document.getElementById('perf').innerHTML = 'Adding 100 markers took ' + (end - start) + ' milliseconds.';
 			return false;
 		}
 		markers.addTo(map);
 		populate();
 		L.DomUtil.get('populate').onclick = populate;
 		function logEvent(e) { console.log(e.type); }
 		// map.on('click', logEvent);
 		// map.on('contextmenu', logEvent);
 		// map.on('movestart', logEvent);
 		// map.on('move', logEvent);
 		// map.on('moveend', logEvent);
 		// map.on('zoomstart', logEvent);
 		// map.on('zoomend', logEvent);
 	</script>
 </body>
 </html>
--- a/debug/tests/dragging_and_copyworldjump.html
+++ b/debug/tests/dragging_and_copyworldjump.html
@ -1,57 +0,0 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Leaflet debug page</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
 		<script src="../leaflet-include.js"></script>
 	</head>
 	<body>
 		<p>
 			On the left Map dragging and worldCopyJump are enabled during initialisation.<br>
 			On the right Map worldCopyJump is enabled. Dragging is enabled by clicking the button.
 		</p>
 		<button id="foo">
 			Click to enable dragging on the right map, then dragging around and watch copying
 		</button><br>
 		<div id="map1" style="height: 300px;width: 400px; float:left;"></div>
 		<div id="map2" style="height: 300px;width: 400px; float:left; margin-left: 10px;"></div>
 		<div style="clear:both"></div>
 		<script>
 			function addLayerAndMarker(map) {
 				var layer = new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 					maxZoom : 18
 				}).addTo(map);
 				var marker = L.marker([50.5, 30.5]).addTo(map);
 			}
 			var map1 = new L.Map('map1', {
 				center : new L.LatLng(45.50144, -122.67599),
 				zoom : 0,
 				dragging : true,
 				worldCopyJump : true
 			});
 			var map2 = new L.Map('map2', {
 				center : new L.LatLng(45.50144, -122.67599),
 				zoom : 0,
 				dragging : false,
 				worldCopyJump : true
 			});
 			document.getElementById("foo").addEventListener('click', function() {
 				map2.dragging.enable();
 			});
 			addLayerAndMarker(map1);
 			addLayerAndMarker(map2);
 		</script>
 	</body>
 </html>
--- a/debug/tests/dragging_cursors.html
+++ b/debug/tests/dragging_cursors.html
@ -1,53 +0,0 @@
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Leaflet debug page</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 		<link rel="stylesheet" href="../../dist/leaflet.css" />
 		<link rel="stylesheet" href="../css/screen.css" />
 		<script src="../leaflet-include.js"></script>
 	</head>
 	<body>
 		This page tests if the cursors for dragging the map and the markers behave as expected. The left marker is draggable, the right one is not.
 		<hr>
 		<div>Map dragging enabled:</div>
 		<div id="map1" style="height: 300px;width: 400px; float:left;"></div>
 		<div style="clear:both"></div>
 		<div>Map dragging disabled:</div>
 		<div id="map2" style="height: 300px;width: 400px; float:left;"></div>
 		<script>
 			function addLayerAndMarkers(map) {
 				var layer = new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 					maxZoom : 18
 				}).addTo(map);
 				var draggableMarker = L.marker([20, -120.3], {draggable: true} ).addTo(map);
 				var fixedMarker     = L.marker([50.5, 30.5], {draggable: false}).addTo(map);
 			}
 			var map1 = new L.Map('map1', {
 				center : new L.LatLng(0, -30),
 				zoom : 0,
 				dragging : true,
 			});
 			var map2 = new L.Map('map2', {
 				center : new L.LatLng(0, -30),
 				zoom : 0,
 				dragging : false,
 			});
 			addLayerAndMarkers(map1);
 			addLayerAndMarkers(map2);
 		</script>
 	</body>
 </html>
--- a/debug/tests/event-perf-2.html
+++ b/debug/tests/event-perf-2.html
@ -1,81 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Leaflet debug page</title>
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/screen.css" />
    <script src="../leaflet-include.js"></script>
 </head>
 <body>
    <div id="map"></div>
    <script>
        /*
            Can be used to profile performance of event system.
            Start the test, start CPU profiler. Slowly move the
            mouse around over the map for 20 seconds or so, stop
            profiler and examine times for _on, _off and fire.
        */
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
        var map = L.map('map')
                .setView([50.5, 30.51], 15)
                .addLayer(osm);
        var markers = new L.FeatureGroup().addTo(map),
            markerArr = [];
        var clicks = 0;
        markers.on('click', function(e) {
            clicks++;
        });
        function getRandomLatLng(llbounds) {
            var s = llbounds.getSouth(),
                n = llbounds.getNorth(),
                w = llbounds.getWest(),
                e = llbounds.getEast();
            return L.latLng(
                s + (Math.random() * (n - s)),
                w + (Math.random() * (e - w))
            )
        }
        function shuffleMarkers() {
            var marker;
            if (markerArr.length > 2000) {
                var i = Math.floor(Math.random() * markerArr.length);
                marker = markerArr.splice(i, 1)[0];
                markers.removeLayer(marker);
            } else {
                marker = L.marker(getRandomLatLng(map.getBounds()))
                    .on('mouseover', function() {
                        marker.setZIndexOffset(10000);
                    })
                    .on('mouseout', function() {
                        marker.setZIndexOffset(0);
                    })
                    .addTo(markers);
                markerArr.push(marker);
            }
        }
        while (markerArr.length < 2000) {
            shuffleMarkers();    
        }
        setInterval(shuffleMarkers, 20);
    </script>
 </body>
 </html>
--- a/debug/tests/event-perf.html
+++ b/debug/tests/event-perf.html
@ -1,91 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
    <link rel="stylesheet" href="../../dist/leaflet.css" />
    <script src="../leaflet-include.js"></script>
  <meta charset="utf-8">
  <title>Leaflet test for event adding/firing/removing performance</title>
 </head>
 <body>
  <script>
  function benchmark(name, fn, setup) {
    //warmup
    for (var i = 0; i < 100; i++) {
      if (setup) {
        setup();
      }
      fn();
    }
    var t = 0;
    for (var i = 0; i < 100; i++) {
      if (setup) {
        setup();
      }
      var t0 = performance.now();
      fn();
      t += performance.now() - t0;
    }
    console.log(name, (t / 100) + ' ms/run');
  }
  var fn = function (e) {called += e.count;},
    fns = [],
    called = 0;
  for (var p = 0; p < 1000; p++) {
    fns.push((function(p) { return function(e) { called += p;}; }));
  }
  benchmark('Adding same fn', function() {
    var obj = new L.Evented();
    var t0 = performance.now();
    for (var p = 0; p < 1000; p++) {
      obj.on('test', fn);
    }
  });
  benchmark('Adding different fn', function() {
    var obj = new L.Evented();
    var fn = function () {};
    var t0 = performance.now();
    for (var p = 0; p < 1000; p++) {
      obj.on('test', fns[p]);
    }
  });
  var obj = new L.Evented();
  var fn = function () {};
  var t0 = performance.now();
  for (var p = 0; p < 1000; p++) {
    obj.on('test', (function(p) { return function() { var x = 2 + p; }})(p));
  }
  benchmark('Fire', function() {
    for (var p = 0; p < 1000; p++) {
      obj.fire('test');
    }
  });
  benchmark('Off', function() {
    var obj = new L.Evented();
    var fn = function () {};
    var t0 = performance.now();
    for (var p = 0; p < 1000; p++) {
      obj.on('test', fns[p]);
    }
  }, function() {
    fns = [];
    var obj = new L.Evented();
    var t0 = performance.now();
    for (var p = 0; p < 1000; p++) {
      var fn = (function(p) { return function() { var x = 2 + p; }})(p);
      fns.push(fn);
      obj.on('test', fn);
    }
  });
  </script>
 </body>
 </html>
--- a/debug/tests/mousemove_on_polygons.html
+++ b/debug/tests/mousemove_on_polygons.html
@ -1,106 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet debug page</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<link rel="stylesheet" href="../../dist/leaflet.css" />
 	<link rel="stylesheet" href="../css/screen.css" />
 	<style>
 		.mybox {
 			background-color: red;
 		}
 		td {
 			border: transparent solid 2px;
 		}
 		td.red {
 			border: red solid 2px;
 		}
 		td.updated {
 			border: transparent solid 2px;
 			animation-name: borderfade;
 			animation-duration: 0.5s;
 		}
 		@keyframes borderfade {
 			from {
 				border: red solid 2px;
 			}
 			to {
 				border: transparent solid 2px;
 			}
 		}
 	</style>
 	<script src="../leaflet-include.js"></script>
 	<table>
 	<tr><td>           </td><td>Enter       </td><td>Move       </td><td>Exit       </td><td>Click       </td></tr>
 	<tr><td>Triangle 1:</td><td id='enter1'></td><td id='move1'></td><td id='exit1'></td><td id='click1'></td></tr>
 	<tr><td>Triangle 2:</td><td id='enter2'></td><td id='move2'></td><td id='exit2'></td><td id='click2'></td></tr>
 	<tr><td>Map:       </td><td id='enter3'></td><td id='move3'></td><td id='exit3'></td><td id='click3'></td></tr>
 	</table>
 </head>
 <body>
 	<div id="map"></div>
 	<script>
 		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
 			latlng = new L.LatLng(39.05, 8.40);
 		var map = new L.Map('map', {center: latlng, zoom: 12, layers: [osm]});
 		function update(domid) {
 			return function(){
 				document.getElementById(domid).innerHTML = Date.now();
 				document.getElementById(domid).className = 'red';
 				window.setTimeout(function(){
 					document.getElementById(domid).className = 'updated';
 				},1);
 			}
 		}
 		var polygon = (new L.Polygon([
 			[39, 8.40],
 			[39.10, 8.50],
 			[39.05, 8.30]
 		])).addTo(map).on('mouseover',update('enter1'))
 			.on('mousemove',update('move1'))
 			.on('mouseout',update('exit1'))
 			.on('click',update('click1'))
 			.bindPopup('Triangle 1');
 		var polygon2 = (new L.Polygon([
 			[39.03, 8.30],
 			[39.10, 8.40],
 			[39.00, 8.30]
 		])).addTo(map).on('mouseover',update('enter2'))
 			.on('mousemove',update('move2'))
 			.on('mouseout',update('exit2'))
 			.on('click',update('click2'))
 			.bindPopup('Triangle 2');
 		var marker = new L.Marker(latlng, {draggable: true})
 			.bindPopup('Marker');;
 		map.addLayer(marker);
 // 		map.on('mousemove', function (e) {
 // 			marker.setLatLng(e.latlng);
 // 		});
 		map.on('mouseover',update('enter3'))
 			.on('mousemove',update('move3'))
 			.on('mouseout',update('exit3'))
 			.on('click',update('click3'));
 		// We should be able to move marker around in a fluid way,
 		// plus going over the polygon with no issue.
 	</script>
 </body>
 </html>
--- a/Show More
+++ b/Show More