Compare commits

..

2 Commits

Author SHA1 Message Date
javi
2ccdb9592c fixed IE8 setOpacity 2013-02-13 12:55:22 +01:00
javi
97ce8187fd fixed setOpacity in IE7 and IE8 2013-02-12 18:44:10 +01:00
463 changed files with 20078 additions and 207027 deletions

9
.gitignore vendored
View File

@ -4,16 +4,7 @@ tmp/**/*
.idea
.idea/**/*
*.iml
_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 +1,3 @@
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'
- 0.8

File diff suppressed because it is too large Load Diff

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.),
@ -91,71 +82,21 @@ Please do not commit to the `master` branch, or your unrelated changes will go i
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.
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 +104,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

@ -7,101 +7,20 @@ To use, install Node, then run the following commands in the project root:
npm install
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 run the tests, run "jake test".
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) {
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('Combine and compress Leaflet source files');
task('build', ['lint'], build.build);
desc('Run PhantomJS tests');
task('test', ['lint', 'lintspec'], {async: true}, function () {
task('test', ['lint'], build.test);
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,30 @@
<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!
Let's make the best open-source library for maps that can possibly exist!
[![Build Status](https://travis-ci.org/Leaflet/Leaflet.svg?branch=master)](https://travis-ci.org/Leaflet/Leaflet)
[![Build Status](https://travis-ci.org/Leaflet/Leaflet.png)](https://travis-ci.org/Leaflet/Leaflet)
[Vladimir Agafonkin]: http://agafonkin.com/en
[contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
[features]: http://leafletjs.com/#features
[features]: http://leafletjs.com/features.html
[plugins]: http://leafletjs.com/plugins.html
[well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
[official website]: http://leafletjs.com
[download page]: http://leafletjs.com/download.html

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

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>

184
build/build.js Normal file
View File

@ -0,0 +1,184 @@
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.getFiles = getFiles;
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);
}
};
exports.test = function() {
var testacular = require('testacular'),
testConfig = {configFile : __dirname + '/../spec/testacular.conf.js'};
testConfig.browsers = ['PhantomJS'];
isArgv('--chrome') && testConfig.browsers.push('Chrome');
isArgv('--ff') && testConfig.browsers.push('Firefox');
// will work only with new testacular that supports code coverage (today it's in master)
if (isArgv('--cov')) { // temporary hack until testacular with coverage becomes stable
testacular = require('../node_modules/testacular/lib/index.js'); // use local testacular
testConfig.preprocessors = {
'**/src/**/*.js': 'coverage',
};
testConfig.coverageReporter = {
type : 'html',
dir : 'coverage/'
};
testConfig.reporters = ['coverage'];
}
testacular.server.start(testConfig);
function isArgv(optName){
return process.argv.indexOf(optName) !== -1;
}
}

262
build/deps.js Normal file
View File

@ -0,0 +1,262 @@
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).'
},
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,10 +4,12 @@
<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" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
@ -22,18 +24,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

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

@ -0,0 +1,59 @@
(function() {
function getFiles() {
var memo = {},
files = [],
i, src;
function addFiles(srcs) {
for (var j = 0, len = srcs.length; j < len; j++) {
memo[srcs[j]] = true;
}
}
for (i in deps) {
addFiles(deps[i].src);
}
for (src in memo) {
files.push(src);
}
return files;
}
var scripts = getFiles();
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,30 +4,31 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<script>
<script type="text/javascript">
var tiles = new L.GridLayer();
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 +38,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,34 +4,39 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<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}),
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,11 +4,13 @@
<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">
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
@ -16,15 +18,15 @@
<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),
@ -33,16 +35,10 @@
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,23 +6,25 @@
<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" />
<script type="text/javascript" src="../../build/deps.js"></script>
<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}),
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,11 +4,13 @@
<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">
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
@ -16,51 +18,40 @@
<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);
// 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);

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,36 +6,32 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/mobile.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<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}),
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,9 +4,11 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
@ -19,22 +21,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,18 +4,20 @@
<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">
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
<script type="text/javascript">
var map = L.map('map', {
crs: L.CRS.Simple
@ -37,21 +39,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,22 +4,24 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
<script>
<script type="text/javascript">
var map = new L.Map('map', {crs: L.CRS.EPSG4326});
var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
layers: 'bluemarble',
attribution: "Data &copy; NASA Blue Marble, image service by OpenGeo",
minZoom: 0,
minZoom: 2,
maxZoom: 5
});

