Skip to content

commenthol/leaflet-rastercoords

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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', {
  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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published