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.

References

• example
• gdal2tiles-leaflet
• LICENSE