Compare commits

..

No commits in common. "carto" and "gh-pages-master" have entirely different histories.

503 changed files with 24035 additions and 201395 deletions

9
.gitignore vendored
View File

@ -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

View File

@ -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'

File diff suppressed because it is too large Load Diff

View File

View File

@ -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)
5. [Code Coverage](#code-coverage)
6. [Improving Documentation](#improving-documentation)
7. [Code of Conduct](#code-of-conduct)
8. [Thank You](#thank-you)
4. [Improving Documentation](#improving-documentation)
## 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.
You can help the project tremendously by discovering and [reporting bugs](#reporting-bugs);
[improving documentation](#improving-documentation);
helping others on [Stack Overflow](https://stackoverflow.com/questions/tagged/leaflet),
[GIS Stack Exchange](https://gis.stackexchange.com/questions/tagged/leaflet)
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);
tweeting to [@LeafletJS](http://twitter.com/LeafletJS);
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),
[improving documentation](#improving-documentation),
helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
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),
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 then run the following commands in the project root to install dependencies:
To set up the Leaflet build system, install [Node](http://nodejs.org/),
then run the following commands in the project root (with superuser permissions):
```
npm install
```
or, if you prefer [`yarn`](https://yarnpkg.com/) over `npm`:
```
yarn install
npm install -g jake
npm install jshint
npm install uglify-js
```
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
and is automatically generated from a set of HTML and Markdown files by [Jekyll](http://jekyllrb.com/).
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](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),
choose a certain file for editing (e.g. `plugins.md` for the list of Leaflet plugins),
browse the [gh-pages branch](https://github.com/Leaflet/Leaflet/tree/gh-pages),
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
4. Make sure you are in the `master` branch by running `git checkout master`
5. Enter the documentation subdirectory by running `cd docs`
6. Run `jekyll serve --watch`.
7. Open `localhost:4000` in your web browser.
3. Run `jekyll --auto` inside the `Leaflet` folder.
4. Open the website from the `_site` folder.
Now any file changes will be updated when you reload pages automatically.
After committing the changes, just send a pull request.
Now any file changes will be reflected on the generated pages automatically.
After commiting the changes, just send a pull request.
### API documentation
Since Leaflet 1.0.0-rc1, the API documentation in `reference-1.0.0.html` is handled
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.
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`.
It will get merged into the latter when released as stable.
## 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!

141
FAQ.md
View File

@ -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.

View File

@ -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.

View File

@ -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 run the tests, run "jake test". To build the documentation, run "jake docs".
To check the code and build Leaflet from source, run "jake"
For a custom build, open build/build.html in the browser and follow the instructions.
*/
var buildDocs = require('./build/docs'),
git = require('git-rev-sync'),
path = require('path');
var build = require('./build/build.js');
function hint(msg, args) {
return function () {
console.log(msg);
jake.exec('node node_modules/eslint/bin/eslint.js ' + args,
{printStdout: true}, function () {
console.log('\tCheck passed.\n');
complete();
});
};
}
desc('Check Leaflet source for errors with JSHint');
task('lint', build.lint);
// Returns the version string in package.json, plus a semver build metadata if
// this is not an official release
function calculateVersion(officialRelease) {
desc('Combine and compress Leaflet source files');
task('build', ['lint'], build.build);
var version = require('./package.json').version;
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();
});
task('default', ['build']);

View File

@ -1,4 +1,4 @@
Copyright (c) 2010-2017, Vladimir Agafonkin
Copyright (c) 2010-2013, Vladimir Agafonkin
Copyright (c) 2010-2011, CloudMade
All rights reserved.

View File

@ -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.

View File

@ -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**.
Weighing just about 37 KB of gzipped JS code, it has all the mapping [features][] most developers ever need.
Leaflet is a modern open-source JavaScript library for **mobile-friendly interactive maps**.
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 **Leaflet downloads** (including the built master version), check out the [download page][].
For more information, check out the [official website][].
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,
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)
Let's make the best open-source library for maps that can possibly exist!
[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

View File

@ -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

6
_config.yml Normal file
View File

@ -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

199
_layouts/default.html Normal file
View File

@ -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>

View File

@ -1,8 +1,7 @@
---
root: "../../../"
layout: v2
layout: default
root: ../../../
post: true
bodyclass: post-page
---
<p><a href="../../../blog.html">&larr; Back to the list of blog posts</a></p>

9
_layouts/tutorial.html Normal file
View File

@ -0,0 +1,9 @@
---
layout: default
root: ../
tutorial: true
---
<p><a href="../examples.html">&larr; Back to the list of tutorials</a></p>
{{ content }}

View File

@ -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],

View File

@ -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://leaflet.github.io/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]-->
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
<link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://danzel.github.com/Leaflet.markercluster/dist/MarkerCluster.Default.ie.css" /><![endif]-->
<script src="http://danzel.github.com/Leaflet.markercluster/dist/leaflet.markercluster-src.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");

View File

@ -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

View File

@ -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 %}

View File

@ -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>

View File

@ -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"
]
}

243
build/build.html Normal file
View File

@ -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>

155
build/build.js Normal file
View File

@ -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);
}
};

272
build/deps.js Normal file
View File

@ -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;
}

View File

@ -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

View File

@ -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)
```

View File

@ -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;

47
build/hintrc.js Normal file
View File

@ -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
};

View File

@ -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);

View File

@ -1 +0,0 @@
{{{rawmarkdown comments}}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,4 +0,0 @@
{{#each documentables}}
{{{rawmarkdown comments}}}
{{/each}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,7 +0,0 @@
{{#if name ~}}
<h2 id='{{id}}'>{{name}}</h2>
{{~ else ~}}
<span id='{{id}}'></span>
{{/if}}
{{{rawmarkdown comments}}}
{{{supersections}}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,7 +0,0 @@
<section>
<h3 id='{{id}}'>{{name}}</h3>
{{markdown comments}}
{{{sections}}}
{{{inheritances}}}
</section>

View File

@ -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."

View File

@ -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()
]
};

View File

@ -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()
]
};

View File

@ -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" />
@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
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>

View File

@ -1 +0,0 @@
../dist/leaflet-src.js

135
debug/leaflet-include.js Normal file
View File

@ -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);
}

View File

@ -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,21 +14,20 @@
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<script>
<script type="text/javascript">
var tiles = new L.GridLayer();
var tiles = new L.TileLayer.Canvas();
tiles.createTile = function(coords) {
var tile = document.createElement('canvas'),
ctx = tile.getContext('2d');
tile.width = tile.height = 256;
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();
@ -37,8 +37,6 @@
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]});

View File

@ -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>

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
osm2 = new L.TileLayer(osmUrl, {attribution: 'Hello world'});
function getCloudMadeUrl(styleId) {
return 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/' + styleId + '/256/{z}/{x}/{y}.png';
}
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,
'OSM2': osm2
'CloudMade Fresh': cloudmade,
'CloudMade Pale Dawn': cloudmade2
}, {
'Some marker': marker,
'Another marker': marker2

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
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);

View File

@ -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>

View File

@ -1,11 +0,0 @@
<style>
iframe {
position: absolute;
top: 50px;
left: 50px;
width: 500px;
height: 500px;
}
</style>
<iframe src="map.html">
</iframe>

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
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.77394,-74.12544));
new L.LatLng(40.71222,-74.22655),
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,
interactive: true,
attribution: '&copy; A.B.B Corp.'
opacity: 0.5
});
map.addLayer(overlay);
overlay.on('dblclick',function (e) {
console.log('Double click on image.');
});
</script>
</body>
</html>

View File

@ -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>

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
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);

View File

@ -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>

View File

@ -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>

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
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); }
// 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);
// function logEvent(e) { console.log(e.type); }
//
// map.on('movestart', logEvent);
// map.on('move', logEvent);
// map.on('moveend', logEvent);
//
// map.on('zoomstart', logEvent);
// map.on('zoomend', logEvent);
</script>
</body>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -6,6 +6,7 @@
<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" />
@ -15,27 +16,21 @@
<div id="map"></div>
<script>
<script type="text/javascript">
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 cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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" />
@ -19,22 +20,16 @@
</div>
</div>
<script>
<script type="text/javascript">
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 cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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: 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
});

View File

@ -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',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {attribution: osmAttrib}),
osm2 = L.tileLayer(osmUrl, {attribution: osmAttrib});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {styleId: 997, attribution: cloudmadeAttribution}),
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>

View File

@ -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>

View File

@ -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>

View File

@ -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
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',
osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: osmAttrib, 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});
var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = L.tileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution, minZoom: 0, maxZoom: 10}).addTo(map),
cloudmade2 = L.tileLayer(getCloudMadeUrl(998), {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
L.control.layers({
'OSM (5-18)': osm2,
'OSM (0-10)': osm
'CloudMade Pale Dawn (5-18)': cloudmade2,
'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);
}

View File

@ -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>

View File

@ -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>

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

Some files were not shown because too many files have changed in this diff Show More