Skip to content

Commit f765582

Browse files
committed
Updated readme
1 parent cc8b796 commit f765582

File tree

2 files changed

+21
-50
lines changed

2 files changed

+21
-50
lines changed

poi-search-react/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# poi-search
22

3-
This is supporting code for the Mapbox turorial [Add Point of Interest (POI) Search to a Map in a React app](https://docs.mapbox.com/help/tutorials/poi-search-react/).
3+
This is supporting code for the Mapbox tutorial [Add Point of Interest (POI) Search to a Map in a React app](https://docs.mapbox.com/help/tutorials/poi-search-react/).
44

55
## Overview
66

Lines changed: 20 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,30 @@
1-
# AngularGlJs
1+
# use-mapbox-gl-js-with-angular
22

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/).
44

5-
## Development server
5+
## Overview
66

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.
88

9-
```bash
10-
ng serve
11-
```
129

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).
1416

15-
## Code scaffolding
1617

17-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18+
## Prerequisites
1819

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
2223

23-
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24+
## How to run
2425

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

Comments
 (0)