Skip to content

Commit d9f2ddf

Browse files
commentholcommenthol
committed
packaged
1 parent f8d05db commit d9f2ddf

15 files changed

+383
-1
lines changed

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
coverage/*
2+
tmp/*

‎.eslintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "standard",
3+
"plugins": [ "standard" ],
4+
"rules": {
5+
}
6+
}

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
bower_components/
2+
node_modules/
3+
example/tiles
4+
example/gdal2tiles.py
5+
tmp/
6+
*.log
7+
*.tgz

‎.npmignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
bower_components/
2+
node_modules/
3+
example/
4+
tmp/
5+
bower.json
6+
component.json
7+
*.log
8+
*.tgz
9+
.*

‎LICENSE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 commenthol
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
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, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,69 @@
11
# leaflet-rastercoords
2-
Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
2+
3+
> Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
4+
5+
[![NPM version](https://badge.leaflet-rastercoordsfury.io/js/leaflet-rastercoords.svg)](https://www.npmjs.com/package/leaflet-rastercoords)
6+
7+
See the plugin in action on https://commenthol.github.io/gdal2tiles-leaflet/test/index.html.
8+
9+
## Usage
10+
11+
Process your "large" image with [gdal2tiles-leaflet][]
12+
13+
```js
14+
var L = require('leaflet')
15+
16+
var img = [
17+
3831, // original width of image (here from `example/karta.jpg`)
18+
3101 // original height of image
19+
]
20+
// create the map
21+
var map = L.map('map')
22+
23+
// assign map and image dimensions
24+
var rc = new L.RasterCoords(map, img)
25+
// set max zoom Level (might be `x` if gdal2tiles was called with `-z 0-x` option)
26+
map.setMaxZoom(rc.zoomLevel())
27+
// all coordinates need to be unprojected using the `unproject` method
28+
// set the view in the lower right edge of the image
29+
map.setView(rc.unproject([img[0], img[1]), 2)
30+
31+
// set markers on click events in the map
32+
map.on('click', function (event) {
33+
// any position in leaflet needs to be projected to obtain the image coordinates
34+
var coords = rc.project(event.latlng)
35+
var marker = L.marker(rc.unproject(coords))
36+
.addTo(map)
37+
marker.bindPopup('[' + Math.floor(coords.x) + ',' + Math.floor(coords.y) + ']')
38+
.openPopup()
39+
})
40+
41+
// the tile layer containing the image generated with `gdal2tiles --leaflet -p raster -w none <img> tiles`
42+
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
43+
noWrap: true
44+
}).addTo(map)
45+
```
46+
47+
## Example
48+
49+
The tiles in the example were generated using [gdal2tiles-leaflet][].
50+
Take a look at [example/createtiles.sh](./example/createtiles.sh).
51+
52+
## License
53+
54+
Copyright (c) 2016 commenthol (MIT License)
55+
See [LICENSE][] for more info.
56+
57+
## References
58+
59+
<!-- !ref -->
60+
61+
* [example][example]
62+
* [gdal2tiles-leaflet][gdal2tiles-leaflet]
63+
* [LICENSE][LICENSE]
64+
65+
<!-- ref! -->
66+
67+
[LICENSE]: ./LICENSE
68+
[gdal2tiles-leaflet]: https://github.com/commenthol/gdal2tiles-leaflet
69+
[example]: https://commenthol.github.io/gdal2tiles-leaflet/test/index.html

‎bower.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "leaflet-rastercoords",
3+
"version": "1.0.0",
4+
"description": "Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet",
5+
"main": "rastercoords.js",
6+
"authors": [
7+
"commenthol"
8+
],
9+
"license": "MIT",
10+
"repository": {
11+
"type": "git",
12+
"url": "git://github.com/commenthol/leaflet-rastercoords.git"
13+
},
14+
"homepage": "https://github.com/commenthol/leaflet-rastercoords",
15+
"moduleType": [
16+
"amd",
17+
"node",
18+
"globals"
19+
],
20+
"keywords": [
21+
"Leaflet",
22+
"raster",
23+
"coordinates"
24+
],
25+
"ignore": [
26+
"**/.*",
27+
"node_modules",
28+
"bower_components",
29+
"example",
30+
"build",
31+
"assets",
32+
"tmp",
33+
"*.tgz",
34+
"*.log"
35+
],
36+
"dependencies": {
37+
"leaflet": "^1.0.1"
38+
}
39+
}

‎component.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "leaflet-rastercoords",
3+
"version": "1.0.0",
4+
"description": "Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet",
5+
"main": "rastercoords.js",
6+
"license": "MIT",
7+
"repo": "commenthol/leaflet-rastercoords",
8+
"keywords": [
9+
"Leaflet",
10+
"raster",
11+
"coordinates"
12+
],
13+
"scripts": [
14+
"rastercoords.js"
15+
],
16+
"dependencies": {
17+
"Leaflet/Leaflet": "master"
18+
}
19+
}

‎example/createtiles.sh

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#!/bin/bash
2+
3+
# do NOT forget to install `python-gdal` library
4+
# assuming you are on a debian like OS
5+
#sudo apt install python-gdal
6+
7+
# get the tool
8+
test ! -f gdal2tiles.py \
9+
&& curl https://raw.githubusercontent.com/commenthol/gdal2tiles-leaflet/master/gdal2tiles.py \
10+
> gdal2tiles.py
11+
# process ...
12+
python ./gdal2tiles.py -l -p raster -z 0-4 -w none karta.jpg tiles
13+
14+
# install leaflet ...
15+
test ! -d node_modules \
16+
npm install
17+
18+
echo 'Now open "index.html" in your browser.'

‎example/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>example for leaflet-rastercoords</title>
5+
<meta charset="utf-8"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
7+
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
8+
<script src="./node_modules/leaflet/dist/leaflet.js"></script>
9+
<script src="../rastercoords.js"></script>
10+
<script src="index.js"></script>
11+
<style>
12+
html, body, #map {
13+
width:100%;
14+
height:100%;
15+
margin:0;
16+
padding:0;
17+
background-color: #B0B0B0
18+
}
19+
</style>
20+
</head>
21+
<body onload="init()">
22+
<div id="map"></div>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)