View File

@ -4,22 +4,24 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<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 +33,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,46 +4,40 @@
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<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,23 +6,24 @@
<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 src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<div id="buttons">
<button type="button" id="b1"> Add Layer</button>
<button type="button" id="b2"> Remove Layer</button>
</div>
<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', {preferCanvas: true});
map = new L.Map('map');
// create the tile layer with correct attribution
var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
@ -32,6 +33,9 @@
map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
drawTestLine();
};
function drawTestLine() {
var lat = 51;
var long = 7;
@ -56,15 +60,29 @@
long = long + 0.0001;
}
map.addLayer(myLayerGroup);
};
L.DomEvent.on(L.DomUtil.get('b1'), 'click', function () {
$("#b1").click(function() {
map.addLayer(myLayerGroup);
});
L.DomEvent.on(L.DomUtil.get('b2'), 'click', function () {
$("#b2").click(function() {
map.removeLayer(myLayerGroup);
});
});
</script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<div id="buttons">
<button type="button" id="b1"> Add Layer</button>
<button type="button" id="b2"> Remove Layer</button>
</div>
</body>
</html>

View File

@ -6,16 +6,19 @@
<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="../../build/deps.js"></script>
<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 +27,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,26 +6,19 @@
<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>
</head>
<body>
<div id="map"></div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
<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});
L_PREFER_CANVAS = true;
$(document).ready(function() {
var map = L.map('map', {
minZoom: 1,
maxZoom: 19,
center: [51.505, -0.09],
zoom: 9,
layers: [osm],
preferCanvas: true
zoom: 9
});
var polygons = new L.FeatureGroup();
@ -34,11 +27,10 @@
polygons.addLayer(
new L.Polyline(
points, {
weight: 10,
weight: 2,
opacity: 1,
smoothFactor: 1,
color: 'red',
interactive:true
color: 'red'
}));
polygons.on('click', function(m) {
@ -48,6 +40,12 @@
});
polygons.addTo(map);
});
</script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
</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>

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" />
<style>
@ -14,35 +15,34 @@
}
</style>
<script type="text/javascript" src="../../build/deps.js"></script>
<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}),
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]});
//Create a marker, clicking it toggles opacity
var opaqueIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' });
var transparentIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'transparent' });
var marker = new L.Marker(latlng, { icon: opaqueIcon });
var marker = new L.Marker(latlng, { icon: new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' }) });
map.addLayer(marker);
var visible = true;
marker.on('click', function () {
if (visible) {
marker.setOpacity(0.3);
marker.setIcon(transparentIcon)
marker._icon.innerHTML = 'transparent';
} else {
marker.setOpacity(1);
marker.setIcon(opaqueIcon);
marker._icon.innerHTML = 'opaque';
}
visible = !visible;
});

View File

@ -1,35 +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);
L.marker(map.getCenter())
.addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.',{offset:[100,200]})
.openPopup();
</script>
</body>
</html>

View File

@ -1,57 +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="populate">Populate with 10 markers</button>
<script>
var map = L.map('map').setView([36.9, -95.4], 5);
map.on('contextmenu', function (e) {
alert('The map has been right-clicked');
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
var exampleGeoJSON = {
type: 'Polygon',
coordinates: [
[
[-90.0, 35.0],
[-90.0, 45.0],
[-100.0, 45.0],
[-100.0, 35.0]
]
]
};
var geoJsonLayer = L.geoJson(exampleGeoJSON, {
onEachFeature: function (feature, layer) {
layer.on('contextmenu', function (e) {
alert('The GeoJSON layer has been clicked');
});
}
}).addTo(map);
var marker = L.marker([36, -95]).addTo(map);
marker.bindPopup('Right-click me <br> to test contextmenu <br> event capture').openPopup();
</script>
</body>
</html>

View File

@ -1,27 +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: 600px; height: 600px; border: 1px solid #ccc"></div>
<script>
var map = L.map('map').setView( [50, 50], 10);
var marker = L.marker([50, 50], {draggable: true}).addTo(map);
setTimeout(function() {
map.removeLayer(marker);
}, 3000);
</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 type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
</head>
<body>
<div id="map"></div>
<script>
<script type="text/javascript">
var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });

View File

@ -1,36 +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 = L.map('map');
var marker = L.marker([51.5, -0.09])
.bindPopup("<b>Hello world!</b><br />I am a popup.")
.addTo(map);
//.openPopup();
var marker2 = L.marker([51.525, -0.09])
.addTo(map);
map.setView([51.505, -0.09], 13);
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);
var a_popup = L.popup().setContent('Previously created')
marker2.bindPopup(a_popup);
</script>
</body>
</html>

