Spaces:
Runtime error
Runtime error
File size: 3,333 Bytes
975a985 10a2a9d 975a985 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import streamlit as st
import pydeck as pdk
import numpy as np
# Define a data set
data = np.random.randn(1000, 2) * 0.1
layer = pdk.Layer(
"ScatterplotLayer",
data=data,
get_position="[0, 1]",
get_color="[200, 30, 0, 160]",
get_radius=50,
)
# Define a Pydeck view state
view_state = pdk.ViewState(latitude=37.7749, longitude=-122.4194, zoom=11)
# Define Pydeck initial rendering options
initial_options = pdk.Deck(
map_style="mapbox://styles/mapbox/dark-v9",
layers=[layer],
initial_view_state=view_state,
)
# Define the HTML template for the Three.js canvas
html_template = """
<div id="three-canvas-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
var canvasContainer = document.getElementById("three-canvas-container");
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
canvasContainer.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
"""
# Define the Streamlit app
def app():
# Define a Pydeck map using a ScatterplotLayer
st.pydeck_chart(initial_options)
# Add a dropdown menu to select Pydeck layer types
layer_type = st.selectbox("Layer type", ["HexagonLayer", "HeatmapLayer", "ScatterplotLayer"])
# Add sliders to adjust the Pydeck layer properties
if layer_type == "HexagonLayer":
layer.radius = st.slider("Radius", 10, 100, 50)
layer.elevation_scale = st.slider("Elevation scale", 0, 10, 1)
layer.elevation_range = st.slider("Elevation range", 0, 1000, 100)
layer.pickable = st.checkbox("Pickable", True)
layer.auto_highlight = st.checkbox("Auto highlight", True)
elif layer_type == "HeatmapLayer":
layer.intensity = st.slider("Intensity", 0, 10, 1)
layer.radius = st.slider("Radius", 10, 100, 50)
layer.color_range = st.color_picker("Color range", ["#008000", "#FFFF00", "#FF0000"])
layer.opacity = st.slider("Opacity", 0, 1, 0.8)
layer.blend_mode = st.selectbox("Blend mode", ["additive", "multiply"])
elif layer_type == "ScatterplotLayer":
layer.get_position = "[0, 1, 2]"
layer.get_color = "[200, 30, 0, 160]"
layer.get_radius = st.slider("Radius", 10, 100, 50)
# Add the updated Pydeck layer to the map
st.pydeck_chart(pdk.Deck(layers=[layer], initial_view_state=view_state))
# Add the Three.js canvas to the Streamlit app
st.components.v1.html(html_template, height=500)
if name == "main":
app()
# This app has a Pydeck map that displays a scatterplot layer by default, and it allows the user to switch between HexagonLayer, HeatmapLayer, and ScatterplotLayer using a dropdown menu. The user can also adjust the properties of the selected layer using sliders and color pickers. Finally, the app displays a Three.js canvas that rotates a green cube.
|