|
1 | | -# AngularGlJs |
| 1 | +# use-mapbox-gl-js-with-angular |
2 | 2 |
|
3 | | -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.12. |
| 3 | +This is supporting code for the Mapbox tutorial [Use Mapbox GL JS in an Angular app](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-angular/). |
4 | 4 |
|
5 | | -## Development server |
| 5 | +## Overview |
6 | 6 |
|
7 | | -To start a local development server, run: |
| 7 | +This tutorial walks through how to setup [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) in an [Angular](https://angular.dev) project. |
8 | 8 |
|
9 | | -```bash |
10 | | -ng serve |
11 | | -``` |
12 | 9 |
|
13 | | -Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. |
| 10 | +You'll learn how to: |
| 11 | +- How to set up an Angular app using the Angular CLI. |
| 12 | +- How to install Mapbox GL JS and its dependencies. |
| 13 | +- Use Mapbox GL JS to render a full screen map. |
| 14 | +- How to add a toolbar which displays map state like `longitude`, `latitude`, and `zoom` level and is updated as the map is interacted with (showing the map to app data flow). |
| 15 | +- How to create a UI button to reset the map to its original view (showing the app to map data flow). |
14 | 16 |
|
15 | | -## Code scaffolding |
16 | 17 |
|
17 | | -Angular CLI includes powerful code scaffolding tools. To generate a new component, run: |
| 18 | +## Prerequisites |
18 | 19 |
|
19 | | -```bash |
20 | | -ng generate component component-name |
21 | | -``` |
| 20 | +- Node v18.20 or higher |
| 21 | +- [Angular CLI](https://angular.dev/tools/cli) |
| 22 | +- npm |
22 | 23 |
|
23 | | -For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: |
| 24 | +## How to run |
24 | 25 |
|
25 | | -```bash |
26 | | -ng generate --help |
27 | | -``` |
28 | | - |
29 | | -## Building |
30 | | - |
31 | | -To build the project run: |
32 | | - |
33 | | -```bash |
34 | | -ng build |
35 | | -``` |
36 | | - |
37 | | -This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. |
38 | | - |
39 | | -## Running unit tests |
40 | | - |
41 | | -To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: |
42 | | - |
43 | | -```bash |
44 | | -ng test |
45 | | -``` |
46 | | - |
47 | | -## Running end-to-end tests |
48 | | - |
49 | | -For end-to-end (e2e) testing, run: |
50 | | - |
51 | | -```bash |
52 | | -ng e2e |
53 | | -``` |
54 | | - |
55 | | -Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. |
56 | | - |
57 | | -## Additional Resources |
58 | | - |
59 | | -For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. |
| 26 | +- Clone this repository and navigate to this directory |
| 27 | +- Install [Angular CLI](https://angular.dev/tools/cli) (if not already installed) |
| 28 | +- Install dependencies with `npm install` |
| 29 | +- Replace `YOUR_MAPBOX_ACCESS_TOKEN` in `src/app/map/map.component.ts` with an access token from your [Mapbox account](https://console.mapbox.com/). |
| 30 | +- Run the development server with `npm start` and open the app in your browser at [http://localhost:4200](http://localhost:4200). |
0 commit comments