react-map-gl-markers

Visualize Data Markers Sample

This sample app demonstrates using Amazon Location Service to display pins on an interactive map. Amazon Hub Locker locations in Vancouver, BC, Canada are loaded as static data, then drawn as markers on a map with SVG. The sample uses react-map-gl with MapLibre GL JS, Amazon Location Service, and AWS Amplify.

Implementation

See src/index.js.

Dependencies

react-map-gl: React components used to display maps.

maplibre-gl-js: Used to draw Amazon Location Service provided maps.

aws-amplify: Helps with authentication to get map resources from Amazon Location Service.

maplibre-gl-js-amplify: Used to get map resources from Amazon Location Service using aws-amplify.

See more in package.json

App has been tested on Node.js v16.13.2 and NPM v8.1.2

Getting started

1. Install Node.js
2. Set up map resources for Amazon Location Service by following this guide.
3. Create an Amazon Cognito identity pool by following this guide.
4. Install project dependencies: run npm install from the sample app location on your computer.
5. Fill in required fields for Amazon Cognito and Amazon Location Service in src/configuration.js.
6. Start the app: run npm start from the sample app location on your computer.

Important notes

This project uses aliasing in webpack to alias react-map-gl's Mapbox GL dependency to MapLibre GL JS, as react-map-gl depends on mapbox-gl@^2 by default, which is NOT compatible with Amazon Location Service, as it requires a Mapbox API key. See the react-map-gl guide and webpack.config.js to see how the aliasing works.

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.