Chakra UI - MAP integration in React with react-map-gl and deck-gl

If you are front-end developer, looking to integrate maps in your web, mobile or desktop application in React ChakraUI, this tutorial is for you.

JavaScript library react-map-gl makes using Mapbox GL JS in React applications easy. It uses Mapbox GL JS Map as a fully controlled reactive component for React Integration. It is extensible and comes with additional React interfaces such as context and hooks to support custom components. It is part of vis.gl's Framework Suite.

JavaScript library, deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.

Content Details:

(00:00) Video Start (0:07) Content Intro (1:19) Tutorial Plan (1:50) Source Code Walkthrough at GitHub (3:04) Loading base starter code in VSCODE IDE (4:00) Adding /mapHome route to code (10:20) Integrating MapBox Access Token (12:51) ReactMapGL (17:49) DeckGL Examples Review (19:14) DeckGL Introduction with StaticMap (21:29) Heatmap Layer (25:55) ScatterPlot Layer (30:35) Arc Layer (38:46) Text Layer (43:08) Text + Scatterplot Layers (53:26) Hexagon Layer (57:50) Text + Hex + Scatterplot Layers (1:03:05) Recap (1:03:36) Code push to GitHub (1:04:50) Credits

Please visit:

Prodramp LLC | https://prodramp.com | @prodramp https://www.linkedin.com/company/prodramp

Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/avkashchauhan

Tags: #ai #aicloud #h2oai #driverlessai #machinelearning #cloud #mlops #featurestore #tecton #aws #databricks #featureengineering #mlmodel #azureml #sagemaker #model #collaboration #h2ohydrogentorch #pytorch #tensorflow #h2oai #mapbox #googlemaps #reactmapgl #deckgl #mapping #geojson #geotagging #keplergl #react #chakraui ... https://www.youtube.com/watch?v=SClgxqZUsXU