View File

@ -1,39 +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 {
direction: rtl;
}
</style>
</head>
<body>
<p>Click the map to place a popup at the mouse location</p>
<div id="map"></div>
<script>
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
map.on('click', function(e) {
L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
});
</script>
</body>
</html>

View File

@ -1,25 +0,0 @@
<html dir="rtl">
<head>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
<style>
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.on('click', function(e) {
L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
});
</script>
</body>
</html>

View File

@ -1,42 +0,0 @@
<html>
<head>
<title>Test for preservation of Icon DOM element</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: 600px; height: 600px; border: 1px solid #ccc"></div>
<script>
var blueIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif'});
var redIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif'});
var map = L.map('map').setView( [50, 50], 10);
var marker = L.marker([50, 50], {icon: blueIcon, draggable: true});
marker.on('dragstart', function () {
console.log('dragstart');
marker.setIcon(redIcon);
//This is the previous workaround:
//var iconElem = L.DomUtil.get(marker._icon);
//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif';
});
marker.on('dragend', function () {
console.log('dragend');
marker.setIcon(blueIcon);
//This is the previous workaround:
//var iconElem = L.DomUtil.get(marker._icon);
//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif';
});
marker.addTo(map);
</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>
<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
</head>
<body>
<div id="map"></div>
<script>
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 osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17 });
map.addLayer(osm);
map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
var route = L.polyline([
[51, 7.000],
[51.002, 7.004],
[51.004, 7.006]
]).addTo(map).on('click',function(e){console.log('bottom')})
var route2 = L.polyline([
[51, 7.000],
[51.002, 7.004]
],
{ interactive:false,color:'#f00' }
).addTo(map);
// when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
};
</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>
<style>
#map {
margin: 256px;
width: auto;
overflow: visible
}
</style>
</head>
<body>
The CSS in this page makes the boundaries of the GridLayer tiles visible. Tiles which do not overlap the map bounds shall not be shown, even at fractional zoom levels.
<button onclick='map.zoomIn(0.1)'> Zoom + 0.1 </button>
<button onclick='map.zoomOut(0.1)'> Zoom - 0.1 </button>
<div id="map" class="map"></div>
<script>
var mapopts = {
center: [35, -122],
zoom: 5.7,
zoomSnap: 0.1
};
var map = L.map('map', mapopts);
var grid = L.gridLayer({
attribution: 'Grid Layer',
tileSize: L.point(150, 80)
});
grid.createTile = function (coords, done) {
var tile = document.createElement('div');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
tile.style.border = '2px solid red';
// tile.style.background = 'white';
// test async
setTimeout(function () {
done(null, tile);
}, 0);
return tile;
};
map.addLayer(grid);
</script>
</body>
</html>

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