Giter Club home page Giter Club logo

streamlit-light-leaflet's Introduction

Streamlit component - return coordinates on map click

A very quick & dirty prototype of Streamlit component that sends back coordinates on click, using the Reactless template. Feel free to fork and go on your Leaflet adventure!

Quickstart Success

Quickstart

  • Ensure you have Python 3.6+, Node.js, and npm installed.
  • Clone this repo.
  • Create a new Python virtual environment for the template:
$ cd template
$ python3 -m venv venv  # create venv
$ . venv/bin/activate   # activate venv
$ pip install streamlit # install streamlit
  • Initialize and run the component template frontend:
$ cd template/my_component/frontend
$ npm install    # Install npm dependencies
$ npm run start  # Start the Webpack dev server
  • From a separate terminal, run the template's Streamlit app:
$ cd template
$ . venv/bin/activate  # activate the venv you created earlier
$ streamlit run my_component/__init__.py  # run the example
  • Modify the frontend code at my_component/frontend/src/MyComponent.tsx.
    • Especially use your own Mapbox token ;)
    • Height of div is also hardcoded, should be in separate css.
  • Modify the Python code at my_component/__init__.py.

What if I want to do it myself ?

git clone https://github.com/streamlit/component-template
cp -r component-template/template-reactless/ ~/streamlit-light-leaflet/
cd ~/streamlit-light-leaflet/my_component/frontend
npm add leaflet @types/leaflet

Then follow the Quickstart.

More Information

streamlit-light-leaflet's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

streamlit-light-leaflet's Issues

Deployment to ECS

Hi, thanks for a very useful tool.

I'm trying to develop a streamlit app and put it in ECS, using this component. For that purpose, I've created a docker image to handle the npm part of the app. Basically I tried to follow your guidelines, and run npm install and npm run start.

FROM mhart/alpine-node:14

COPY streamlit-light-leaflet /streamlit_light_leaflet

WORKDIR /streamlit_light_leaflet/my_component/frontend

RUN npm install

# Entrypoint will allow different executions for the same docker
CMD ["npm", "run", "start"]

I've created an npm service in my docker compose file, and this part looks like

    npm:
        image: npm
        build:
            context: ./docker-npm
        ports:
            - "3001:3001"
        tty: true 

Everything works well locally. My issue is that when moving to ECS, when trying to show the map in my app, I get the following error:

image

When accessing the port 3001 in ecs, I can see the map and interact with it, but not in the map.

I'm aware this is not very central to this repo, but if you have any clue of what's going on and what might be a solution that'd be very helpful.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.