{"id":23729720,"url":"https://github.com/azure/react-azure-maps","last_synced_at":"2025-05-16T18:10:38.053Z","repository":{"id":36952319,"uuid":"216561402","full_name":"Azure/react-azure-maps","owner":"Azure","description":"React Wrapper for azure-maps-control","archived":false,"fork":false,"pushed_at":"2025-04-17T03:56:58.000Z","size":5303,"stargazers_count":57,"open_issues_count":25,"forks_count":35,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-10T00:12:12.833Z","etag":null,"topics":["azure","azure-maps","azure-maps-control","map","maps","reacjs","react","react-azure-map","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Azure.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-21T12:22:34.000Z","updated_at":"2025-05-06T15:10:29.000Z","dependencies_parsed_at":"2023-01-17T07:46:29.288Z","dependency_job_id":"6f8c73b9-0377-45a2-a0c4-4826d0f31c01","html_url":"https://github.com/Azure/react-azure-maps","commit_stats":{"total_commits":120,"total_committers":16,"mean_commits":7.5,"dds":0.8083333333333333,"last_synced_commit":"68e56137cc59050b5224a8464463bd3e083fa466"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Freact-azure-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Freact-azure-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Freact-azure-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure%2Freact-azure-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azure","download_url":"https://codeload.github.com/Azure/react-azure-maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","azure-maps","azure-maps-control","map","maps","reacjs","react","react-azure-map","typescript"],"created_at":"2024-12-31T02:17:48.493Z","updated_at":"2025-05-16T18:10:38.012Z","avatar_url":"https://github.com/Azure.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Azure-Maps\n\nThis project is community-driven initiative originally created by amazing [@psrednicki](https://github.com/psrednicki), [@msasinowski](https://github.com/msasinowski) and [@tbajda](https://github.com/tbajda) and is now maintained by the Azure Maps team.\n\n[![npm](https://img.shields.io/npm/v/react-azure-maps.svg) ![npm](https://img.shields.io/npm/dm/react-azure-maps.svg)](https://www.npmjs.com/package/react-azure-maps) [![license](https://img.shields.io/npm/l/react-azure-maps.svg)](https://github.com/Azure/react-azure-maps/blob/master/LICENSE)\n\n`React Azure Maps` is a react wrapper for [Azure Maps](https://azure.microsoft.com/pl-pl/services/azure-maps/). The whole library is written in typescript and uses React 16.8+\n\n## Installation\n\nUse the package manager `npm` or `yarn`\n\n```bash\nnpm install react-azure-maps\n```\n\nor\n\n```bash\nyarn add react-azure-maps\n```\n\n## Styling\nEmbed the following css to your application. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly.\n```javascript\nimport 'azure-maps-control/dist/atlas.min.css'\n```\n\n## Documentation\n\nDocumentation is available [Documentation](https://react-azure-maps.now.sh)\n\nGenerated documentation from typedoc is available [Documentation](https://azure.github.io/react-azure-maps/)\n\n## Compatibility with azure-maps-controls\n\n```\n1.0.0 - 3.0.0\n0.2.0 - 2.0.32\n0.1.4 - 2.0.31\n0.1.3 - 2.0.25\n```\n\n## Playground\n\n`React Azure Maps` have a fully documented [Playground Package](https://github.com/Azure/react-azure-maps-playground) that implements a lot of features from [Azure Maps Code Samples](https://samples.azuremaps.com/). If you implement new usage of the map and want to be contributor just create a PR.\n\n## Library Implementation Details\n\nFor typescript integration and core functionalities, this library uses the newest version of [Azure Maps Control](https://www.npmjs.com/package/azure-maps-control).\nThe library is implemented under the hood on `Contexts` and uses all benefits of new react features, like new context API, hooks, etc. Across the whole library, there are three main references that depend on the basic `Azure Maps API`\n\n`MapReference` which is stored and implemented in\n\n```javascript\nAzureMapsProvider\n```\n\n`DataSourceReference` which is stored and implemented in\n\n```javascript\nAzureMapDataSourceProvider\n```\n\n`LayerReference` which is stored and implemented in\n\n```javascript\nAzureMapLayerProvider\n```\n\nIf you want to directly make some changes in the above refs just use one of these contexts and feel free to use it any way you want.\nThe library implements a lot of ready to use components like `AzureMapFeature, AzureMapHTMLMarker, AzureMapPopup`\n\n## Basic Usage\n\n```javascript\nimport React from 'react'\nimport {AzureMap, AzureMapsProvider, IAzureMapOptions, AuthenticationType} from 'react-azure-maps'\n\nconst option: IAzureMapOptions = {\n    authOptions: {\n        authType: AuthenticationType.subscriptionKey,\n        subscriptionKey: '' // Your subscription key\n    },\n}\n\nconst DefaultMap: React.FC = () =\u003e (\n  \u003cAzureMapsProvider\u003e\n    \u003cdiv style={{ height: '300px' }}\u003e\n      \u003cAzureMap options={option} /\u003e\n    \u003c/div\u003e\n  \u003c/AzureMapsProvider\u003e\n);\n\nexport default DefaultMap\n```\n\n## Authentication\n\nThe subscription key is intended for development environments only and must not be utilized in a production application. Azure Maps provides various authentication options for applications to use. See [here](https://learn.microsoft.com/en-us/azure/azure-maps/how-to-manage-authentication) for more details.\n\n```javascript\n// AAD\nauthOptions: {\n    authType: AuthenticationType.aad,\n    clientId: '...',\n    aadAppId: '...',\n    aadTenant: '...'\n}\n```\n\n```javascript\n// Anonymous\nauthOptions: {\n    authType: AuthenticationType.anonymous,\n    clientId: '...',\n    getToken: (resolve, reject) =\u003e {\n        // URL to your authentication service that retrieves an Azure Active Directory Token.\n        var tokenServiceUrl = \"https://example.com/api/GetAzureMapsToken\";\n        fetch(tokenServiceUrl).then(r =\u003e r.text()).then(token =\u003e resolve(token));\n    }\n}\n```\n\n```javascript\n// SAS Token\nauthOptions: {\n    authType: AuthenticationType.sas,\n    getToken: (resolve, reject) =\u003e {\n        // URL to your authentication service that retrieves a SAS Token.\n        var tokenServiceUrl = \"https://example.com/api/GetSASToken\";\n        fetch(tokenServiceUrl).then(r =\u003e r.text()).then(token =\u003e resolve(token));\n    }\n}\n```\n\n## Local development with [Playground Package](https://github.com/Azure/react-azure-maps-playground)\n\nIf you want to do some local development using [Playground Package](https://github.com/Azure/react-azure-maps-playground) with local link to the package, you need to make the following steps:\n\n```bash\n- run yarn watch in `react-azure-maps` package\n- run yarn link in `react-azure-maps` package\n- go to the `azure-maps-playground` or any other folder or repository and run `yarn link \"react-azure-maps\"`\n```\n\n## Code coverage\n\n![Alt text](assets/coverage.png?raw=true 'Coverage')\n\n## Contributing\n\nPull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.\n\n## Creators ✨\n\n\u003c!-- CREATORS:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003ca href=\"https://github.com/psrednicki\"\n        \u003e\u003cimg\n          src=\"https://avatars2.githubusercontent.com/u/41010528?v=4\"\n          width=\"100px;\"\n          alt=\"\"\n        /\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003epsrednicki\u003c/b\u003e\u003c/sub\u003e\u003c/a\n      \u003e\u003cbr /\u003e\n    \u003cdiv\u003e\n      \u003ca\n        href=\"https://pl.linkedin.com/in/patryk-%C5%9Brednicki-718204187/\"\n        title=\"LinkedIn\"\n        style=\"text-align:center\"\n        \u003e\u003cimg\n          src=\"https://cdn-icons-png.flaticon.com/512/174/174857.png\"\n          width=\"24px;\"\n          alt=\"\"\n      /\u003e\u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003ca href=\"https://github.com/msasinowski\"\n        \u003e\u003cimg\n          src=\"https://avatars2.githubusercontent.com/u/38035075?v=4\"\n          width=\"100px;\"\n          alt=\"\"\n        /\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003emsasinowski\u003c/b\u003e\u003c/sub\u003e\u003c/a\n      \u003e\n    \u003cdiv\u003e\n      \u003ca\n        href=\"https://www.linkedin.com/in/maciej-sasinowski-92076815a/\"\n        title=\"LinkedIn\"\n        style=\"text-align:center\"\n        \u003e\u003cimg\n          src=\"https://cdn-icons-png.flaticon.com/512/174/174857.png\"\n          width=\"24px;\"\n          alt=\"\"\n      /\u003e\u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/td\u003e\n    \u003ctd style=\"text-align: center; vertical-align: middle;\"\u003e\n      \u003ca href=\"https://github.com/tbajda\"\n        \u003e\u003cimg\n          src=\"https://avatars2.githubusercontent.com/u/27700326?v=4\"\n          width=\"100px;\"\n          alt=\"\"\n        /\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003etbajda\u003c/b\u003e\u003c/sub\u003e\u003c/a\n      \u003e\n    \u003cdiv\u003e\n      \u003ca\n        href=\"https://www.linkedin.com/in/tomasz-bajda-ab4468165/\"\n        title=\"LinkedIn\"\n        \u003e\u003cimg\n          src=\"https://cdn-icons-png.flaticon.com/512/174/174857.png\"\n          width=\"24px;\"\n          alt=\"\"\n      /\u003e\u003c/a\u003e\n    \u003c/div\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- CREATORS:END --\u003e\n\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure%2Freact-azure-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazure%2Freact-azure-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure%2Freact-azure-maps/lists"}