This example demonstrates how to display markers on a web map using React, react-map-gl. It uses Amazon Location Service's Maps as the base map provider and MapLibre GL JS (via react-map-gl) as the map rendering library.
Click the button below to create the necessary AWS resources for this sample app to run. It will open the AWS Management Console and initiate the CloudFormation template deployment process.
Once the deployment process is complete, go to the Outputs section to get the Amazon Location Maps ApiKey, AWS Region.
- In stack output's tab only the ApiKey name is visible, in order to get the ApiKey value
- Navigate to Amazon Location Service
- Click on "API keys" from the left navigation pane
- Click on the ApiKey name
- Copy the ApiKey value
Copy .env.example to .env and populate environment variables with the CloudFormation stack outputs.
Run npm start to start a local web server on localhost:3000 with this example and open it in a browser.
To remove all of the resources created in this walkthrough, delete the CloudFormation stack named react-map-with-markers.
- Have a bug to report? Open an issue. If possible, include details about your development environment, and an example that shows the issue.
- Have an example request? Open an issue. Tell us what the example should do and why you want it.
See CONTRIBUTING for more information.
See CONTRIBUTING for more information.
This library is licensed under the MIT-0 License. See the LICENSE file.