add_raster() isn't adding the downloaded image into the map

[rafiibnsultan]

So, I was replicating this notebook: https://samgeo.gishub.org/examples/input_prompts/

The code:

import os
import leafmap
from samgeo import SamGeo, tms_to_geotiff

m = leafmap.Map(center=[37.6412, -122.1353], zoom=15, height="800px")
m.add_basemap("SATELLITE")

if m.user_roi is not None:
    bbox = m.user_roi_bounds()
else:
    bbox = [-122.1497, 37.6311, -122.1203, 37.6458]
    
image = "satellite.tif"
tms_to_geotiff(output=image, bbox=bbox, zoom=16, source="Satellite", overwrite=True)

#Display the downloaded image on the map
m.layers[-1].visible = False
**m.add_raster(image, layer_name="Image")**
m

The downloaded image isn't showing up in the map, only the map is being shown while running it on my PC. However, in the google colab it is working fine. Can you suggest what could be the problem?

Output of my PC: https://drive.google.com/file/d/1Ac8r0aXp0u0Wt4GeG7ckG8E79kweb55X/view?usp=drive_link
Output of Colab: https://drive.google.com/file/d/1Ku9QzrowH6FRMc3ursi4NZ4N1bYTs30U/view?usp=drive_link

The author said it could be the localtileserver issue. So, I tried running your example: https://localtileserver.banesullivan.com/
It's not showing up on the map either.

Environment:
localtileserver           0.7.1 
ipyleaflet                0.17.3 
Python version: 3.9.16
Operating System: Ubuntu 22.04.2 LTS

[banesullivan]

Are you running this in a remote Jupyter environment like a JupyterHub? Or are you running locally?

If remote, you'll need to make sure you are using jupyter-server-proxy: https://localtileserver.banesullivan.com/installation/remote-jupyter.html

[rafiibnsultan]

I am running this on a Ubuntu PC in the same network remotely. (Remote-SSH from VSCode)

So, I did the first two steps as the link said but it is still not showing up.

[banesullivan]

Did you restart Jupyter after installing jupyter-server-proxy? You may need to do export LOCALTILESERVER_CLIENT_PREFIX='/proxy/{port}/' with a prepended /

Would you please provide a report:

import localtileserver
print(localtileserver.Report())

[rafiibnsultan]

--------------------------------------------------------------------------------
  Date: Tue Jun 13 13:24:45 2023 EDT

                         OS : Linux
                     CPU(s) : 16
                    Machine : x86_64
               Architecture : 64bit
                        RAM : 125.0 GiB
                Environment : Jupyter
                File system : ext4

  Python 3.9.16 | packaged by conda-forge | (main, Feb  1 2023, 21:39:03)
  [GCC 11.3.0]

            localtileserver : 0.7.1
                      flask : 2.3.2
              flask_caching : 2.0.2
                 flask_cors : 3.0.10
                flask_restx : 1.0.6
                   requests : 2.31.0
                   werkzeug : 2.3.6
                      click : 8.1.3
              server_thread : 0.2.0
                     scooby : 0.7.2
                large_image : 1.22.2
large_image_source_rasterio : 1.22.2
                 cachetools : 5.3.0
                        PIL : 9.5.0
                     psutil : 5.9.5
                      numpy : 1.24.3
                 palettable : 3.3.3
                 ipyleaflet : 0.17.3
                 jupyterlab : 4.0.2
                  traitlets : 5.9.0
                    shapely : 2.0.1
                     folium : 0.14.0
                 matplotlib : 3.7.1
                 osgeo.gdal : 3.7.0
                     pyproj : 3.5.0
--------------------------------------------------------------------------------

[rafiibnsultan]

Hello,
Sorry if this is a dumb question.
how to know which port number the localtileserver is running?

[banesullivan]

Not a dumb question at all! Getting jupyter-server-proxy set up properly has proven difficult for lots of users.

Did you try setting the prefix like I mentioned above? With the preceding /?: '/proxy/{port}/'

how to know which port number the localtileserver is running?

localtileserver launches a new server for every raster that is openeded on a random, available port. This should rarely be used directly by the user, but is available as the .server.port attribute on the TileClient.

from localtileserver import TileClient

client = TileClient('raster.tif')
client.server.port

I presume you are asking this so that you can forward/proxy that port much like you do for Jupyter -- thing is this is dynamic and allocated at runtime. This is why I recommend using jupyter-server-proxy to handle the port forwarding/proxying.

You can debug the right server proxy prefix by experimenting with the client_prefix keyword argument of TileClient:

client = TileClient('raster.tif', client_prefix='/proxy/{port}')
client

If you can past the URL you see at the top of your browser for Jupyter, I can help you get this right.

[zxdawn]

@banesullivan Thanks for the tip. I meet the same problem using SSH jupyter. client_prefix fixes it. If I understand correctly, client_prefix is only necessary for ssh, and we should omit it using local one (because the tile isn't shown when I add client_prefix and LOCALTILESERVER_CLIENT_PREFIX in local jupyter). So, do you know how to set it automatically for codes running both on server and local machine?

Update

Ha, I forgot to install jupyter-server-proxy locally, keeping client_prefix with installed jupyter-server-proxy works well!

Solution

Option1. set client_prefix manually in TileClient
Option2. add export LOCALTILESERVER_CLIENT_PREFIX='proxy/{port}' to your environment

Note that both methods need the installation of jupyter-server-proxy first.

[rafiibnsultan]

Sorry I am still having trouble as I am new to this.

So, here are the steps right:

1. Installing jupyter-server-proxy in the environment of the VSCode server
2. Then I add export LOCALTILESERVER_CLIENT_PREFIX='proxy/{port}', In here, {port} is a placeholder or do I need to specify the port number?

[giswqs]

After installing jupyter-server-proxy, run the following code block before using localtileserver or leafmap, it should work.

import os
os.environ['LOCALTILESERVER_CLIENT_PREFIX'] = 'proxy/{port}'

[banesullivan]

In here, {port} is a placeholder or do I need to specify the port number?

It is a placeholder that will be automatically handled

[rafiibnsultan]

Sorry, this is what I have so far and it's still not showing up:
(I have already installed jupyter-server-proxy : 4.0.0)

import os
import leafmap
from samgeo import SamGeo, tms_to_geotiff

import os
os.environ['LOCALTILESERVER_CLIENT_PREFIX'] = 'proxy/{port}/'

if m.user_roi is not None:
bbox = m.user_roi_bounds()
else:
bbox = [-122.1497, 37.6311, -122.1203, 37.6458]

image = "satellite.tif"
tms_to_geotiff(output=image, bbox=bbox, zoom=16, source="Satellite", overwrite=True)

m.layers[-1].visible = False
m.add_raster(image, layer_name="Image")
m

[rafiibnsultan]

@zxdawn Hello, can you see what I am missing here?

[banesullivan]

@rafiibnsultan Would you please share the URL you see in the browser when you have the notebook open?

[rafiibnsultan]

@banesullivan I am actually running it on VSCode. Right now, I am working directly on the Ubuntu PC (that I was doing SSH to) for the project.

[zxdawn]

@rafiibnsultan I just run it in the remote Jupyter Notebook by ssh and didn't test VSCode. Could you test it in Notebook?