Add support for custom images and icons

[giswqs]

MapLibre JS has the map.addImage() method that can be used to add custom images/icons. I am trying to replicate this example using Python. However, the icon does not show up. Any advice?

It would be great implement the add_image() method for the MapWidget class.

from PIL import Image
import requests
from io import BytesIO
import numpy as np
from maplibre.ipywidget import MapWidget as Map 
from maplibre import Layer

# Load the image from the URL
url = 'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png'
response = requests.get(url)
img = Image.open(BytesIO(response.content))
img = img.convert('RGBA')
width, height = img.size

img_data = np.array(img, dtype="uint8")
image_dict = {
    'width': width,
    'height': height,
    'data': img_data,
}

m = Map()
source = {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [0, 0]
                        }
                    }
                ]
            }
}
layer = {
            'id': 'points',
            'type': 'symbol',
            'source': 'point',
            'layout': {
                'icon-image': 'cat',
                'icon-size': 0.25
            }
        }
m.add_call("addImage", "cat", image_dict)
m.add_source('point', source)
m.add_layer(layer)
m

[giswqs]

Nevermind, I figured it out with the help of ChatGPT. Nevertheless, it would be great to implement the add_image() method for the MapWidget class.

from PIL import Image
import requests
from io import BytesIO
import numpy as np
from maplibre.ipywidget import MapWidget as Map 
from maplibre import Layer

# Load the image from the URL
url = 'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png'
response = requests.get(url)
img = Image.open(BytesIO(response.content))
img = img.convert('RGBA')
width, height = img.size

# Convert image to numpy array and then flatten it
img_data = np.array(img, dtype="uint8")
flat_img_data = img_data.flatten()

# Create the image dictionary with the flattened data
image_dict = {
    'width': width,
    'height': height,
    'data': flat_img_data.tolist(),  # Convert to list if necessary
}

m = Map()
source = {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [0, 0]
                        }
                    }
                ]
            }
}
layer = {
            'id': 'points',
            'type': 'symbol',
            'source': 'point',
            'layout': {
                'icon-image': 'cat',
                'icon-size': 0.25
            }
        }
m.add_call("addImage", "cat", image_dict)
m.add_source('point', source)
m.add_layer(layer)
m