npm create @mapbox/web-app
The npm create @mapbox/web-app package is a CLI tool that uses Vite templates to quickly build a project into the following frameworks:
- Vanilla JS (with & without a bundler)
- React
- Vue
- Svelte
- Angular
You can also also add interactive search to your map by adding Mapbox Search JS via the install prompts.
The CLI tooling asks 4 questions:
- Which framework do you want to use?
- Choose a project name..
- Access Token - Insert your public Mapbox access token and the tooling will pass this into the appropriate local
.env file. Get yours from your developer console
- Add Search JS (or not)
After answering those questions you'll have a full-screen Mapbox GL JS map loading in the browser within seconds, ready for you to customize. π₯
Next Steps
Now that you have a full screen map loaded, where do you want to go next? If you are a new developer using Mapbox, you can expand this simple application by following one of these tutorials:
The tutorials above demonstrate state management best practices for these frameworks, how to track & display map state into the application UI and how to trigger map events from the UI.
If you are an experienced developer and are familiar with Mapbox products, you can browse our tutorials for inspiration or search them for your use case.
More Information on Github
You can find more information about this CLI tool and report issues on Github.