I have created an application using HTML and JavaScript to handle events. So basically, I have created application using mapbox gl where user can interact and manipulate the html table according to selection on map. Now I want to use the same table and application in my dash application for further analytics.
Help required in:
- How to convert html table in python dataframe for further analysis calculation ?
- how to see both HTML application and Dash application together in single page ?
I am using VS Code as an Editor.
Hello @vishal.sgvu,
Not sure why you went the route of using HTML and JS when dash has mapbox gl…
You should be able to port all of your code over into dash, and use something like AG Grid to plot their interactions. If the data is strong enough for you from what dash has available, you can add your own event listeners via a clientside callback to load the listener.
Then on your event, you can send data back to the dash echo system with dash_clientside.set_props(id, propsToSet), dependent on if you are using 2.16+ for dash.
1 Like
Hi, thanks a lot for your attention to this.
Why I have used HTML and JS to render Mapbox GL because of the ability of Draw inbuilt function tool to allow user to draw/edit the shape (Polygon, Line, Marker ) which is not possible in Dash px.Sactter_Mapbox. Though in px.Scatter_Mapbox it has ability to extract points into DataFrame using lasso selection tool and SelectedPoint function but it does not provide facility to users to change the shape of polygon once created using lasso selection tool.
I am creating an application in which users are allowed to upload the point coordinate CSV sheet , Prase the data into GeoJSON and plot the points on Mapbox GL and perform Turf Operation like buffering , selecting points using drawing polygon from the draw inbuilt function and using Turf PointinPolygon function which help me to extract the within polygon points in a HTML table and thats why I want this table to use in dash application for further use/analysis and render graphs and Charts.
Please find the image for comparison both in Dash and HTML+JavaScript
Ok, if you want to continue with this, then you can add an event listener to send data back from this component and into the dash eco-system via the dash_clientside.set_props method.
Depending on how you bring the dash app, you may need to use window.parent.dah.. or window.frames[0].das.. to get the proper function. And the frames will need to be on the same domain.
Which is easy to accomplish if you are using a flask template and using the flask server as the server for the dash app. 
