https://github.com/commenthol/leaflet-rastercoords
Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
https://github.com/commenthol/leaflet-rastercoords
coordinates leaflet-plugin raster tiled-image-viewer
Last synced: about 1 year ago
JSON representation
Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
- Host: GitHub
- URL: https://github.com/commenthol/leaflet-rastercoords
- Owner: commenthol
- License: mit
- Created: 2016-10-21T04:38:11.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-09-25T19:56:13.000Z (over 2 years ago)
- Last Synced: 2025-03-31T06:01:50.716Z (about 1 year ago)
- Topics: coordinates, leaflet-plugin, raster, tiled-image-viewer
- Language: JavaScript
- Homepage: https://commenthol.github.io/leaflet-rastercoords
- Size: 57.4 MB
- Stars: 126
- Watchers: 7
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# leaflet-rastercoords
> Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
[](https://www.npmjs.com/package/leaflet-rastercoords)
See the plugin in action on .
## Usage
Process your "large" image with [gdal2tiles-leaflet][]
```js
// for use with browserify / webpack
var L = require('leaflet')
L.RasterCoords = require('leaflet-rastercoords')
var img = [
3831, // original width of image (here from `example/karta.jpg`)
3101 // original height of image
]
// create the map
var map = L.map('map', {
crs: L.CRS.Simple
})
// assign map and image dimensions
var rc = new L.RasterCoords(map, img)
// set max zoom Level (might be `x` if gdal2tiles was called with `-z 0-x` option)
map.setMaxZoom(rc.zoomLevel())
// all coordinates need to be unprojected using the `unproject` method
// set the view in the lower right edge of the image
map.setView(rc.unproject([img[0], img[1]]), 2)
// set markers on click events in the map
map.on('click', function (event) {
// any position in leaflet needs to be projected to obtain the image coordinates
var coords = rc.project(event.latlng)
var marker = L.marker(rc.unproject(coords))
.addTo(map)
marker.bindPopup('[' + Math.floor(coords.x) + ',' + Math.floor(coords.y) + ']')
.openPopup()
})
// the tile layer containing the image generated with `gdal2tiles --leaflet -p raster -w none ![]()
tiles`
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
noWrap: true,
bounds: rc.getMaxBounds(),
maxNativeZoom: rc.zoomLevel()
}).addTo(map)
```
## Example
The tiles in the example were generated using [gdal2tiles-leaflet][].
Take a look at [example/createtiles.sh](./example/createtiles.sh).
## License
Copyright (c) 2016- commenthol (MIT License)
See [LICENSE][] for more info.
## References
* [example][example]
* [gdal2tiles-leaflet][gdal2tiles-leaflet]
* [LICENSE][LICENSE]
[LICENSE]: ./LICENSE
[gdal2tiles-leaflet]: https://github.com/commenthol/gdal2tiles-leaflet
[example]: https://commenthol.github.io/gdal2tiles-leaflet/test/index.html