Contribute to AWS Amplify
Tags: amplify, amazonlocationservice, aws, opensource
Published: 2023-03-02 11:53:51

This article is an English translation of an article published in the AWS Japan official web magazine "builders.flash".
https://aws.amazon.com/jp/builders-flash/202303/contribute-to-amplify

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7u1j73c4xa2vvhdyzhd.png)

Did you know that AWS has released various Open Source Software (OSS)? AWS has released various OSS such as AWS Amplify, AWS CDK, OpenSearch, AWS CLI, etc.

[Open Source at AWS](https://aws.github.io)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/aws-open-source.png)

I'm a fan of Open Source Software (OSS), so I contribute to OSS in AWS and location-based technologies. "[MIERUNE](https://www.mierune.co.jp/?lang=en)," to which I belong, was founded by members of the community called "[FOSS4G（Free and OpenSource Software for Geospatial）](https://foss4g.org)" and actively supports OSS.

If you are interested in OSS, let's contribute together!

## Contribute to AWS Amplify

Today I will show you how to contribute to AWS Amplify, the OSS of AWS. AWS Amplify is available as OSS on GitHub, with separate repositories for each product.

[AWS Amplify - GitHub](https://github.com/aws-amplify)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-github.png)

An introduction page for contributors is also available.

[AWS Amplify Contributor Program](https://contributetoamplify.com)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-contributor-program.png)

There is also an AWS Amplify user group in Japan, and its community page introduces Japanese contributors.

[Amplify Japan User Group](https://aws-amplify-jp.github.io)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-jp-contributors.png)

Now I will show you how to contribute. I will show you an example of AWS Amplify CLI.

[AWS Amplify CLI - GitHub](https://github.com/aws-amplify/amplify-cli)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-cli.png)

For details on how to contribute, check the "CONTRIBUTING.md" of each repository.

[AWS Amplify CLI - CONTRIBUTING.md](https://github.com/aws-amplify/amplify-cli/blob/dev/CONTRIBUTING.md)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-cli-contributing.png)

Today, I present an example in the following sequence.

1. Creating an Issue
2. Building the Environment
3. Modifying Code
4. Running Tests
5. Verify that the Code Works
6. Create Pull Request for Code
7. Modify Documentation
8. Create Pull Request for Documentation
9. Merge & Release Pull Request

## 1 . Creating an Issue

First, create an Issue. In this case, we will create an Issue for an additional feature request. When you find an issue, create an Issue first before creating a Pull Request.

Go to the AWS Amplify CLI repository → Click Issues → Click New Issue → Click Get started on Feature Request.

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/1-issue_01.png)

In this case, we will create an Issue to add the new map style "Open Data" to Amplify Geo. It would be helpful to include the category name in the title.

[Amplify Geo: New map style (Open Data Maps)](https://github.com/aws-amplify/amplify-cli/issues/11620)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/1-issue_02.png)

```text
Is this feature request related to a new or existing Amplify category?
No response

Is this related to another service?
Amazon Location Service

Describe the feature you'd like to request
A new map style was announced today, but has not yet been added to the Amplify CLI.

https://aws.amazon.com/jp/about-aws/whats-new/2022/12/amazon-location-service-open-data-maps-preview/

Describe the solution you'd like
Add New map style to "amplify add geo" in Amplify CLI.

Describe alternatives you've considered
Because it is difficult to work manually.

Additional context
No response

Is this something that you'd be interested in working on?
 👋 I may be able to implement this feature request
Would this feature include a breaking change?
 ⚠️ This feature might incur a breaking change
```


## 2 . Building the Environment

Next, prepare the development environment. Fork the AWS Amplify CLI repository and install the development environment. Also, prepare Git and Node.js environment in advance. In this example, [GitHub Desktop](https://desktop.github.com) is used as the tool, but commands or other GUI tools can also be used.

Fork the AWS Amplify CLI repository.

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/2-dev_01.png)

Create a working branch, which should include the category name.

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/2-dev_02.png)

Install the development environment in the forked directory.

Verified version at the time of writing

- node v16.10.0
- npm v7.24.0

```sh
# Linux / macOS
yarn setup-dev
```

```sh
yarn run v1.18.0
$ yarn dev-build && yarn rm-dev-link && yarn link-dev && yarn rm-aa-dev-link && yarn link-aa-dev
$ yarn --cache-folder ~/.cache/yarn && nx run-many --target=build --all
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
    ✔  nx run amplify-cli-logger:build (3s)
    ✔  nx run amplify-function-plugin-interface:build (3s)
    ✔  nx run amplify-storage-simulator:build (3s)
    ✔  nx run amplify-cli-shared-interfaces:build (3s)
    ✔  nx run amplify-headless-interface:build (3s)
    ✔  nx run amplify-util-import:build (3s)
    ✔  nx run amplify-go-function-template-provider:build (2s)
    ✔  nx run amplify-python-function-template-provider:build (2s)
    ✔  nx run amplify-java-function-template-provider:build (2s)
    ✔  nx run amplify-util-headless-input:build (2s)
    ✔  nx run amplify-prompts:build (3s)
    ✔  nx run amplify-dotnet-function-runtime-provider:build (2s)
    ✔  nx run amplify-cli-core:build (3s)
    ✔  nx run @aws-amplify/amplify-opensearch-simulator:build (4s)
    ✔  nx run @aws-amplify/amplify-category-custom:build (4s)
    ✔  nx run amplify-category-interactions:build (5s)
    ✔  nx run @aws-amplify/amplify-environment-parameters:build (10s)
    ✔  nx run @aws-amplify/amplify-util-uibuilder:build (10s)
    ✔  nx run amplify-category-geo:build (10s)
    ✔  nx run amplify-container-hosting:build (5s)
    ✔  nx run amplify-dotnet-function-template-provider:build (5s)
    ✔  nx run @aws-amplify/amplify-e2e-core:build (10s)
    ✔  nx run amplify-category-predictions:build (10s)
    ✔  nx run amplify-java-function-runtime-provider:build (5s)
    ✔  nx run amplify-go-function-runtime-provider:build (5s)
    ✔  nx run amplify-nodejs-function-template-provider:build (5s)
    ✔  nx run amplify-nodejs-function-runtime-provider:build (5s)
    ✔  nx run amplify-python-function-runtime-provider:build (4s)
    ✔  nx run @aws-amplify/cli-extensibility-helper:build (4s)
    ✔  nx run amplify-category-notifications:build (4s)
    ✔  nx run amplify-category-analytics:build (4s)
    ✔  nx run amplify-console-hosting:build (4s)
    ✔  nx run amplify-category-function:build (7s)
    ✔  nx run amplify-dynamodb-simulator:build (12s)
    ✔  nx run @aws-amplify/amplify-category-storage:build (4s)
    ✔  nx run @aws-amplify/amplify-category-auth:build (6s)
    ✔  nx run amplify-provider-awscloudformation:build (6s)
    ✔  nx run @aws-amplify/amplify-graphiql-explorer:build (37s)
    ✔  nx run @aws-amplify/amplify-appsync-simulator:build (5s)
    ✔  nx run amplify-util-mock:build (5s)
    ✔  nx run @aws-amplify/cli-internal:build (5s)
    ✔  nx run @aws-amplify/cli:build (2s)

 ——————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for 42 projects (54s)

$ rimraf -f "$(yarn global bin)/amplify-dev"
$ cd packages/amplify-cli && ln -s "$(pwd)/bin/amplify" "$(yarn global bin)/amplify-dev" && cd -
/Users/dayjournal/Documents/GitHub/amplify-cli
$ rimraf -f "$(yarn global bin)/amplify-app-dev"
$ cd packages/amplify-app && ln -s "$(pwd)/bin/amplify-app" "$(yarn global bin)/amplify-app-dev" && cd -
/Users/dayjournal/Documents/GitHub/amplify-cli
✨  Done in 130.87s.
```

## 3 . Modifying Code

Next, modify the code. Modify the files related to the Amplify Geo category to add the new map style "Open Data."

#### packages/amplify-category-geo/src/service-utils/mapParams.ts

```diff
- export type MapStyleType = EsriMapStyleType | HereMapStyleType;
+   /**
+   * The type of Map styles for Open data provider
+   */
+   export enum OpenDataMapStyleType {
+     StandardLight = "StandardLight"
+   }
+ 
+ export type MapStyleType = EsriMapStyleType | HereMapStyleType | OpenDataMapStyleType;

/**
 * Supported Geo Map Styles
 */
export enum MapStyle {
    VectorEsriNavigation = "VectorEsriNavigation",
    VectorEsriStreets = "VectorEsriStreets",
    VectorEsriTopographic = "VectorEsriTopographic",
    VectorEsriDarkGrayCanvas = "VectorEsriDarkGrayCanvas",
    VectorEsriLightGrayCanvas = "VectorEsriLightGrayCanvas",
    RasterEsriImagery = "RasterEsriImagery",
    VectorHereBerlin = "VectorHereBerlin",
    VectorHereExplore = "VectorHereExplore",
    VectorHereExploreTruck = "VectorHereExploreTruck",
    RasterHereExploreSatellite = "RasterHereExploreSatellite",
-   HybridHereExploreSatellite = "HybridHereExploreSatellite"
+   HybridHereExploreSatellite = "HybridHereExploreSatellite",
+   VectorOpenDataStandardLight = "VectorOpenDataStandardLight"
}

    switch(mapStyle) {
        case MapStyle.VectorEsriDarkGrayCanvas:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.DarkGrayCanvas };
        case MapStyle.VectorEsriLightGrayCanvas:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.LightGrayCanvas };
        case MapStyle.VectorEsriNavigation:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.Navigation };
        case MapStyle.VectorEsriStreets:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.Streets };
        case MapStyle.VectorEsriTopographic:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.Topographic };
        case MapStyle.RasterEsriImagery:
            return { dataProvider: DataProvider.Esri, mapStyleType: EsriMapStyleType.Imagery };
        case MapStyle.VectorHereBerlin:
            return { dataProvider: DataProvider.Here, mapStyleType: HereMapStyleType.Berlin };
        case MapStyle.VectorHereExplore:
            return { dataProvider: DataProvider.Here, mapStyleType: HereMapStyleType.Explore };
        case MapStyle.VectorHereExploreTruck:
            return { dataProvider: DataProvider.Here, mapStyleType: HereMapStyleType.ExploreTruck };
        case MapStyle.RasterHereExploreSatellite:
            return { dataProvider: DataProvider.Here, mapStyleType: HereMapStyleType.RasterSatellite };
        case MapStyle.HybridHereExploreSatellite:
            return { dataProvider: DataProvider.Here, mapStyleType: HereMapStyleType.HybridSatellite };
+       case MapStyle.VectorOpenDataStandardLight:
+           return { dataProvider: DataProvider.OpenData, mapStyleType: OpenDataMapStyleType.StandardLight };
        default:
            throw new Error(`Invalid map style ${mapStyle}`);
    }
```

#### packages/amplify-category-geo/src/__tests__/service-utils/mapParams.test.ts

```diff
describe('map style construction works as expected', () => {
    const mapStyles = [
        "VectorEsriStreets",
        "VectorEsriNavigation",
        "VectorEsriTopographic",
        "VectorEsriDarkGrayCanvas",
        "VectorEsriLightGrayCanvas",
        "RasterEsriImagery",
        "VectorHereBerlin",
        "VectorHereExplore",
        "VectorHereExploreTruck",
        "RasterHereExploreSatellite",
-       "HybridHereExploreSatellite"
+       "HybridHereExploreSatellite",
+       "VectorOpenDataStandardLight"
    ];
```

#### packages/amplify-category-geo/src/service-utils/resourceParams.ts

```diff
export enum DataProvider {
    Esri = 'Esri',
-   Here = 'HERE'
+   Here = 'HERE',
+   OpenData = 'OpenData',
}
```

#### packages/amplify-category-geo/src/service-walkthroughs/mapWalkthrough.ts

```diff
export const mapStyleWalkthrough = async (parameters: Partial<MapParameters>): Promise<Partial<MapParameters>> => {
    const mapStyleChoices = [
        { name: 'Streets (data provided by Esri)', value: MapStyle.VectorEsriStreets },
        { name: 'Berlin (data provided by HERE)', value: MapStyle.VectorHereBerlin },
        { name: 'Explore (data provided by HERE)', value: MapStyle.VectorHereExplore },
        { name: 'ExploreTruck (data provided by HERE)', value: MapStyle.VectorHereExploreTruck },
        { name: 'RasterSatellite (data provided by HERE)', value: MapStyle.RasterHereExploreSatellite },
        { name: 'HybridSatellite (data provided by HERE)', value: MapStyle.HybridHereExploreSatellite },
        { name: 'Topographic (data provided by Esri)', value: MapStyle.VectorEsriTopographic },
        { name: 'Navigation (data provided by Esri)', value: MapStyle.VectorEsriNavigation },
        { name: 'LightGrayCanvas (data provided by Esri)', value: MapStyle.VectorEsriLightGrayCanvas },
        { name: 'DarkGrayCanvas (data provided by Esri)', value: MapStyle.VectorEsriDarkGrayCanvas },
-       { name: 'Imagery (data provided by Esri)', value: MapStyle.RasterEsriImagery }
+       { name: 'Imagery (data provided by Esri)', value: MapStyle.RasterEsriImagery },
+       { name: 'StandardLight (data provided by OpenStreetMap)', value: MapStyle.VectorOpenDataStandardLight }
    ];
```

#### packages/amplify-headless-interface/schemas/geo/1/AddGeoRequest.schema.json

```diff
        "MapStyle": {
            "description": "Supported Geo Map Styles",
            "enum": [
                "VectorEsriDarkGrayCanvas",
                "VectorEsriLightGrayCanvas",
                "VectorEsriNavigation",
                "VectorEsriStreets",
                "VectorEsriTopographic",
                "RasterEsriImagery",
                "VectorHereBerlin",
                "VectorHereExplore",
                "VectorHereExploreTruck",
                "RasterHereExploreSatellite",
-               "HybridHereExploreSatellite"
+               "HybridHereExploreSatellite",
+               "VectorOpenDataStandardLight"
            ],
            "type": "string"
        }
```

#### packages/amplify-headless-interface/src/interface/geo/add.ts

```diff
/**
 * Supported Geo Map Styles
 */
 export enum MapStyle {
  VectorEsriNavigation = "VectorEsriNavigation",
  VectorEsriStreets = "VectorEsriStreets",
  VectorEsriTopographic = "VectorEsriTopographic",
  VectorEsriDarkGrayCanvas = "VectorEsriDarkGrayCanvas",
  VectorEsriLightGrayCanvas = "VectorEsriLightGrayCanvas",
  RasterEsriImagery = "RasterEsriImagery",
  VectorHereBerlin = "VectorHereBerlin",
  VectorHereExplore = "VectorHereExplore",
  VectorHereExploreTruck = "VectorHereExploreTruck",
  RasterHereExploreSatellite = "RasterHereExploreSatellite",
- HybridHereExploreSatellite = "HybridHereExploreSatellite"
+ HybridHereExploreSatellite = "HybridHereExploreSatellite",
+ VectorOpenDataStandardLight = "VectorOpenDataStandardLight"
}
```

#### packages/amplify-headless-interface/API.md

```diff
// @public (undocumented)
export enum MapStyle {
    // (undocumented)
    HybridHereExploreSatellite = "HybridHereExploreSatellite",
    // (undocumented)
    RasterEsriImagery = "RasterEsriImagery",
    // (undocumented)
    RasterHereExploreSatellite = "RasterHereExploreSatellite",
    // (undocumented)
    VectorEsriDarkGrayCanvas = "VectorEsriDarkGrayCanvas",
    // (undocumented)
    VectorEsriLightGrayCanvas = "VectorEsriLightGrayCanvas",
    // (undocumented)
    VectorEsriNavigation = "VectorEsriNavigation",
    // (undocumented)
    VectorEsriStreets = "VectorEsriStreets",
    // (undocumented)
    VectorEsriTopographic = "VectorEsriTopographic",
    // (undocumented)
    VectorHereBerlin = "VectorHereBerlin",
    // (undocumented)
    VectorHereExplore = "VectorHereExplore",
    // (undocumented)
-   VectorHereExploreTruck = "VectorHereExploreTruck"
+   VectorHereExploreTruck = "VectorHereExploreTruck",
+   // (undocumented)
+   VectorOpenDataStandardLight = "VectorOpenDataStandardLight"
}
```

## 4 . Running Tests

Next, we will run the test and build relationships.

Run in the forked directory.

```sh
yarn lint-fix
```

```sh
yarn run v1.18.0
$ git diff --name-only --cached --diff-filter d | grep -E '\.(js|jsx|ts|tsx)$' | xargs eslint --fix --quiet
✨  Done in 0.06s.
```

Run in the directory of the category to be modified. We will run the test in the "amplify-cli/packages/amplify-category-geo" directory.

```sh
yarn build
```

```sh
yarn run v1.18.0
$ tsc
✨  Done in 4.51s.
```

```sh
yarn test
```

```sh
yarn run v1.18.0
$ jest --logHeapUsage
 PASS  src/__tests__/service-utils/validateGeoJSONObj.test.ts (10.153 s, 853 MB heap size)
 PASS  src/__tests__/service-utils/serviceUtils.test.ts (14.444 s, 977 MB heap size)
 PASS  src/__tests__/service-walkthroughs/mapWalkthrough.test.ts (14.546 s, 984 MB heap size)
 PASS  src/__tests__/commands/geo/add.test.ts (14.427 s, 984 MB heap size)
 PASS  src/__tests__/service-walkthroughs/placeIndexWalkthrough.test.ts (14.658 s, 1058 MB heap size)
 PASS  src/__tests__/service-utils/resourceUtils.test.ts (14.504 s, 1063 MB heap size)
 PASS  src/__tests__/commands/geo/update.test.ts (14.516 s, 1052 MB heap size)
 PASS  src/__tests__/service-walkthroughs/geofenceCollectionWalkthrough.test.ts (14.612 s, 1042 MB heap size)
 PASS  src/__tests__/commands/geo/remove.test.ts (1063 MB heap size)
 PASS  src/__tests__/index.test.ts (14.818 s, 1053 MB heap size)
 PASS  src/__tests__/service-utils/mapParams.test.ts (999 MB heap size)
 PASS  src/__tests__/service-stacks/mapStack.test.ts (1053 MB heap size)
 PASS  src/__tests__/service-stacks/placeIndexStack.test.ts (1053 MB heap size)
 PASS  src/__tests__/provider-controllers/index.test.ts (1124 MB heap size)
 PASS  src/__tests__/service-stacks/geofenceCollectionStack.test.ts (1132 MB heap size)
-------------------|---------|----------|---------|---------|-------------------
File               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------------|---------|----------|---------|---------|-------------------
All files          |   68.84 |    58.41 |   56.81 |   67.26 |
 src               |      55 |       25 |      40 |   51.78 |
  constants.ts     |     100 |      100 |     100 |     100 |
  index.ts         |   52.63 |       25 |      40 |   49.05 | ...58,62-63,76-85
  ...edServices.ts |     100 |      100 |     100 |     100 |
 src/commands/geo  |   53.27 |        0 |      50 |   50.49 |
  add.ts           |   56.52 |        0 |     100 |   54.54 | 21-22,27-36
  console.ts       |   57.14 |        0 |       0 |   53.84 | 11-18
  help.ts          |   55.55 |      100 |       0 |      50 | 8-35
  import.ts        |   33.33 |        0 |       0 |   28.57 | 8-20
  remove.ts        |   56.52 |        0 |     100 |   54.54 | 16-17,23-32
  update.ts        |   56.52 |        0 |     100 |   54.54 | 21-22,27-36
 ...er-controllers |   43.36 |    38.04 |   15.78 |   39.27 |
  ...Collection.ts |   61.53 |       75 |   33.33 |      60 | 23-34,40-51
  import.ts        |   18.42 |        0 |       0 |    17.8 | ...09-120,129-142
  index.ts         |      39 |    21.62 |   18.75 |   31.76 | ...40-152,163-172
  map.ts           |   60.71 |       75 |   14.28 |   56.25 | ...,94-98,105-111
  placeIndex.ts    |   60.52 |       75 |   33.33 |   58.82 | 15-26,32-43
 ...service-stacks |     100 |    93.75 |     100 |     100 |
  baseStack.ts     |     100 |      100 |     100 |     100 |
  ...ctionStack.ts |     100 |      100 |     100 |     100 |
  mapStack.ts      |     100 |    88.88 |     100 |     100 | 35
  ...IndexStack.ts |     100 |      100 |     100 |     100 |
 src/service-utils |   69.41 |    68.57 |   54.92 |    67.4 |
  constants.ts     |     100 |      100 |     100 |     100 |
  ...tionParams.ts |   41.66 |        0 |       0 |   33.33 | 15-17,21-24
  ...ctionUtils.ts |   56.06 |    71.42 |    37.5 |   52.45 | ...98-102,110-119
  importParams.ts  |     100 |      100 |     100 |     100 |
  mapParams.ts     |    89.7 |    97.14 |   66.66 |   90.47 | 66-68,72-75
  mapUtils.ts      |   59.49 |       75 |      50 |   56.16 | ...93-105,112-122
  ...ndexParams.ts |   53.33 |    66.66 |      25 |      50 | 24-26,30-33
  ...IndexUtils.ts |   56.16 |    68.75 |    37.5 |   52.94 | ...96-110,117-128
  ...urceParams.ts |     100 |      100 |     100 |     100 |
  resourceUtils.ts |   64.07 |    36.84 |   57.89 |   59.77 | ...95-200,215-229
  ...GeoJSONObj.ts |   98.14 |    94.11 |     100 |   98.03 | 47
 ...e-walkthroughs |   83.69 |    64.95 |   81.81 |   83.05 |
  ...alkthrough.ts |   84.44 |    71.79 |   88.88 |   84.14 | 65-74,138-143,164
  ...alkthrough.ts |   85.88 |    62.96 |      80 |   85.33 | ...07,130-135,157
  ...alkthrough.ts |    87.8 |       68 |    87.5 |   86.48 | ...94,117-122,144
  ...alkthrough.ts |     100 |      100 |     100 |     100 |
  ...alkthrough.ts |   70.17 |       52 |      60 |   70.37 | ...2,59,78,88-102
-------------------|---------|----------|---------|---------|-------------------

Test Suites: 15 passed, 15 total
Tests:       72 passed, 72 total
Snapshots:   20 passed, 20 total
Time:        17.207 s
Ran all test suites.
✨  Done in 17.89s.
```

## 5 . Verify that the Code Works

Next, check the functionality. Create an empty working directory and execute it.

Configure initial settings for AWS Amplify.

```sh
/Users/[User Name]/.yarn/bin/amplify-dev init
```

```sh
⚠️ Amplify command hooks are disabled in the current execution environment.
⚠️ See https://docs.amplify.aws/cli/usage/command-hooks/ for more information.
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amazonlocationservic
The following configuration will be applied:

Project information
| Name: amazonlocationservic
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: xxxxx

Deployment completed.
Deployed root stack amazonlocationservic [ ===========================
 amplify-amazonlocationservic-… AWS::CloudFormation::Stack     CREATE_
 AuthRole                       AWS::IAM::Role                 CREATE_
 DeploymentBucket               AWS::S3::Bucket                CREATE_
 UnauthRole                     AWS::IAM::Role                 CREATE_

✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · yes

Deployment state saved successfully.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify push" to deploy everything
```

Configure the authentication settings.

```sh
/Users/[User Name]/.yarn/bin/amplify-dev add auth
```

```sh
⚠️ Amplify command hooks are disabled in the current execution environment.
⚠️ See https://docs.amplify.aws/cli/usage/command-hooks/ for more information.
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource xxxxx locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
```

Configure the map function. Select the new map style "Open Data."

```sh
/Users/[User Name]/.yarn/bin/amplify-dev add geo
```

```sh
⚠️ Amplify command hooks are disabled in the current execution environment.
⚠️ See https://docs.amplify.aws/cli/usage/command-hooks/ for more information.
? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: · xxxxx
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · yes
✔ Specify the map style. Refer https://docs.aws.amazon.com/location-maps/latest/APIReference/API_MapConfiguration.html · StandardLight (data provided by OpenStreetMap)

⚠️ Auth configuration is required to allow unauthenticated users, but it is not configured properly.
✅ Successfully updated auth resource locally.
✅ Successfully added resource xxxxx locally.

✅ Next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud
```

After completing the settings, deploy the environment.

```sh
/Users/[User Name]/.yarn/bin/amplify-dev push
```

```sh
⚠️ Amplify command hooks are disabled in the current execution environment.
⚠️ See https://docs.amplify.aws/cli/usage/command-hooks/ for more information.
⠙ Fetching updates to backend environment: dev from the cloud.⠋ Building resource auth/xxxxx
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬──────────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name                │ Operation │ Provider plugin   │
├──────────┼──────────────────────────────┼───────────┼───────────────────┤
│ Auth     │ xxxxx                        │ Create    │ awscloudformation │
├──────────┼──────────────────────────────┼───────────┼───────────────────┤
│ Geo      │ xxxxx                        │ Create    │ awscloudformation │
└──────────┴──────────────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Deployment completed.
Deployed root stack amazonlocationservic [ ===========================
 amplifyxxxxx                   AWS::CloudFormation::Stack     UPDATE_
 authxxxxx                      AWS::CloudFormation::Stack     CREATE_
 geomapxxxxx                    AWS::CloudFormation::Stack     CREATE_
Deployed auth xxxxx                      [ =========================
 UserPool                       AWS::Cognito::UserPool         CREATE_
 UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_
 UserPoolClient                 AWS::Cognito::UserPoolClient   CREATE_
 UserPoolClientRole             AWS::IAM::Role                 CREATE_
 UserPoolClientLambda           AWS::Lambda::Function          CREATE_
 UserPoolClientLambdaPolicy     AWS::IAM::Policy               CREATE_
 UserPoolClientLogPolicy        AWS::IAM::Policy               CREATE_
 UserPoolClientInputs           Custom::LambdaCallout          CREATE_
 IdentityPool                   AWS::Cognito::IdentityPool     CREATE_
 IdentityPoolRoleMap            AWS::Cognito::IdentityPoolRol… CREATE_
Deployed geo mapc9d7723d [ ======================================== ]
 CustomMapLambdaServiceRole4EE… AWS::IAM::Role                 CREATE_
 CustomMapLambdaServiceRoleDef… AWS::IAM::Policy               CREATE_
 CustomMapLambda51D5D430        AWS::Lambda::Function          CREATE_
 CustomMap                      Custom::LambdaCallout          CREATE_
 MapPolicy                      AWS::IAM::Policy               CREATE_
```

Next, build the environment for displaying the map application. Use the starter "[amazon-location-service-starter](https://github.com/dayjournal/amazon-location-service-starter)" and others introduced in the article "[Amazon Location Service and AWS Amplify to Use Various Map Library](https://dev.to/aws-heroes/amazon-location-service-and-aws-amplify-to-use-various-map-library-4mmk)" and place the necessary files in the directory you have created.

Install the packages

```sh
npm install
```

Start local server

```sh
npm run dev
```

The new map style "Open Data" will appear.

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/5-map_01.png)

## 6 . Create Pull Request for Code

Next, create a Pull Request for the code. It is helpful to include the category name in the title.

[feat(category-geo): add new map style 2022.12](https://github.com/aws-amplify/amplify-cli/pull/11621)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/6-pullrequest_01.png)

```text
Description of changes
  - New map styles were added.
    - "VectorOpenDataStandardLight"

Issue #, if available
#11620

Description of how you validated changes
Checklist
 PR description included
 yarn test passes
 Tests are changed or added
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
```

## 7 . Modify Documentation

Next, modify the documentation. After modifying the code, it is helpful to modify the documentation as well.

Fork the [Amplify Documentation](https://github.com/aws-amplify/docs) repository, create a working branch, and modify the target files.

#### src/pages/cli/geo/maps.mdx

```diff
? Specify the map style:
❯ Streets (data provided by Esri)
  Berlin (data provided by HERE)
  Explore (data provided by HERE)
  ExploreTruck (data provided by HERE)
  RasterSatellite (data provided by HERE)
  HybridSatellite (data provided by HERE)
  Topographic (data provided by Esri)
  Navigation (data provided by Esri)
  LightGrayCanvas (data provided by Esri)
  DarkGrayCanvas (data provided by Esri)
  Imagery (data provided by Esri)
+ StandardLight (data provided by OpenStreetMap)
```

## 8 . Create Pull Request for Documentation

Next, create a Pull Request for the document. It is helpful to include links to the Issue and Code Pull Request in the body of the message.

[Map Style Add](https://github.com/aws-amplify/docs/pull/4964)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/8-pullrequest_01.png)

```text
Issue #, if available:
aws-amplify/amplify-cli#11620
aws-amplify/amplify-cli#11621

Description of changes:
New map styles were added.
StandardLight (data provided by OpenStreetMap)
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
```

## 9 . Merge & Release Pull Request

Finally, the Pull Request is merged and released. Merge is pending confirmation from the maintainer. If there are no problems, the request is merged as is, but if modifications are necessary, the maintainer will send comments to be addressed. After the merge, the release will take several weeks to a month to complete.

Release after the merge will take several weeks to a month to complete.

[AWS Amplify CLI - Release v10.7.0](https://github.com/aws-amplify/amplify-cli/releases/tag/v10.7.0)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/9-release_01.png)

[Amplify Docs - Geo Maps](https://docs.amplify.aws/cli/geo/maps/#advanced-settings)

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/9-release_02.png)

## Summary

Contributing to AWS Amplify will help many users. It is also great to see the features you add become available worldwide. Contributing to creating Issues for bug reports and feature requests will also help users.

Let's start where you can together! I hope this example is helpful to anyone who wants to contribute to AWS Amplify!

If you continue to contribute, you could be contacted by maintainers and possibly get a limited SWAG！

![img](https://day-journal.com/memo/images/builders-flash/202302_contribute-to-amplify/amplify-swag.png)

AWS Amplify has an active community. There's an official Discord and Slack, so be sure to join! You'll connect with engineers from all over the world!

[AWS Amplify - Discord (ENG)](https://discord.com/invite/amplify)
[Amplify Japan User Group - Slack (JPN)](https://join.slack.com/t/aws-amplify-jp/shared_invite/zt-mujrr2hy-QI_5MR7qp9vLFYEMbAorhw)

<br>

Related Articles
{% link https://dev.to/aws-heroes/amazon-location-service-and-aws-amplify-to-use-various-map-library-4mmk %}
{% link https://dev.to/aws-builders/build-a-unique-domain-hosting-environment-for-google-domains-with-aws-amplify-19jn %}
{% link https://dev.to/aws-builders/build-a-unique-domain-hosting-environment-with-aws-amplify-3jl0 %}
{% link https://dev.to/aws-builders/trying-out-various-settings-for-aws-amplify-publishing-39i4 %}

<br>

References
[AWS Amplify](https://aws.amazon.com/amplify)