Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet
JavaScript HTML Shell
Latest commit 4b3a023 Feb 8, 2017 @commenthol 1.0.2
Permalink
Failed to load latest commit information.
example using cdn Oct 25, 2016
.eslintignore packaged Oct 22, 2016
.eslintrc packaged Oct 22, 2016
.gitignore packaged Oct 22, 2016
.npmignore packaged Oct 22, 2016
LICENSE packaged Oct 22, 2016
README.md fix documentation Feb 7, 2017
bower.json update .json files Oct 26, 2016
component.json update .json files Oct 26, 2016
package.json 1.0.2 Feb 7, 2017
rastercoords.js packaged Oct 22, 2016

README.md

leaflet-rastercoords

Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet

NPM version

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')

// 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
}).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