Compare commits
1 Commits
carto
...
geojson_po
| Author | SHA1 | Date | |
|---|---|---|---|
|
8283346aa1 |
9
.gitignore
vendored
9
.gitignore
vendored
@ -4,16 +4,7 @@ tmp/**/*
|
|||||||
.idea
|
.idea
|
||||||
.idea/**/*
|
.idea/**/*
|
||||||
*.iml
|
*.iml
|
||||||
_site
|
|
||||||
*.sublime-*
|
*.sublime-*
|
||||||
_site
|
_site
|
||||||
dist/*.js
|
dist/*.js
|
||||||
dist/*.map
|
|
||||||
dist/reference.html
|
|
||||||
coverage/
|
coverage/
|
||||||
*.js.html
|
|
||||||
.mailmap
|
|
||||||
bower.json
|
|
||||||
component.json
|
|
||||||
debug/local/
|
|
||||||
Gemfile.lock
|
|
||||||
|
|||||||
27
.travis.yml
27
.travis.yml
@ -1,28 +1,3 @@
|
|||||||
sudo: false
|
|
||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- node
|
- 0.8
|
||||||
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'
|
|
||||||
1144
CHANGELOG.md
1144
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
153
CONTRIBUTING.md
153
CONTRIBUTING.md
@ -4,23 +4,18 @@ Contributing to Leaflet
|
|||||||
1. [Getting Involved](#getting-involved)
|
1. [Getting Involved](#getting-involved)
|
||||||
2. [Reporting Bugs](#reporting-bugs)
|
2. [Reporting Bugs](#reporting-bugs)
|
||||||
3. [Contributing Code](#contributing-code)
|
3. [Contributing Code](#contributing-code)
|
||||||
4. [Running the Tests](#running-the-tests)
|
4. [Improving Documentation](#improving-documentation)
|
||||||
5. [Code Coverage](#code-coverage)
|
|
||||||
6. [Improving Documentation](#improving-documentation)
|
|
||||||
7. [Code of Conduct](#code-of-conduct)
|
|
||||||
8. [Thank You](#thank-you)
|
|
||||||
|
|
||||||
## Getting Involved
|
## Getting Involved
|
||||||
|
|
||||||
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
|
Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
|
||||||
However, they're not the only way to get involved with Leaflet development.
|
However, they're not the only way to get involved with the development of Leaflet.
|
||||||
You can help the project tremendously by discovering and [reporting bugs](#reporting-bugs);
|
You can help the project tremendously by discovering and [reporting bugs](#reporting-bugs),
|
||||||
[improving documentation](#improving-documentation);
|
[improving documentation](#improving-documentation),
|
||||||
helping others on [Stack Overflow](https://stackoverflow.com/questions/tagged/leaflet),
|
helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
|
||||||
[GIS Stack Exchange](https://gis.stackexchange.com/questions/tagged/leaflet)
|
and [GitHub issues](https://github.com/Leaflet/Leaflet/issues),
|
||||||
and [GitHub issues](https://github.com/Leaflet/Leaflet/issues);
|
showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com),
|
||||||
showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com);
|
tweeting to [@LeafletJS](http://twitter.com/LeafletJS)
|
||||||
tweeting to [@LeafletJS](http://twitter.com/LeafletJS);
|
|
||||||
and spreading the word about Leaflet among your colleagues and friends.
|
and spreading the word about Leaflet among your colleagues and friends.
|
||||||
|
|
||||||
## Reporting Bugs
|
## 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,
|
Second, search the already reported issues for similar cases,
|
||||||
and if it's already reported, just add any additional details in the comments.
|
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:
|
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*.
|
* 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.
|
* 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 whether the bug can be reproduced in **other browsers**.
|
||||||
* Check if the bug occurs in the stable version, master, or both.
|
* 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,
|
* *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.
|
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
|
## Contributing Code
|
||||||
|
|
||||||
### Considerations for Accepting Patches
|
### 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
|
So bugfixes, performance optimizations and small improvements that don't add a lot of code
|
||||||
are much more likely to get accepted quickly.
|
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)
|
(either on [GitHub issues](https://github.com/Leaflet/Leaflet/issues)
|
||||||
or [Leaflet UserVoice](http://leaflet.uservoice.com/)),
|
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?
|
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?
|
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
|
### Setting up the Build System
|
||||||
|
|
||||||
The Leaflet build system uses [Node](http://nodejs.org/), and the [Jake](http://jakejs.com/) Javascript build tool.
|
To set up the Leaflet build system, install [Node](http://nodejs.org/),
|
||||||
To set up the Leaflet build system, install Node then run the following commands in the project root to install dependencies:
|
then run the following commands in the project root (with superuser permissions):
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install
|
npm install -g jake
|
||||||
```
|
npm install jshint
|
||||||
or, if you prefer [`yarn`](https://yarnpkg.com/) over `npm`:
|
npm install uglify-js
|
||||||
```
|
|
||||||
yarn install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
You can build minified Leaflet by running `jake` (it will be built from source in the `dist` folder).
|
||||||
|
|
||||||
### Making Changes to Leaflet Source
|
### Making Changes to Leaflet Source
|
||||||
|
|
||||||
If you're not yet familiar with the way GitHub works (forking, pull requests, etc.),
|
If you're not yet familiar with the way GitHub works (forking, pull requests, etc.),
|
||||||
@ -91,7 +82,7 @@ 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.
|
You should also follow the code style and whitespace conventions of the original codebase.
|
||||||
In particular, use tabs for indentation and spaces for alignment.
|
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`
|
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.
|
so that the build system knows about them.
|
||||||
|
|
||||||
@ -99,63 +90,15 @@ Also, please make sure that you have [line endings configured properly](https://
|
|||||||
|
|
||||||
Happy coding!
|
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
|
## Improving Documentation
|
||||||
|
|
||||||
The code of the live Leaflet website that contains all documentation and examples is located in the `docs/` directory of the `master` branch
|
The code of the live Leaflet website that contains all documentation and examples is located in the `gh-pages` branch
|
||||||
and is automatically generated from a set of HTML and Markdown files by [Jekyll](http://jekyllrb.com/).
|
and is automatically generated from a set of HTML and Markdown files by [Jekyll](https://github.com/mojombo/jekyll).
|
||||||
|
|
||||||
The easiest way to make little improvements such as fixing typos without even leaving the browser
|
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:
|
is by editing one of the files with the online GitHub editor:
|
||||||
browse the [`docs/ directory`](https://github.com/Leaflet/Leaflet/tree/master/docs),
|
browse the [gh-pages branch](https://github.com/Leaflet/Leaflet/tree/gh-pages),
|
||||||
choose a certain file for editing (e.g. `plugins.md` for the list of Leaflet plugins),
|
choose a certain file for editing (e.g. `reference.html` for API reference),
|
||||||
click the Edit button, make changes and follow instructions from there.
|
click the Edit button, make changes and follow instructions from there.
|
||||||
Once it gets merged, the changes will immediately appear on the website.
|
Once it gets merged, the changes will immediately appear on the website.
|
||||||
|
|
||||||
@ -163,46 +106,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.
|
1. [Install Ruby](http://www.ruby-lang.org/en/) if don't have it yet.
|
||||||
2. Run `gem install jekyll`.
|
2. Run `gem install jekyll`.
|
||||||
3. Enter the directory where you cloned the Leaflet repository
|
3. Run `jekyll --auto` inside the `Leaflet` folder.
|
||||||
4. Make sure you are in the `master` branch by running `git checkout master`
|
4. Open the website from the `_site` folder.
|
||||||
5. Enter the documentation subdirectory by running `cd docs`
|
|
||||||
6. Run `jekyll serve --watch`.
|
|
||||||
7. Open `localhost:4000` in your web browser.
|
|
||||||
|
|
||||||
Now any file changes will be updated when you reload pages automatically.
|
Now any file changes will be reflected on the generated pages automatically.
|
||||||
After committing the changes, just send a pull request.
|
After commiting the changes, just send a pull request.
|
||||||
|
|
||||||
### API documentation
|
If you need to update documentation according to a new feature that only appeared in the master version (not stable one),
|
||||||
|
you need to make changes to `gh-pages-master` branch instead of `gh-pages`.
|
||||||
Since Leaflet 1.0.0-rc1, the API documentation in `reference-1.0.0.html` is handled
|
It will get merged into the latter when released as stable.
|
||||||
via [Leafdoc](https://github.com/Leaflet/Leafdoc). This means that next to the
|
|
||||||
code for every method, option or property there is a special code comment documenting
|
|
||||||
that feature. In order to edit the API documentation, just edit these comments in the
|
|
||||||
source code.
|
|
||||||
|
|
||||||
In order to generate the documentation, make sure that the development dependencies
|
|
||||||
are installed (run either `npm install` or `yarn install`), then just run
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run docs
|
|
||||||
```
|
|
||||||
|
|
||||||
and you'll find a `.html` file in the `dist/` directory.
|
|
||||||
|
|
||||||
On every release of a new Leaflet version, this file will be generated and copied
|
|
||||||
over to `docs/reference.html` - there is no need to send pull requests with changes to this file to update the API documentation.
|
|
||||||
|
|
||||||
## Code of Conduct
|
|
||||||
|
|
||||||
Everyone is invited to participate in the Leaflet community and related projects:
|
|
||||||
we want to create a welcoming and friendly environment.
|
|
||||||
Harassment of participants or other unethical and unprofessional behavior will not be tolerated in our spaces.
|
|
||||||
The [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/)
|
|
||||||
applies to all projects under the Leaflet organization.
|
|
||||||
Report any issues to agafonkin@gmail.com.
|
|
||||||
|
|
||||||
## Thank You
|
## 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, — helping Leaflet and its community actually makes you AWESOME.
|
||||||
Join [this approved list of awesome people](https://github.com/Leaflet/Leaflet/graphs/contributors)
|
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!
|
and help us push the limits of what's possible with online maps!
|
||||||
|
|||||||
141
FAQ.md
141
FAQ.md
@ -1,141 +0,0 @@
|
|||||||
# Leaflet FAQ
|
|
||||||
|
|
||||||
This is a collection of answers to the most frequently asked questions about Leaflet.
|
|
||||||
|
|
||||||
1. [Data Providers](#data-providers)
|
|
||||||
2. [Commercial Use and Licensing](#commercial-use-and-licensing)
|
|
||||||
3. [Features](#features)
|
|
||||||
4. [Performance](#performance)
|
|
||||||
5. [Misc](#misc)
|
|
||||||
|
|
||||||
## Data Providers
|
|
||||||
|
|
||||||
#### The map is wrong in my neighborhood, could you fix it?
|
|
||||||
|
|
||||||
Nope, but you can.
|
|
||||||
The map you see on Leaflet examples is based on [OpenStreetMap](http://openstreetmap.org),
|
|
||||||
a free editable map of the world.
|
|
||||||
Signing up and editing the map there is easy,
|
|
||||||
and the changes will be reflected on the map in a few minutes.
|
|
||||||
|
|
||||||
#### What map tiles can I use with Leaflet? Is it limited to OpenStreetMap?
|
|
||||||
|
|
||||||
Leaflet is provider-agnostic, meaning you can use any map provider as long as you conform to its terms of use.
|
|
||||||
You can roll your own tiles as well.
|
|
||||||
[OpenStreetMap](http://openstreetmap.org) is the most popular data source among different tile providers,
|
|
||||||
but there are providers that use other sources.
|
|
||||||
|
|
||||||
Check out [this example](http://leaflet-extras.github.io/leaflet-providers/preview/)
|
|
||||||
with over seventy different layers to choose from.
|
|
||||||
Popular commercial options, free up to a particular number of requests, include
|
|
||||||
[MapBox](http://mapbox.com),
|
|
||||||
[Bing Maps](http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx) (using a [plugin](https://github.com/shramov/leaflet-plugins)),
|
|
||||||
[Esri ArcGIS](http://www.esri.com/software/arcgis/arcgisonline/maps/maps-and-map-layers) ([official plugin](https://github.com/Esri/esri-leaflet)),
|
|
||||||
[MapQuest](https://developer.mapquest.com/products) ([official plugins](https://developer.mapquest.com/documentation/leaflet-plugins))
|
|
||||||
and [Here Maps](https://developer.here.com/).
|
|
||||||
|
|
||||||
Always be sure to **read the terms of use** of a chosen tile provider, **know its limitations**, and **attribute it properly** in your app.
|
|
||||||
|
|
||||||
#### I'm looking for satellite imagery to use with my Leaflet map, any options?
|
|
||||||
|
|
||||||
[MapBox](http://mapbox.com),
|
|
||||||
[Bing Maps](http://www.microsoft.com/maps/choose-your-bing-maps-API.aspx),
|
|
||||||
[ArcGIS](http://www.esri.com/software/arcgis/arcgisonline/maps/maps-and-map-layers)
|
|
||||||
and [MapQuest Open](http://developer.mapquest.com/web/products/open/map) provide satellite imagery among others.
|
|
||||||
|
|
||||||
#### I want to use Google Maps API tiles with Leaflet, can I do that?
|
|
||||||
|
|
||||||
The problem with Google is that its [Terms of Use](https://developers.google.com/maps/terms) forbid any means of tile access other than through the Google Maps API.
|
|
||||||
|
|
||||||
You can add the Google Maps API as a Leaflet layer with the [GoogleMutant plugin](https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant). But note that the map experience will not be perfect, because Leaflet must wait for the Google Maps JS engine to load the map tiles, so you might experience glitches and lagging when using it.
|
|
||||||
|
|
||||||
#### I want to roll my own OSM tile server for Leaflet, where do I start?
|
|
||||||
|
|
||||||
Check out [this excellent guide](http://switch2osm.org/serving-tiles/).
|
|
||||||
|
|
||||||
#### I want to create tiles from my own data for use with Leaflet, what are the options?
|
|
||||||
|
|
||||||
There's a number of services that allow you to do this easily,
|
|
||||||
notably [MapBox](https://www.mapbox.com/), [CartoDB](http://cartodb.com/) and [GIS Cloud](http://www.giscloud.com/).
|
|
||||||
If you want to make tiles on your own, probably the easiest way is using [TileMill](https://www.mapbox.com/tilemill/).
|
|
||||||
TileMill can export your map as a single [.mbtiles](https://www.mapbox.com/developers/mbtiles/) file, which can be copied to a webserver and accessed by Leaflet with [a small PHP script](https://github.com/infostreams/mbtiles-php).
|
|
||||||
Alternatively, you can [extract](https://github.com/mapbox/mbutil) the tiled images from the .mbtiles database and place them directly on your webserver with absolutely no server-side dependencies.
|
|
||||||
|
|
||||||
## Commercial Use and Licensing
|
|
||||||
|
|
||||||
#### I have an app that gets lots of hits a day, and I want to switch from Google/Bing/whatever to Leaflet. Is there a fee for using it?
|
|
||||||
|
|
||||||
Leaflet, unlike Google Maps and other all-in-one solutions, is just a JavaScript library.
|
|
||||||
It's free to use, but doesn't provide map imagery on its own —
|
|
||||||
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/) —
|
|
||||||
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.
|
|
||||||
@ -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.
|
|
||||||
97
Jakefile.js
97
Jakefile.js
@ -7,101 +7,20 @@ To use, install Node, then run the following commands in the project root:
|
|||||||
npm install
|
npm install
|
||||||
|
|
||||||
To check the code for errors and build Leaflet from source, run "jake".
|
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.
|
For a custom build, open build/build.html in the browser and follow the instructions.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var buildDocs = require('./build/docs'),
|
var build = require('./build/build.js');
|
||||||
git = require('git-rev-sync'),
|
|
||||||
path = require('path');
|
|
||||||
|
|
||||||
function hint(msg, args) {
|
desc('Check Leaflet source for errors with JSHint');
|
||||||
return function () {
|
task('lint', build.lint);
|
||||||
console.log(msg);
|
|
||||||
jake.exec('node node_modules/eslint/bin/eslint.js ' + args,
|
|
||||||
{printStdout: true}, function () {
|
|
||||||
console.log('\tCheck passed.\n');
|
|
||||||
complete();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Returns the version string in package.json, plus a semver build metadata if
|
desc('Combine and compress Leaflet source files');
|
||||||
// this is not an official release
|
task('build', ['lint'], build.build);
|
||||||
function calculateVersion(officialRelease) {
|
|
||||||
|
|
||||||
var version = require('./package.json').version;
|
|
||||||
|
|
||||||
if (officialRelease) {
|
|
||||||
return version;
|
|
||||||
} else {
|
|
||||||
return version + '+' + git.short();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
desc('Check Leaflet source for errors with ESLint');
|
|
||||||
task('lint', {async: true}, hint('Checking for JS errors...', 'src'));
|
|
||||||
|
|
||||||
desc('Check Leaflet specs source for errors with ESLint');
|
|
||||||
task('lintspec', {async: true}, hint('Checking for specs JS errors...', 'spec/suites'));
|
|
||||||
|
|
||||||
desc('Run PhantomJS tests');
|
desc('Run PhantomJS tests');
|
||||||
task('test', ['lint', 'lintspec'], {async: true}, function () {
|
task('test', ['lint'], build.test);
|
||||||
|
|
||||||
var karma = require('karma'),
|
task('default', ['build']);
|
||||||
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();
|
|
||||||
});
|
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@ -1,4 +1,4 @@
|
|||||||
Copyright (c) 2010-2017, Vladimir Agafonkin
|
Copyright (c) 2010-2013, Vladimir Agafonkin
|
||||||
Copyright (c) 2010-2011, CloudMade
|
Copyright (c) 2010-2011, CloudMade
|
||||||
All rights reserved.
|
All rights reserved.
|
||||||
|
|
||||||
|
|||||||
221
PLUGIN-GUIDE.md
221
PLUGIN-GUIDE.md
@ -1,221 +0,0 @@
|
|||||||
# Leaflet Plugin Authoring Guide
|
|
||||||
|
|
||||||
One of the greatest things about Leaflet is its powerful plugin ecosystem.
|
|
||||||
The [Leaflet plugins page](http://leafletjs.com/plugins.html) lists dozens of awesome plugins, and more are being added every week.
|
|
||||||
|
|
||||||
This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself.
|
|
||||||
|
|
||||||
1. [Presentation](#presentation)
|
|
||||||
- [Repository](#repository)
|
|
||||||
- [Name](#name)
|
|
||||||
- [Demo](#demo)
|
|
||||||
- [Readme](#readme)
|
|
||||||
- [License](#license)
|
|
||||||
2. [Code](#code)
|
|
||||||
- [File Structure](#file-structure)
|
|
||||||
- [Code Conventions](#code-conventions)
|
|
||||||
- [Plugin API](#plugin-api)
|
|
||||||
3. [Publishing on NPM](#publishing-on-npm)
|
|
||||||
4. [Module Loaders](#module-loaders)
|
|
||||||
5. [Adding to the plugins list](#adding-to-the-plugins-list)
|
|
||||||
|
|
||||||
## Presentation
|
|
||||||
|
|
||||||
### Repository
|
|
||||||
|
|
||||||
The best place to put your Leaflet plugin is a separate [GitHub](http://github.com) repository.
|
|
||||||
If you create a collection of plugins for different uses,
|
|
||||||
don't put them in one repo —
|
|
||||||
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 —
|
|
||||||
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 —
|
|
||||||
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 —
|
|
||||||
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.
|
|
||||||
22
README.md
22
README.md
@ -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**.
|
Leaflet is a modern open-source JavaScript library for **mobile-friendly interactive maps**.
|
||||||
Weighing just about 37 KB of gzipped JS code, it has all the mapping [features][] most developers ever need.
|
It is developed by [Vladimir Agafonkin][] with a team of dedicated [contributors][].
|
||||||
|
Weighing just about 27 KB of gzipped JS code, it has all the [features][] most developers ever need for online maps.
|
||||||
|
|
||||||
Leaflet is designed with *simplicity*, *performance* and *usability* in mind.
|
Leaflet is designed with *simplicity*, *performance* and *usability* in mind.
|
||||||
It works efficiently across all major desktop and mobile platforms out of the box,
|
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.
|
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
|
has a beautiful, easy to use and [well-documented][] API
|
||||||
and a simple, readable [source code][] that is a joy to [contribute][] to.
|
and a simple, readable [source code][] that is a joy to [contribute][] to.
|
||||||
|
|
||||||
For more info, docs and tutorials, check out the [official website][].<br>
|
For more information, check out the [official website][].
|
||||||
For **Leaflet downloads** (including the built master version), check out the [download page][].
|
|
||||||
|
|
||||||
We're happy to meet new contributors.
|
We're happy to meet new contributors.
|
||||||
If you want to **get involved** with Leaflet development, check out the [contribution guide][contribute].
|
If you want to **get involved** with Leaflet development, check out the [contribution guide][contribute].
|
||||||
Let's make the best mapping library that will ever exist,
|
Let's make the best open-source library for maps that can possibly exist!
|
||||||
and push the limits of what's possible with online maps!
|
|
||||||
|
|
||||||
[](https://travis-ci.org/Leaflet/Leaflet)
|
[](https://travis-ci.org/Leaflet/Leaflet)
|
||||||
|
|
||||||
|
[Vladimir Agafonkin]: http://agafonkin.com/en
|
||||||
[contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
|
[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
|
[plugins]: http://leafletjs.com/plugins.html
|
||||||
[well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
|
[well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
|
||||||
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
|
[source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
|
||||||
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
|
[hosted on GitHub]: http://github.com/Leaflet/Leaflet
|
||||||
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
|
[contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
|
||||||
[official website]: http://leafletjs.com
|
[official website]: http://leafletjs.com
|
||||||
[download page]: http://leafletjs.com/download.html
|
|
||||||
|
|
||||||
|
|||||||
29
RELEASE.md
29
RELEASE.md
@ -1,29 +0,0 @@
|
|||||||
Documentation for the release process of Leaflet.
|
|
||||||
|
|
||||||
**Please note that you will need to have a git remote called `origin` that points to Leaflet's GitHub repo, since the publish script assumes it**
|
|
||||||
|
|
||||||
1. Make a new release branch (for example named `prepare-X.Y.Z`)
|
|
||||||
2. Make sure you do not have any `package.lock.json` or `yarn.lock` locally, since they can potentially make you build with the wrong package versions
|
|
||||||
3. Update [the changelog](https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md) since last release and commit to the release branch
|
|
||||||
4. Write a blog post about the new release and put in `/docs/_posts` and commit to the release branch
|
|
||||||
5. Bump version number in `package.json` and commit to `master`
|
|
||||||
6. Run `npm run release`
|
|
||||||
7. Verify that the release was correctly published to NPM by checking:
|
|
||||||
* [Leaflet NPM package page](https://www.npmjs.com/package/leaflet)
|
|
||||||
* files on [Leaflet unpkg page](https://unpkg.com/leaflet@latest/)
|
|
||||||
8. Update API docs:
|
|
||||||
* run `npm run docs`
|
|
||||||
* Copy the built docs from `dist/reference-X.Y.Z.html` to `docs/reference-X.Y.Z.html`
|
|
||||||
* Update the built docs header to use Jekyll style; see commit [11d716f0964d8bc0d058ca09e9ba8003451b4b8d](https://github.com/Leaflet/Leaflet/commit/11d716f0964d8bc0d058ca09e9ba8003451b4b8d) as reference for the needed changes
|
|
||||||
* Commit the new docs to the release branch
|
|
||||||
9. Update `docs/reference.html` to redirect to the new version and commit the change to the release branch
|
|
||||||
10. Update integrity hashes:
|
|
||||||
* Checkout the release tag (`git checkout vX.Y.Z`)
|
|
||||||
* Run `npm run integrity` or simply `node ./build/integrity.js` if you're not on Debian
|
|
||||||
* Copy the hashes and update `integrity_hash_css`, `integrity_hash_source` and `integrity_hash_uglified` in `docs/_config.yml`; commit changes to the release branch
|
|
||||||
11. Update link to latest release in `docs/download.html`, and commit to the release branch
|
|
||||||
12. Add link to new version reference in `docs/reference-versions.html`, and commit to the release branch
|
|
||||||
13. Update `latest_leaflet_version` in `docs/_config.yml` and commit to the release branch
|
|
||||||
14. Update the announcement section in `docs/index.html` and commit to the release branch
|
|
||||||
15. If it looks like everything is good at this point, merge the release branch into `master`
|
|
||||||
16. Make a new release on [Leaflet's GitHub release page](https://github.com/Leaflet/Leaflet/releases/) with the most important parts of the changelog
|
|
||||||
18
bower.json
18
bower.json
@ -1,18 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "leaflet",
|
|
||||||
"description": "JavaScript library for mobile-friendly interactive maps",
|
|
||||||
"license": "BSD-2-Clause",
|
|
||||||
"main": [
|
|
||||||
"dist/leaflet.css",
|
|
||||||
"dist/leaflet-src.js"
|
|
||||||
],
|
|
||||||
"ignore": [
|
|
||||||
".*",
|
|
||||||
"CHANGELOG.json",
|
|
||||||
"FAQ.md",
|
|
||||||
"debug",
|
|
||||||
"spec",
|
|
||||||
"src",
|
|
||||||
"build"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
243
build/build.html
Normal file
243
build/build.html
Normal 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
184
build/build.js
Normal 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, i ? {L: true} : null);
|
||||||
|
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
262
build/deps.js
Normal 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', 'layer/tile/TileLayer.Anim.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;
|
||||||
|
}
|
||||||
@ -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
|
|
||||||
@ -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)
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
@ -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
47
build/hintrc.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
exports.config = {
|
||||||
|
"browser": true,
|
||||||
|
"node": true,
|
||||||
|
"predef": [],
|
||||||
|
|
||||||
|
"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
|
||||||
|
};
|
||||||
@ -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);
|
|
||||||
@ -1 +0,0 @@
|
|||||||
{{{rawmarkdown comments}}}
|
|
||||||
@ -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><{{{type type}}}></nobr> {{/if}}<i>{{name}}</i>
|
|
||||||
{{~#unless @last}}, {{/unless}}{{/each~}}
|
|
||||||
)</nobr></code></td>
|
|
||||||
<td>{{{markdown comments}}}</td>
|
|
||||||
</tr>
|
|
||||||
{{/each}}
|
|
||||||
</tbody></table>
|
|
||||||
@ -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>
|
|
||||||
@ -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><{{{type type}}}></nobr> {{/if}}<i>{{name}}</i>
|
|
||||||
{{~#unless @last}}, {{/unless}}{{/each~}}
|
|
||||||
)</nobr></code></td>
|
|
||||||
<td>{{{markdown comments}}}</td>
|
|
||||||
</tr>
|
|
||||||
{{/each}}
|
|
||||||
</tbody></table>
|
|
||||||
@ -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>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
|
|
||||||
{{#each documentables}}
|
|
||||||
{{{rawmarkdown comments}}}
|
|
||||||
{{/each}}
|
|
||||||
@ -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><{{{type type}}}></nobr> {{/if}}<i>{{name}}</i>
|
|
||||||
{{~#unless @last}}, {{/unless}}{{/each~}}
|
|
||||||
)</nobr></code></td>
|
|
||||||
<td>{{{markdown comments}}}</td>
|
|
||||||
</tr>
|
|
||||||
{{/each}}
|
|
||||||
</tbody></table>
|
|
||||||
@ -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><{{{type type}}}></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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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><{{{type type}}}></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>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{{#if name ~}}
|
|
||||||
<h2 id='{{id}}'>{{name}}</h2>
|
|
||||||
{{~ else ~}}
|
|
||||||
<span id='{{id}}'></span>
|
|
||||||
{{/if}}
|
|
||||||
{{{rawmarkdown comments}}}
|
|
||||||
{{{supersections}}}
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<section>
|
|
||||||
<h3 id='{{id}}'>{{name}}</h3>
|
|
||||||
{{markdown comments}}
|
|
||||||
{{{sections}}}
|
|
||||||
|
|
||||||
{{{inheritances}}}
|
|
||||||
</section>
|
|
||||||
@ -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."
|
|
||||||
@ -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()
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -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()
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -4,10 +4,12 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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">
|
<meta name="viewport" content="width=device-width,initial-scale=1 maximum-scale=1.0 user-scalable=0">
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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
|
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>
|
</div>
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
maxZoom: 18,
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
|
key: 'BC9A493B41014CAABB98F0471D759707'
|
||||||
|
});
|
||||||
|
|
||||||
//Disable the hack fix
|
//Disable the hack fix
|
||||||
L.Browser.chrome = true;
|
L.Browser.chrome = true;
|
||||||
|
|
||||||
var map = L.map('map')
|
var map = L.map('map')
|
||||||
.setView([50.5, 30.51], 15)
|
.setView([50.5, 30.51], 15)
|
||||||
.addLayer(osm);
|
.addLayer(cloudmade);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
../dist/leaflet-src.js
|
|
||||||
59
debug/leaflet-include.js
Normal file
59
debug/leaflet-include.js
Normal 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);
|
||||||
|
}
|
||||||
@ -4,30 +4,31 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
|
<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) {
|
tiles.drawTile = function(canvas, tile, zoom) {
|
||||||
var tile = document.createElement('canvas'),
|
var ctx = canvas.getContext('2d');
|
||||||
ctx = tile.getContext('2d');
|
|
||||||
|
|
||||||
tile.width = tile.height = 256;
|
|
||||||
|
|
||||||
ctx.fillStyle = 'white';
|
ctx.fillStyle = 'white';
|
||||||
ctx.fillRect(0, 0, 255, 255);
|
ctx.fillRect(0, 0, 255, 255);
|
||||||
|
|
||||||
|
|
||||||
ctx.fillStyle = 'black';
|
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.strokeStyle = 'red';
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
@ -37,8 +38,6 @@
|
|||||||
ctx.lineTo(0, 255);
|
ctx.lineTo(0, 255);
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
||||||
return tile;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
|
var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
|
||||||
|
|||||||
@ -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: '© <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: '© <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>
|
|
||||||
@ -4,34 +4,39 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
function getCloudMadeUrl(styleId) {
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
return 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/' + styleId + '/256/{z}/{x}/{y}.png';
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
}
|
||||||
osm2 = new L.TileLayer(osmUrl, {attribution: 'Hello world'});
|
|
||||||
|
|
||||||
var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(50.5, 30.512), 15);
|
var cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 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);
|
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));
|
var marker2 = new L.Marker(new L.LatLng(50.502, 30.515));
|
||||||
map.addLayer(marker2);
|
map.addLayer(marker2);
|
||||||
|
|
||||||
var layersControl = new L.Control.Layers({
|
var layersControl = new L.Control.Layers({
|
||||||
'OSM': osm,
|
'CloudMade Fresh': cloudmade,
|
||||||
'OSM2': osm2
|
'CloudMade Pale Dawn': cloudmade2
|
||||||
}, {
|
}, {
|
||||||
'Some marker': marker,
|
'Some marker': marker,
|
||||||
'Another marker': marker2
|
'Another marker': marker2
|
||||||
|
|||||||
@ -4,23 +4,25 @@
|
|||||||
<title>Leaflet geolocation debug page</title>
|
<title>Leaflet geolocation debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||||
|
|
||||||
var map = new L.Map('map', {zoom: 15, layers: [osm]});
|
var map = new L.Map('map', {zoom: 15, layers: [cloudmade]});
|
||||||
|
|
||||||
function logEvent(e) { console.log(e.type); }
|
function logEvent(e) { console.log(e.type); }
|
||||||
map.on('locationerror', logEvent);
|
map.on('locationerror', logEvent);
|
||||||
|
|||||||
@ -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>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<style>
|
|
||||||
iframe {
|
|
||||||
position: absolute;
|
|
||||||
top: 50px;
|
|
||||||
left: 50px;
|
|
||||||
width: 500px;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<iframe src="map.html">
|
|
||||||
</iframe>
|
|
||||||
@ -4,11 +4,13 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -16,15 +18,15 @@
|
|||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<button id="populate">Populate with 10 markers</button>
|
<button id="populate">Populate with 10 markers</button>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||||
latlng = new L.LatLng(50.5, 30.51);
|
latlng = new L.LatLng(50.5, 30.51);
|
||||||
|
|
||||||
var map = new L.Map('map');
|
var map = new L.Map('map');
|
||||||
map.addLayer(osm);
|
map.addLayer(cloudmade);
|
||||||
|
|
||||||
var bounds = new L.LatLngBounds(
|
var bounds = new L.LatLngBounds(
|
||||||
new L.LatLng(40.71222,-74.22655),
|
new L.LatLng(40.71222,-74.22655),
|
||||||
@ -33,16 +35,10 @@
|
|||||||
map.fitBounds(bounds);
|
map.fitBounds(bounds);
|
||||||
|
|
||||||
var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
|
var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
|
||||||
opacity: 0.5,
|
opacity: 0.5
|
||||||
interactive: true,
|
|
||||||
attribution: '© A.B.B Corp.'
|
|
||||||
});
|
});
|
||||||
map.addLayer(overlay);
|
map.addLayer(overlay);
|
||||||
|
|
||||||
overlay.on('dblclick',function (e) {
|
|
||||||
console.log('Double click on image.');
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,37 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="map"></div>
|
|
||||||
<button id="removeAdd">Remove and Add Layer</button>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
|
|
||||||
|
|
||||||
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
|
||||||
attribution: '© <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>
|
|
||||||
@ -6,23 +6,25 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/mobile.css" />
|
<link rel="stylesheet" href="../css/mobile.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||||
latlng = new L.LatLng(50.5, 30.51);
|
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);
|
var marker = new L.Marker(latlng);
|
||||||
map.addLayer(marker);
|
map.addLayer(marker);
|
||||||
|
|||||||
@ -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 = '© <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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -4,11 +4,13 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -16,51 +18,40 @@
|
|||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<button id="populate">Populate with 10 markers</button>
|
<button id="populate">Populate with 10 markers</button>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
maxZoom: 18,
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
|
key: 'BC9A493B41014CAABB98F0471D759707'
|
||||||
|
});
|
||||||
|
|
||||||
var map = L.map('map')
|
var map = L.map('map')
|
||||||
.setView([50.5, 30.51], 15)
|
.setView([50.5, 30.51], 15)
|
||||||
.addLayer(osm);
|
.addLayer(cloudmade);
|
||||||
|
|
||||||
var markers = new L.FeatureGroup();
|
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() {
|
function populate() {
|
||||||
for (var i = 0; i < 10; i++) {
|
for (var i = 0; i < 10; i++) {
|
||||||
L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
|
markers.addLayer(new L.Marker(getRandomLatLng(map)));
|
||||||
}
|
}
|
||||||
return false;
|
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();
|
populate();
|
||||||
L.DomUtil.get('populate').onclick = populate;
|
L.DomUtil.get('populate').onclick = populate;
|
||||||
|
|
||||||
function logEvent(e) { console.log(e.type); }
|
// function logEvent(e) { console.log(e.type); }
|
||||||
|
//
|
||||||
// map.on('click', logEvent);
|
|
||||||
// map.on('contextmenu', logEvent);
|
|
||||||
|
|
||||||
// map.on('movestart', logEvent);
|
// map.on('movestart', logEvent);
|
||||||
// map.on('move', logEvent);
|
// map.on('move', logEvent);
|
||||||
// map.on('moveend', logEvent);
|
// map.on('moveend', logEvent);
|
||||||
|
//
|
||||||
// map.on('zoomstart', logEvent);
|
// map.on('zoomstart', logEvent);
|
||||||
// map.on('zoomend', logEvent);
|
// map.on('zoomend', logEvent);
|
||||||
|
|
||||||
|
|||||||
@ -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: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
||||||
}).addTo(map);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="map"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
|
|
||||||
|
|
||||||
var markerStatic = new L.Marker([0, -10], {
|
|
||||||
draggable: false,
|
|
||||||
title: 'Static'
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer(markerStatic);
|
|
||||||
markerStatic.bindPopup("Static");
|
|
||||||
|
|
||||||
|
|
||||||
var markerDraggable = new L.Marker([0, 10], {
|
|
||||||
title: 'Draggable'
|
|
||||||
});
|
|
||||||
|
|
||||||
map.addLayer(markerDraggable);
|
|
||||||
markerDraggable.bindPopup("Draggable");
|
|
||||||
markerDraggable.dragging.enable();
|
|
||||||
|
|
||||||
var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
|
|
||||||
map.addLayer(poly);
|
|
||||||
poly.bindPopup("Polygon");
|
|
||||||
|
|
||||||
|
|
||||||
markerDraggable.on('click', function(e) {
|
|
||||||
console.log('markerDraggable click');
|
|
||||||
});
|
|
||||||
markerStatic.on('click', function(e) {
|
|
||||||
console.log('markerStatic click');
|
|
||||||
})
|
|
||||||
map.on('click', function(e) {
|
|
||||||
console.log('map click');
|
|
||||||
});
|
|
||||||
|
|
||||||
poly.on('click', function(e) {
|
|
||||||
console.log('poly click');
|
|
||||||
});
|
|
||||||
|
|
||||||
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
|
||||||
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
||||||
}).addTo(map);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/mobile.css" />
|
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>
|
|
||||||
|
|
||||||
<div id="map1" style="float: left; width:45%; height: 80%;"></div>
|
|
||||||
<div id="map2" style="float: left; width:45%; height: 80%;"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
||||||
osmAttrib = '© <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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -6,36 +6,32 @@
|
|||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/mobile.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||||
bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
|
bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
|
||||||
|
|
||||||
var map = new L.Map('map', {
|
var map = new L.Map('map', {
|
||||||
center: bounds.getCenter(),
|
center: bounds.getCenter(),
|
||||||
zoom: 7,
|
zoom: 7,
|
||||||
layers: [osm],
|
layers: [cloudmade],
|
||||||
maxBounds: bounds
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,197 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
<style>
|
|
||||||
.mapcontainer {
|
|
||||||
float:left;
|
|
||||||
position: relative;
|
|
||||||
width: 32%;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
height: 340px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
background-color: #eee;
|
|
||||||
margin-right: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 280px;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>These should all render identically.</p>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 1: no opacity set on any layers
|
|
||||||
<br />
|
|
||||||
<div id="map1" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 2: opacity set to .99 on overlays but not on basemap
|
|
||||||
<br />
|
|
||||||
<div id="map2" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
|
|
||||||
<br />
|
|
||||||
<div id="map3" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 4: opacity set to .99 on overlays but set to 1 on basemap
|
|
||||||
<br />
|
|
||||||
<div id="map4" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 5: opacity set to .99 on all layers
|
|
||||||
<br />
|
|
||||||
<div id="map5" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapcontainer">
|
|
||||||
CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
|
|
||||||
<br />
|
|
||||||
<div id="map6" class="map"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var mapopts = {
|
|
||||||
center: [35, -122],
|
|
||||||
zoom : 5
|
|
||||||
};
|
|
||||||
|
|
||||||
var map1 = L.map('map1', mapopts);
|
|
||||||
var map2 = L.map('map2', mapopts);
|
|
||||||
var map3 = L.map('map3', mapopts);
|
|
||||||
var map4 = L.map('map4', mapopts);
|
|
||||||
var map5 = L.map('map5', mapopts);
|
|
||||||
var map6 = L.map('map6', mapopts);
|
|
||||||
|
|
||||||
/**********
|
|
||||||
CASE 1: no opacity set on any layers
|
|
||||||
**********/
|
|
||||||
// OSM Basemap
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
||||||
osmAttrib = '© <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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -4,9 +4,11 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -19,22 +21,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||||
latlng = new L.LatLng(50.5, 30.51);
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -4,18 +4,20 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var map = L.map('map', {
|
var map = L.map('map', {
|
||||||
crs: L.CRS.Simple
|
crs: L.CRS.Simple
|
||||||
@ -37,21 +39,6 @@
|
|||||||
|
|
||||||
L.imageOverlay('http://leafletjs.com/docs/images/logo.png', [[0, 0], [73, 220]]).addTo(map);
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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>
|
|
||||||
@ -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 © 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>
|
|
||||||
@ -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: '© <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>
|
|
||||||
@ -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 © <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>
|
|
||||||
@ -4,22 +4,24 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
|
<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 map = new L.Map('map', {crs: L.CRS.EPSG4326});
|
||||||
|
|
||||||
var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
|
var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
|
||||||
layers: 'bluemarble',
|
layers: 'bluemarble',
|
||||||
attribution: "Data © NASA Blue Marble, image service by OpenGeo",
|
attribution: "Data © NASA Blue Marble, image service by OpenGeo",
|
||||||
minZoom: 0,
|
minZoom: 2,
|
||||||
maxZoom: 5
|
maxZoom: 5
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -4,22 +4,24 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
|
<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 map = new L.Map('map');
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {attribution: osmAttrib}),
|
cloudmade = new L.TileLayer(cloudmadeUrl, {styleId: 997, attribution: cloudmadeAttribution}),
|
||||||
osm2 = L.tileLayer(osmUrl, {attribution: osmAttrib});
|
cloudmade2 = new L.TileLayer(cloudmadeUrl, {styleId: 998, attribution: cloudmadeAttribution});
|
||||||
|
|
||||||
var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
|
var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
|
||||||
layers: 'nexrad-n0r-900913',
|
layers: 'nexrad-n0r-900913',
|
||||||
@ -31,9 +33,9 @@
|
|||||||
|
|
||||||
var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,108 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="initial-scale=1.0" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/mobile.css" />
|
|
||||||
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
float:left; width: 600px; height: 600px;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid gray;
|
|
||||||
}
|
|
||||||
#map1, #map2 {
|
|
||||||
position:absolute;
|
|
||||||
top:2em;
|
|
||||||
bottom:2em;
|
|
||||||
left:0;
|
|
||||||
right:0;
|
|
||||||
}
|
|
||||||
#zoom1, #zoom2 {
|
|
||||||
position:absolute;
|
|
||||||
bottom:0;
|
|
||||||
left:0;
|
|
||||||
right:0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1>Zoom delta test.</h1>
|
|
||||||
|
|
||||||
<p>Zooming with touch zoom, box zoom or flyTo then <code>map.stop()</code> must make the zoom level snap to the value of the <code>zoomSnap</code> option. Zoom interactions (keyboard, mouse wheel, zoom control buttons must change the zoom by the amount in the <code>zoomDelta</code> option.</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button id="sf">SF</button>
|
|
||||||
<button id="trd">TRD</button>
|
|
||||||
<button id="stop">stop</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='container'>
|
|
||||||
Snap: 0.25. Delta: 0.5.
|
|
||||||
<div id="map1"></div>
|
|
||||||
<span id="zoom1"></span>
|
|
||||||
</div>
|
|
||||||
<div class='container'>
|
|
||||||
Snap: 0 (off). Delta: 0.25.
|
|
||||||
<div id="map2"></div>
|
|
||||||
<span id="zoom2"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var sf = [37.77, -122.42],
|
|
||||||
trd = [63.41, 10.41];
|
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
||||||
osmAttrib = '© <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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -4,46 +4,40 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
// Test that changing between layers with differing zoomlevels also updates
|
// Test that changing between layers with differing zoomlevels also updates
|
||||||
// the zoomlevels in the map + also
|
// the zoomlevels in the map + also
|
||||||
|
|
||||||
|
function getCloudMadeUrl(styleId) {
|
||||||
|
return 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/' + styleId + '/256/{z}/{x}/{y}.png';
|
||||||
|
}
|
||||||
|
|
||||||
var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
|
var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
|
||||||
|
|
||||||
var osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
var cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: osmAttrib, minZoom: 0, maxZoom: 10}).addTo(map),
|
cloudmade = L.tileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution, minZoom: 0, maxZoom: 10}).addTo(map),
|
||||||
osm2 = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
|
cloudmade2 = L.tileLayer(getCloudMadeUrl(998), {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
|
||||||
|
|
||||||
L.control.layers({
|
L.control.layers({
|
||||||
'OSM (5-18)': osm2,
|
'CloudMade Pale Dawn (5-18)': cloudmade2,
|
||||||
'OSM (0-10)': osm
|
'CloudMade Fresh (0-10)': cloudmade
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
L.control.scale().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++) {
|
for (var i = 0; i < 1000; i++) {
|
||||||
L.marker(getRandomLatLng(map.getBounds())).addTo(map);
|
L.marker(getRandomLatLng(map)).addTo(map);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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>
|
|
||||||
@ -6,23 +6,24 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<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>
|
<script>
|
||||||
|
L_PREFER_CANVAS = true;
|
||||||
|
$(document).ready(function() {
|
||||||
var map;
|
var map;
|
||||||
var myLayerGroup = new L.LayerGroup();
|
var myLayerGroup = new L.LayerGroup();
|
||||||
|
|
||||||
|
initmap();
|
||||||
|
|
||||||
|
|
||||||
|
function initmap() {
|
||||||
|
|
||||||
// set up the map
|
// set up the map
|
||||||
map = new L.Map('map', {preferCanvas: true});
|
map = new L.Map('map');
|
||||||
|
|
||||||
// create the tile layer with correct attribution
|
// create the tile layer with correct attribution
|
||||||
var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
var osmUrl = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||||
@ -32,6 +33,9 @@
|
|||||||
map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
|
map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
|
||||||
drawTestLine();
|
drawTestLine();
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
function drawTestLine() {
|
function drawTestLine() {
|
||||||
var lat = 51;
|
var lat = 51;
|
||||||
var long = 7;
|
var long = 7;
|
||||||
@ -56,15 +60,29 @@
|
|||||||
long = long + 0.0001;
|
long = long + 0.0001;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
map.addLayer(myLayerGroup);
|
map.addLayer(myLayerGroup);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
L.DomEvent.on(L.DomUtil.get('b1'), 'click', function () {
|
$("#b1").click(function() {
|
||||||
map.addLayer(myLayerGroup);
|
map.addLayer(myLayerGroup);
|
||||||
});
|
});
|
||||||
L.DomEvent.on(L.DomUtil.get('b2'), 'click', function () {
|
|
||||||
|
$("#b2").click(function() {
|
||||||
map.removeLayer(myLayerGroup);
|
map.removeLayer(myLayerGroup);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
});
|
||||||
</script>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -6,16 +6,19 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
|
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<button id="foo">Click to add layer, then zoom out or in</button>
|
<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 });
|
var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });
|
||||||
|
|
||||||
@ -24,7 +27,7 @@
|
|||||||
|
|
||||||
map.addLayer(demoMap);
|
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 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: © Esri' });
|
var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: © Esri' });
|
||||||
map.addLayer(topoMap);
|
map.addLayer(topoMap);
|
||||||
|
|||||||
@ -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: '© <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>
|
|
||||||
@ -6,26 +6,24 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
L_PREFER_CANVAS = true;
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
$(document).ready(function() {
|
||||||
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 © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
|
||||||
|
|
||||||
var map = L.map('map', {
|
var map = L.map('map', {
|
||||||
minZoom: 1,
|
minZoom: 1,
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
center: [51.505, -0.09],
|
center: [51.505, -0.09],
|
||||||
zoom: 9,
|
zoom: 9,
|
||||||
layers: [osm],
|
layers: [cloudmade]
|
||||||
preferCanvas: true
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var polygons = new L.FeatureGroup();
|
var polygons = new L.FeatureGroup();
|
||||||
@ -38,7 +36,7 @@
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
smoothFactor: 1,
|
smoothFactor: 1,
|
||||||
color: 'red',
|
color: 'red',
|
||||||
interactive:true
|
clickable:true
|
||||||
}));
|
}));
|
||||||
|
|
||||||
polygons.on('click', function(m) {
|
polygons.on('click', function(m) {
|
||||||
@ -48,6 +46,14 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
polygons.addTo(map);
|
polygons.addTo(map);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
|
<script src="../leaflet-include.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
49
debug/tests/click_on_canvas_broken.html
Normal file
49
debug/tests/click_on_canvas_broken.html
Normal 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>
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 = '© <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>
|
|
||||||
@ -6,6 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/mobile.css" />
|
<link rel="stylesheet" href="../css/mobile.css" />
|
||||||
<style>
|
<style>
|
||||||
@ -14,35 +15,34 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
||||||
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
|
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
|
||||||
latlng = new L.LatLng(50.5, 30.51);
|
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
|
//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 marker = new L.Marker(latlng, { icon: 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 });
|
|
||||||
map.addLayer(marker);
|
map.addLayer(marker);
|
||||||
|
|
||||||
var visible = true;
|
var visible = true;
|
||||||
marker.on('click', function () {
|
marker.on('click', function () {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
marker.setOpacity(0.3);
|
marker.setOpacity(0.3);
|
||||||
marker.setIcon(transparentIcon)
|
marker._icon.innerHTML = 'transparent';
|
||||||
} else {
|
} else {
|
||||||
marker.setOpacity(1);
|
marker.setOpacity(1);
|
||||||
marker.setIcon(opaqueIcon);
|
marker._icon.innerHTML = 'opaque';
|
||||||
}
|
}
|
||||||
visible = !visible;
|
visible = !visible;
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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 = '© <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>
|
|
||||||
@ -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: '© <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>
|
|
||||||
@ -4,16 +4,18 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
|
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var map = L.map('map').setView( [50, 50], 10);
|
var map = L.map('map').setView( [50, 50], 10);
|
||||||
var marker = L.marker([50, 50], {draggable: true}).addTo(map);
|
var marker = L.marker([50, 50], {draggable: true}).addTo(map);
|
||||||
|
|||||||
@ -6,16 +6,18 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<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 });
|
var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });
|
||||||
|
|
||||||
|
|||||||
@ -4,8 +4,10 @@
|
|||||||
<title>Leaflet debug page</title>
|
<title>Leaflet debug page</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
<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" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.js"></script>
|
<script src="../leaflet-include.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -24,8 +26,11 @@
|
|||||||
|
|
||||||
map.setView([51.505, -0.09], 13);
|
map.setView([51.505, -0.09], 13);
|
||||||
|
|
||||||
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
|
||||||
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
||||||
|
maxZoom: 18,
|
||||||
|
key: 'BC9A493B41014CAABB98F0471D759707',
|
||||||
|
styleId: 997
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
var a_popup = L.popup().setContent('Previously created')
|
var a_popup = L.popup().setContent('Previously created')
|
||||||
|
|||||||
@ -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: '© <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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -6,16 +6,18 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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="../../dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
<link rel="stylesheet" href="../css/screen.css" />
|
||||||
|
<script type="text/javascript" src="../../build/deps.js"></script>
|
||||||
<script src="../leaflet-include.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
|
|
||||||
<script>
|
<script type="text/javascript">
|
||||||
|
|
||||||
var map;
|
var map;
|
||||||
var myLayerGroup = new L.LayerGroup();
|
var myLayerGroup = new L.LayerGroup();
|
||||||
@ -42,7 +44,7 @@
|
|||||||
[51, 7.000],
|
[51, 7.000],
|
||||||
[51.002, 7.004]
|
[51.002, 7.004]
|
||||||
],
|
],
|
||||||
{ interactive:false,color:'#f00' }
|
{ clickable:false,color:'#f00' }
|
||||||
).addTo(map);
|
).addTo(map);
|
||||||
|
|
||||||
// when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
|
// when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
|
||||||
|
|||||||
@ -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
Loading…
Reference in New Issue
Block a user