ImageOverlay or TileLayer with local files

[rr5577]

I was trying the Velocity demo with a smaller wind dataset and would like to add a local file rasters (higher quality terrain hillshade) or a local Tilemap I created with QGIS to the map. Those files are on a different drive though, and I can´t figure out how to get them to display. It seems absolute paths don´t work even if I try it with the same file I use for the relative path:

# png is in the same folder as the notebook
# works
rel_url = './IPy_header.png'
io1 = ImageOverlay(url=rel_url, bounds=m.bounds)
m.add_layer(io1)

# does not work
abs_url = 'file:///E:/JUPYTER/Velocity/IPy_header.png'
io2 = ImageOverlay(url=abs_url, bounds=m.bounds)

m.add_layer(io2)

How can I point to a local file or a Tilemap and get it to display?

[martinRenou]

Did you try without the "file://" in the URL?

[rr5577]

yes, i tried os.path and pathlib to give me the path to the file, but it didn´t work

[martinRenou]

Can you try file://localhost/E:/JUPYTER/Velocity/IPy_header.png?

[rr5577]

that doesn´t work either unfortunately.

[martinRenou]

Ok, do you have an error displayed in the Javascript console when trying to add the ImageOverlay layer to the map?
I guess it will only be a 404 error, but I hope there will be another message that could help...

[martinRenou]

Also, what browser are you using? If you are using Chome/Chromium, can you try with Firefox?

[rr5577]

thanks for the javascript console tip, there´s something else indeed:

[rr5577]

i will ask my admin to install a different browser than chrome and try again.

[martinRenou]

Ok, so it founds the file. You're just not allowed to load it for security reasons. I guess that's because you're using Chrome. And maybe it could work on Firefox, but I'm not entirely sure.

[wouellette]

I am also having trouble, but I do not get any error flagging up in the Javascript console. The .tiff extents are highlighted in the Sidecar, but they show empty:

Any clue what could be the problem?
Thanks!

[martinRenou]

I think LeafletJS only support PNG and JPG image files. I guess you would need to convert your images first. You can do that programmatically on linux https://askubuntu.com/a/60410

[wouellette]

The conversion to .png or .jpg does not seem to make any difference. The tiles are still showing blank.
That said, the .jpg (or .png, tried both) tiles are rendered and colored when opening them outside of LeafletJS, like the following example:

Update: I just ended up hosting a local http server:
python -m http.server 8000
and provided the http url to ImageOverlay() . Jupyter lab is accessing a remote machine, so I'm making sure not to provide 127.0.0.1 as binder argument.

[rbavery]

Thanks for the cool tool! I'm also experiencing this issue. I can't see any image in Chrome and when I tested in firefox I only see a thin outline where my image should be.

I tried using file:// and that rmoves the file not found icon in the image overlay but there is still only a thin outline

The image is valid and I can plot it with matplotlib. I saved the image I'm plotting here with plt.imsave("observation_count.png",true_count_c) to test ipyleaflet.

when I try jpeg instead of png, nothing appears (no thin line)

[AlexanderJuestel]

Hello,

I have encountered the same issue. I would like to load a raster file (tiff) into ipyleaflet from my local machine. Loading a tiff (as LocalTileLayer) does not show anything. Converting the raster to png loaded the file but it is now displayed as many tiles all over the map as you can see below.

Is there a way to load raster files properly into ipyleaflet? (@giswqs, is there a way to do it implemented in geemap? I could not find anything right now...) Alternatively, could an array be displayed in ipyleaflet?

Thanks for your support!

[giswqs]

@AlexanderJuestel Yes, you can use image_overlay() with geemap to load a local png file to the map. Check out this notebook example.

[giswqs]

@AlexanderJuestel ipyleaflet can also do image overlay using relative file path.

#550

[AlexanderJuestel]

@giswqs thanks for the quick answer.

I tried it with pure ipyleaflet and with the geemap implementation and it works fairly well (first image).

However, I noticed when I am using my own implementation, that the default map gets deactivated for some reason and that dragging does not work anymore (second image). What I am currently doing is passing an WMS Layer, extracting a certain area and save it as image file. This image file, which could also be a high res DEM for instance should then be displaced in the map for further manipulation/processing.

If you need more information for this particular problem, let me know.

[giswqs]

Is the basemap still listed under the layer control on your second image? Did you accidentally clear all layers before adding the local image?

[AlexanderJuestel]

Hello @giswqs,

for some reason everything works perfectly again and as expected :)

Thanks again for the help!
Cheers
Alex

[AlexanderJuestel]

Question moved to issue #604. Sorry for the inconvenience.

[martinRenou]

The discussion is drifting away from the original purpose of the issue.

Would you mind opening another issue or ask your question on another channel?

[sunny-g]

I'm still having this issue. If I use a relative local path, I don't get any errors in the console, but get a blank image outline like in #234 (comment). If I spawn a local file server python -m http.server 8000, I get the same result in the map and the local file server reports this:

127.0.0.1 - - [20/Jan/2021 22:12:34] "GET /swiftera-imagery/TUS13/20210107T153729Z_2787_POM1_ST2_2_P.tif HTTP/1.1" 200 -
----------------------------------------
Exception happened during processing of request from ('127.0.0.1', 41940)
Traceback (most recent call last):
  File "/usr/lib/python3.8/socketserver.py", line 650, in process_request_thread
    self.finish_request(request, client_address)
  File "/usr/lib/python3.8/socketserver.py", line 360, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/usr/lib/python3.8/http/server.py", line 647, in __init__
    super().__init__(*args, **kwargs)
  File "/usr/lib/python3.8/socketserver.py", line 720, in __init__
    self.handle()
  File "/usr/lib/python3.8/http/server.py", line 427, in handle
    self.handle_one_request()
  File "/usr/lib/python3.8/http/server.py", line 415, in handle_one_request
    method()
  File "/usr/lib/python3.8/http/server.py", line 654, in do_GET
    self.copyfile(f, self.wfile)
  File "/usr/lib/python3.8/http/server.py", line 853, in copyfile
    shutil.copyfileobj(source, outputfile)
  File "/usr/lib/python3.8/shutil.py", line 205, in copyfileobj
    fdst_write(buf)
  File "/usr/lib/python3.8/socketserver.py", line 799, in write
    self._sock.sendall(b)
ConnectionResetError: [Errno 104] Connection reset by peer
----------------------------------------

[banesullivan]

Thought I'd chime in and give a plug for something I developed to solve the issue of viewing local raster files with ipyleaflet: https://github.com/banesullivan/localtileserver

In essence, it's a little package that will launch a local tile server in a background thread for use with ipyleaflet. Check out the README for an example, (the code here is subject to change):

from localtileserver import get_leaflet_tile_layer
from ipyleaflet import Map, ScaleControl, FullScreenControl, SplitMapControl

m = Map(
        center=(37.7249511580583, -122.27230466902257),
        zoom=9, crs=projections.EPSG3857,
       )

# Create two tile layers from 2 seperate raster files
l = get_leaflet_tile_layer('~/Desktop/TC_NG_SFBay_US_Geo.tif',
                           band=1, palette='matplotlib.Viridis_20', vmin=50, vmax=200)
r = get_leaflet_tile_layer('~/Desktop/small.tif',
                           band=2, palette='matplotlib.Plasma_6', vmin=0, vmax=150)

control = SplitMapControl(left_layer=l, right_layer=r)
m.add_control(control)

m.add_control(ScaleControl(position='bottomleft'))
m.add_control(FullScreenControl())
m