|
| 1 | +import os |
| 2 | +import streamlit.components.v1 as components |
| 3 | +import uuid |
| 4 | + |
| 5 | +# Create a _RELEASE constant. We'll set this to False while we're developing |
| 6 | +# the component, and True when we're ready to package and distribute it. |
| 7 | +# (This is, of course, optional - there are innumerable ways to manage your |
| 8 | +# release process.) |
| 9 | +_RELEASE = True |
| 10 | + |
| 11 | +# Declare a Streamlit component. `declare_component` returns a function |
| 12 | +# that is used to create instances of the component. We're naming this |
| 13 | +# function "_component_func", with an underscore prefix, because we don't want |
| 14 | +# to expose it directly to users. Instead, we will create a custom wrapper |
| 15 | +# function, below, that will serve as our component's public API. |
| 16 | + |
| 17 | +# It's worth noting that this call to `declare_component` is the |
| 18 | +# *only thing* you need to do to create the binding between Streamlit and |
| 19 | +# your component frontend. Everything else we do in this file is simply a |
| 20 | +# best practice. |
| 21 | + |
| 22 | +if not _RELEASE: |
| 23 | + _component_func = components.declare_component( |
| 24 | + # We give the component a simple, descriptive name ("location_map" |
| 25 | + # does not fit this bill, so please choose something better for your |
| 26 | + # own component :) |
| 27 | + "location_map", |
| 28 | + # Pass `url` here to tell Streamlit that the component will be served |
| 29 | + # by the local dev server that you run via `npm run start`. |
| 30 | + # (This is useful while your component is in development.) |
| 31 | + url="http://localhost:3001", |
| 32 | + ) |
| 33 | +else: |
| 34 | + # When we're distributing a production version of the component, we'll |
| 35 | + # replace the `url` param with `path`, and point it to to the component's |
| 36 | + # build directory: |
| 37 | + parent_dir = os.path.dirname(os.path.abspath(__file__)) |
| 38 | + build_dir = os.path.join(parent_dir, "frontend/build") |
| 39 | + _component_func = components.declare_component("location_map", path=build_dir) |
| 40 | + |
| 41 | + |
| 42 | +# Create a wrapper function for the component. This is an optional |
| 43 | +# best practice - we could simply expose the component function returned by |
| 44 | +# `declare_component` and call it done. The wrapper allows us to customize |
| 45 | +# our component's API: we can pre-process its input args, post-process its |
| 46 | +# output value, and add a docstring for users. |
| 47 | +def location_map(name, lon=-123.1187, lat=49.2819, zoom=10, pitch=0, identity='', key=None): |
| 48 | + component_value = _component_func( |
| 49 | + name=name, |
| 50 | + lon=lon, |
| 51 | + lat=lat, |
| 52 | + zoom=zoom, |
| 53 | + pitch=pitch, |
| 54 | + identity=identity, |
| 55 | + key=str(uuid.uuid4()), |
| 56 | + default=0) |
| 57 | + return component_value |
| 58 | + |
| 59 | + |
| 60 | +# Add some test code to play with the component while it's in development. |
| 61 | +# During development, we can run this just as we would any other Streamlit |
| 62 | +# app: `$ streamlit run location_map/__init__.py` |
| 63 | +if not _RELEASE: |
| 64 | + import streamlit as st |
| 65 | + _IDENTITY = "us-east-1:e74fc977-4241-4a56-8bdd-49ea4455f8cf" |
| 66 | + st.subheader("Does this display the map?") |
| 67 | + |
| 68 | + location_map("explore.map", identity=_IDENTITY) |
| 69 | + |
| 70 | + location_map( |
| 71 | + "2-5D-Map", |
| 72 | + lon=-73.9857, lat=40.7484, |
| 73 | + zoom=16, pitch=30, |
| 74 | + identity=_IDENTITY) |
0 commit comments