GitHub user dosubot[bot] added a comment to the discussion: How to create a custom map using Viz plugin
<!-- Answer --> The most common cause for this error is that the custom visualization plugin isn't fully registered on both the backend and frontend, or the frontend isn't reading the Mapbox API key from the payload. Here’s what you should check: 1. **Backend registration:** Make sure your `CustomMapViz` class is not only defined but also imported somewhere in `superset/viz.py` (or a module imported by it). Superset only recognizes viz types that are imported so they appear in the `viz_types` registry. If your class isn't imported, the backend won't serve the correct payload for your chart type, and the frontend won't get the API key [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/viz.py#L104-L2405). 2. **Frontend registration:** In `superset-frontend/src/visualizations/presets/MainPreset.js`, you must import your plugin and add it to the `plugins` array with the key `'custom_map'` (matching your backend `viz_type`). If this step is missed, the frontend won't recognize your chart type and won't render it or process the payload [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/visualizations/presets/MainPreset.js#L85-L193). 3. **Payload structure:** Your backend `get_data` should return the Mapbox API key as `mapboxApiKey` at the top level of the payload, just like built-in map charts do. The frontend should read it from `props.data.mapboxApiKey` and pass it to Mapbox GL as `mapboxApiAccessToken` or `mapboxApiKey` [[source]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.js#L27-L87). 4. **Build and restart:** After making these changes, rebuild your frontend (`npm run build` in your plugin and in `superset-frontend`), and restart your Superset server to pick up backend changes. 5. **Debugging:** Open your browser’s dev tools, go to the Network tab, and inspect the chart data response for your custom map chart. Confirm that `mapboxApiKey` is present in the payload. If it’s missing, the backend registration is likely the issue. If it’s present but the map still fails, check your frontend code to ensure it’s reading and passing the key correctly. Let me know what you find in the network response or if you want a concrete code snippet for any of these steps! <!-- 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/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/67ad7ca5-b412-4805-ad17-dd183b973a7d?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20most%20common%20cause%20for%20this%20error%20is%20that%20the%20custom%20visualization%20plugin%20isn%27t%20fully%20registered%20on%20both%20the%20backend%20and%20frontend%2C%20or%20the%20frontend%20isn%27t%20reading%20the%20Mapbox%20API%20key%20from%20the%20payload.%0A%0AHere%E2%80%99s%20what%20you%20should%20check%3A%0A%0A1.%20%2A%2ABackend%20registration%3A%2A%2A%20Make%20sure%20your%20%60CustomMapViz%60%20class%20is%20not%20only%20defined%20but%20also%20imported%20somewhere%20in%20%60superset/viz.py%60%20%28or%20a%20module%20imported%20by%20it%29.%20Superset%20only%20recognizes%20viz%20types%20that%20are%20imported%20so%20they%20appear%20in%20the%20%60viz_types%60%20registry.%20If%20your%20class%20isn%27t%20imported%2C%20the%20backend%20won%2 7t%20serve%20the%20correct%20payload%20for%20your%20chart%20type%2C%20and%20the%20frontend%20won%27t%20get%20the%20API%20key%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/viz.py%23L104-L2405%29.%0A%0A2.%20%2A%2AFrontend%20registration%3A%2A%2A%20In%20%60superset-frontend/src/visualizations/presets/MainPreset.js%60%2C%20you%20must%20import%20your%20plugin%20and%20add%20it%20to%20the%20%60plugins%60%20array%20with%20the%20key%20%60%27custom_map%27%60%20%28matching%20your%20backend%20%60viz_type%60%29.%20If%20this%20step%20is%20missed%2C%20the%20frontend%20won%27t%20recognize%20your%20chart%20type%20and%20won%27t%20render%20it%20or%20process%20the%20payload%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/visualizations/presets/MainPreset.js%23L85-L193%29.%0A%0A3.%20%2A%2APayload%20structure%3A%2A%2A%20Your%20backend%20%60get_data%60%20shou ld%20return%20the%20Mapbox%20API%20key%20as%20%60mapboxApiKey%60%20at%20the%20top%20level%20of%20the%20payload%2C%20just%20like%20built-in%20map%20charts%20do.%20The%20frontend%20should%20read%20it%20from%20%60props.data.mapboxApiKey%60%20and%20pass%20it%20to%20Mapbox%20GL%20as%20%60mapboxApiAccessToken%60%20or%20%60mapboxApiKey%60%20%5B%5Bsource%5D%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.js%23L27-L87%29.%0A%0A4.%20%2A%2ABuild%20and%20restart%3A%2A%2A%20After%20making%20these%20changes%2C%20rebuild%20your%20frontend%20%28%60npm%20run%20build%60%20in%20your%20plugin%20and%20in%20%60superset-frontend%60%29%2C%20and%20restart%20your%20Superset%20server%20to%20pick%20up%20backend%20changes.%0A%0A5.%20%2A%2ADebugging%3A%2A%2A%20Open%20your%20browser%E2%80%99s%20dev%20tools%2C%20go%20to%20the%20Network%20tab%2C%20and%20inspect%20the%20chart%20data%20response%20for%20you r%20custom%20map%20chart.%20Confirm%20that%20%60mapboxApiKey%60%20is%20present%20in%20the%20payload.%20If%20it%E2%80%99s%20missing%2C%20the%20backend%20registration%20is%20likely%20the%20issue.%20If%20it%E2%80%99s%20present%20but%20the%20map%20still%20fails%2C%20check%20your%20frontend%20code%20to%20ensure%20it%E2%80%99s%20reading%20and%20passing%20the%20key%20correctly.%0A%0ALet%20me%20know%20what%20you%20find%20in%20the%20network%20response%20or%20if%20you%20want%20a%20concrete%20code%20snippet%20for%20any%20of%20these%20steps%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-15267158 ---- 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]
