[Python] Why does adding altitude to points in Kepler.gl result in rendering issues?

I'm using Kepler.gl in Python to visualize trajectories on a map. Each trajectory is represented by a separate layer, where the data consists of latitude, longitude, and altitude values. Even though I have set the opacity to 100%, the outline width to 0 and the layer blending mode to "normal," I am encountering an issue when I include altitude values in the visualization.

When the altitude is added, some points display a transparent contour instead of correctly overlapping with others. It seems that when a point is positioned above another, it blends correctly in only one direction. In the following example, when a point is positioned above and to the right of another, the border is visible. However, when the point is above and to the left, the contour is not visible.

Points overlapping on a map. The z-value represents the altitude, with higher values indicating higher altitudes.

Trajectory made of points on a map.

Reproducible example code:

import pandas as pd
import numpy as np
from keplergl import KeplerGl

num_points = 100
start_lat, start_lng, start_alt = 37.77, -122.42, 0

data = {
"latitude": np.linspace(start_lat, start_lat + 0.01, num_points),
"longitude": np.linspace(start_lng, start_lng + 0.01, num_points),
"altitude": np.linspace(start_alt, start_alt + 100, num_points) + np.random.uniform(-5, 5, num_points)
}

df = pd.DataFrame(data)

map_ = KeplerGl(height=600)

config = {
"version": "v1",
"config": {
"visState": {
"layers": [
{
"id": "point_layer",
"type": "point",
"config": {
"dataId": "trajectories",
"label": "Trajectory",
"color": [255, 0, 0],
"columns": {
"lat": "latitude",
"lng": "longitude",
"altitude": "altitude"
},
"isVisible": True,
"visConfig": {
"radius": 10,
"opacity": 1.0,
"outline": False,
"strokeWidth": 0,
"blending": "normal"
}
}
}
]
}
}
}

map_.add_data(df, "trajectories")
map_.config = config
map_


Has anyone encountered a similar issue when tracing points in 3D in Kepler.gl? How can I resolve it?

Continue reading...