GitHub user dosubot[bot] added a comment to the discussion: How to create a custom map using Viz plugin
<!-- Greeting --> Hi @lucamuroni2000! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> To make your custom map viz plugin work with Mapbox in Superset, follow the same pattern as the built-in map visualizations: 1. **Set the Mapbox API key in the backend**: In your `superset_config.py`, set `MAPBOX_API_KEY = 'your-mapbox-token'`. Superset will also read this from the `MAPBOX_API_KEY` environment variable if set. This is how all built-in map charts get the key [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/config.py#L974-L2008). 2. **Pass the key from backend to frontend**: In your custom viz plugin’s backend (Python) class, add the API key to the payload returned by your `get_data` method, e.g.: ```python from superset import config def get_data(self, df): return { # ... your data ... "mapboxApiKey": config["MAPBOX_API_KEY"], } ``` This is exactly how built-in visualizations like MapboxViz and DeckGLMultiLayer do it [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/viz.py#L1367-L1565). 3. **Use the key in your frontend plugin**: In your React (or JS) chart code, read `props.data.mapboxApiKey` and pass it to Mapbox GL or your map library. Do not hardcode the key in the frontend. 4. **Best practice**: Always keep API keys in backend config or environment variables and only pass them to the frontend as needed for rendering. Never hardcode them in frontend code or commit them to source control [[source]](https://github.com/apache/superset/issues/20159#issuecomment-2614589671). If you need to expose the key outside of the viz payload (rare), you can extend the frontend bootstrap data by adding keys to `FRONTEND_CONF_KEYS` or by customizing `COMMON_BOOTSTRAP_OVERRIDES_FUNC` in your config, but for viz plugins, the payload approach is standard and secure [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/views/base.py#L50-L419). Let me know if you want a concrete code example for your plugin! <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/11bd4ffd-5154-4bc6-8d48-8ac4d056bd5d?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=To%20make%20your%20custom%20map%20viz%20plugin%20work%20with%20Mapbox%20in%20Superset%2C%20follow%20the%20same%20pattern%20as%20the%20built-in%20map%20visualizations%3A%0A%0A1.%20%2A%2ASet%20the%20Mapbox%20API%20key%20in%20the%20backend%2A%2A%3A%20In%20your%20%60superset_config.py%60%2C%20set%20%60MAPBOX_API_KEY%20%3D%20%27your-mapbox-token%27%60.%20Superset%20will%20also%20read%20this%20from%20the%20%60MAPBOX_API_KEY%60%20environment%20variable%20if%20set.%20This%20is%20how%20all%20built-in%20map%20charts%20get%20the%20key%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/config.py%23L974-L2008%29.%0A%0A2.%20%2A%2APass%20the%20key%20from%20backend%20to%20frontend%2A%2A%3A%20In%20your%20 custom%20viz%20plugin%E2%80%99s%20backend%20%28Python%29%20class%2C%20add%20the%20API%20key%20to%20the%20payload%20returned%20by%20your%20%60get_data%60%20method%2C%20e.g.%3A%0A%20%20%20%60%60%60python%0A%20%20%20from%20superset%20import%20config%0A%0A%20%20%20def%20get_data%28self%2C%20df%29%3A%0A%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%23%20...%20your%20data%20...%0A%20%20%20%20%20%20%20%20%20%20%20%22mapboxApiKey%22%3A%20config%5B%22MAPBOX_API_KEY%22%5D%2C%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%60%60%60%0A%20%20%20This%20is%20exactly%20how%20built-in%20visualizations%20like%20MapboxViz%20and%20DeckGLMultiLayer%20do%20it%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/viz.py%23L1367-L1565%29.%0A%0A3.%20%2A%2AUse%20the%20key%20in%20your%20frontend%20plugin%2A%2A%3A%20In%20your%20React%20%28or%20JS%29%20chart%20code%2C%20read%20%60props.data.mapboxApiKey%60%20and%20pass%20it%20to%20Mapbox %20GL%20or%20your%20map%20library.%20Do%20not%20hardcode%20the%20key%20in%20the%20frontend.%0A%0A4.%20%2A%2ABest%20practice%2A%2A%3A%20Always%20keep%20API%20keys%20in%20backend%20config%20or%20environment%20variables%20and%20only%20pass%20them%20to%20the%20frontend%20as%20needed%20for%20rendering.%20Never%20hardcode%20them%20in%20frontend%20code%20or%20commit%20them%20to%20source%20control%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/issues/20159%23issuecomment-2614589671%29.%0A%0AIf%20you%20need%20to%20expose%20the%20key%20outside%20of%20the%20viz%20payload%20%28rare%29%2C%20you%20can%20extend%20the%20frontend%20bootstrap%20data%20by%20adding%20keys%20to%20%60FRONTEND_CONF_KEYS%60%20or%20by%20customizing%20%60COMMON_BOOTSTRAP_OVERRIDES_FUNC%60%20in%20your%20config%2C%20but%20for%20viz%20plugins%2C%20the%20payload%20approach%20is%20standard%20and%20secure%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset /views/base.py%23L50-L419%29.%0A%0ALet%20me%20know%20if%20you%20want%20a%20concrete%20code%20example%20for%20your%20plugin%21) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/36591) GitHub link: https://github.com/apache/superset/discussions/36591#discussioncomment-15240332 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
