├── LICENSE
├── README.md
├── elevation.html
├── index.html
├── leaflet-tilelayer-colorpicker.js
├── mapbox-terrain-rgb.html
├── package.json
└── wms.html
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Yuzo Matsuzawa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # leaflet-tilelayer-colorpicker
2 |
3 | A Leaflet TileLayer with getColor(latLng)
4 |
5 | ## API
6 |
7 | ```
8 | // factory
9 | var layer = L.tilelayer.colorPicker(cors_enabled_url_template,options);
10 | layer.addTo(map);
11 |
12 | // getColor(latLng) returns Uint8Array ([r,g,b,a]) or null
13 | var color = layer.getColor(map.getCenter());
14 | var red = color[0];
15 | var green = color[1];
16 | var blue = color[2];
17 | ```
18 |
19 | ### Preconditions
20 |
21 | - CORS enabled Tiles are required.
22 | - `crossOrigin` option is set to **anonymous** by default, DO NOT set to false manually.
23 |
24 | ## Demo : display color under cursor
25 |
26 | -
27 |
28 | ## Demo : display elevation under cursor using Mapbox Terrain-RGB
29 |
30 | -
31 |
32 | See also :
33 |
34 | ## Demo : display elevation under cursor using GSI's DEM PNG Tile
35 |
36 | -
37 |
38 | See also :
39 |
40 | ## Sample : display color under cursor, map tiles are obtained via CORS enabled WMS
41 |
42 | -
43 |
44 | See also :
45 |
--------------------------------------------------------------------------------
/elevation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | leaflet-tilelayer-colorpicker
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | leaflet-tilelayer-colorpicker
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/leaflet-tilelayer-colorpicker.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | L.TileLayer.ColorPicker = L.TileLayer.extend({
3 | options: {
4 | crossOrigin: "anonymous"
5 | },
6 | getColor: function(latlng) {
7 | var size = this.getTileSize();
8 | var point = this._map.project(latlng, this._tileZoom).floor();
9 | var coords = point.unscaleBy(size).floor();
10 | var offset = point.subtract(coords.scaleBy(size));
11 | coords.z = this._tileZoom;
12 | var tile = this._tiles[this._tileCoordsToKey(coords)];
13 | if (!tile || !tile.loaded) return null;
14 | try {
15 | var canvas = document.createElement("canvas");
16 | canvas.width = 1;
17 | canvas.height = 1;
18 | var context = canvas.getContext('2d');
19 | context.drawImage(tile.el, -offset.x, -offset.y, size.x, size.y);
20 | return context.getImageData(0, 0, 1, 1).data;
21 | } catch (e) {
22 | return null;
23 | }
24 | }
25 | });
26 | L.tileLayer.colorPicker = function(url, options) {
27 | return new L.TileLayer.ColorPicker(url, options);
28 | };
29 | })();
30 |
--------------------------------------------------------------------------------
/mapbox-terrain-rgb.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | leaflet-tilelayer-colorpicker
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | This demo is temporarily unavailable.
16 | Try another demo instead.
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leaflet-tilelayer-colorpicker",
3 | "version": "0.1.0",
4 | "description": "A Leaflet TileLayer with getClor(latLng)",
5 | "main": "leaflet-tilelayer-colorpicker.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+https://github.com/frogcat/leaflet-tilelayer-colorpicker.git"
9 | },
10 | "keywords": [
11 | "leaflet"
12 | ],
13 | "author": "frogcat",
14 | "license": "MIT",
15 | "bugs": {
16 | "url": "https://github.com/frogcat/leaflet-tilelayer-colorpicker/issues"
17 | },
18 | "homepage": "https://github.com/frogcat/leaflet-tilelayer-colorpicker#readme",
19 | "peerDependencies": {
20 | "leaflet": "^1.0.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/wms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | leaflet-tilelayer-wms-colorpicker
7 |
8 |
9 |
40 |
41 |
42 |
43 |
44 |
71 |
72 |
73 |
--------------------------------------------------------------------------------