commenthol / leaflet-rastercoords

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

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

leaflet-rastercoords's Issues

Map bounds limited to the image size

Apparently the plugin sets the map's bounds equals to image's size. When I put a marker on the edges of the image, and it has a popup, the map hides this popup.

Is it possible to create bounds to the map bigger than image's size?

Y bounds incorrect on image

Hello, I'm attempting to use this plugin to build an image server for some custom data I tiled from using gdal2tiles.py from other repo. To date, I have linked my tiles (on my local disk) using the the example file without altering anything except the image size to match the tiles.

When I turn on tms: true, I get the following, but the bounds are incorrect

Here is what I am getting. I am not sure why it is giving me this.. Any help would be appreciated.

Syntax error in the Readme

Hey,

Quick mistake in the Readme :

map.setView(rc.unproject([img[0], img[1]), 2)

A ] is missing

map.setView(rc.unproject([img[0], img[1]]), 2)

Thanks !

React-Leaflet v4 Support?

Hey there, does this plugin work with React-leaflet (specifically the latest version)?

I've been spinning my wheels trying to figure out how to get this to work.

Any ideas?

Thanks for your time!

React-leaflet bug with leaflet-rastercoords setMaxboundaries

What happend?

When using leaflet-rastercoords plugin with react and react-leaflet we have an issue that overrides maxBounds of map.

Steps to reproduce

Create RasterCoords as state

const [raster] = useState<Raster>(new L.RasterCoords(map, imageDimensions))

Set map max Bounds with value that inst same as value for raster layer bounds f.e use padding

map.setMaxBounds(raster.getMaxBounds().pad(1))

Change state or re-render the component and whole bounds are set to max bounds of raster layer (raster-coords overrides our settings on re-render)

Raster-coords doesn't need to set max-bounds

We can just use bounds property of tile layer to limit layer dimensions

<TileLayer
   bounds={raster.getMaxBounds()}
   ...
 />

What is causing this?

That lines of code in leaflet-rastercoords:

leaflet-rastercoords/rastercoords.js

Lines 38 to 40 in 564731d

	if (this.width && this.height) {
	this.setMaxBounds()
	}

Possible fix

Just add new param that can disable setting maxBounds with default value (backward-compability)

L.RasterCoords = function (map, imgsize, tilesize, setmaxbounds = true) {

and than on line with if:

    if (setmaxbounds && this.width && this.height) {
      this.setMaxBounds()
    }

Negative north bounds not working

Hi and thanks for the great plugin!

I'm trying to use L.RasterCoords and set bounds that are 20% larger than the image.

map.setMaxBounds(new L.LatLngBounds(southWest, northEast).pad(0.2))

Using this, max bounds are respected on the east, south and west side, but not on the north side.

Here is a skimmed down version of this repo's example, which demonstrates this issue:
(please zoom in so deep that grey background is not visible, then try panning to west (20% allowed) and then north (0% allowed)

https://codepen.io/rannooo/pen/wvWaNXg

I have also tried to set bounds manually, without the .pad() function, but had same results.
It seems that setting negative bound coordinates to the north direction fails, but negative bounds to the west side work as intended..

Don´t Work (Resolved)

"leaflet": "^1.7.1",
"leaflet-rastercoords": "^1.0.3",

Same code but with the configuration of my image and it doesn't work.

EDIT:

I managed to get it to work on react. But you don't have to use the react-leaflet dependency

solved

solved

404s on zooming out

Hi @commenthol and thanks for this plugin.

If you visit https://commenthol.github.io/leaflet-rastercoords/example/index.html and zoom out, you will get a lot of 404 errors in the network panel. Why these errors are happening?

Why is it requesting non-existing images/tile images?

I recorded this video to show you the issue: https://www.dropbox.com/s/prjp7e3cxikijx6/uqHLiG4HyA.mp4?dl=0

How to customize the image start point on the map

Hi,

Thank you very much, this is a helpful library to make really cool apps.

I need to change the starting point of the image so that when I call project or unproject, it just converts the values regarding a specific location on the map.

for example:

Now when I unproject a point point [0, 0] I got the following point LatLng {lat: 85.0511287798066, lng: -180} how can I customize this starting point let's say to [55, 25]

Thanks in advance

Missing semi colon at the end of rastercoords.js

I've got a project that uses bower to install "leaflet-rastercoords": "^1.0.2".

The file being used by my project, <script src="/bower_components/leaflet-rastercoords/rastercoords.js"></script>, must be the last included file in my index.html, otherwise the following error is risen:
"Uncaught TypeError: (intermediate value)(intermediate value)(...) is not a function"
The fix is to simply add a semicolon ";" at the end of the file.

In short, rastercoords.js is missing a ; at the end, and if there are other scripts loaded after it, an error appears on the browser console. The workaround is to make rastercoords the last script to be loaded.

Typescript Supporting?

Hi,

Is this library support for typescript? I want to use in Angular 2+. Thanks :)