leaflet-rastercoords
Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
See the plugin in action on https://commenthol.github.io/leaflet-rastercoords/.
Usage
Process your "large" image with gdal2tiles-leaflet
// 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 <img> 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.
License
Copyright (c) 2016- commenthol (MIT License)
See LICENSE for more info.