{"id":28576969,"url":"https://github.com/maptiler/get-started-react-maplibre-gl-js","last_synced_at":"2025-08-26T16:10:34.490Z","repository":{"id":41121435,"uuid":"508384281","full_name":"maptiler/get-started-react-maplibre-gl-js","owner":"maptiler","description":"Quick way to star a web map application with MapLibre GL JS using Create React App.","archived":false,"fork":false,"pushed_at":"2024-01-18T14:37:15.000Z","size":325,"stargazers_count":14,"open_issues_count":0,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-03-26T15:22:49.160Z","etag":null,"topics":["example-code","react","reactjs","template","tutorial-code"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/maptiler.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":null,"support":null}},"created_at":"2022-06-28T16:56:03.000Z","updated_at":"2023-11-21T10:22:14.000Z","dependencies_parsed_at":"2022-08-10T01:42:48.801Z","dependency_job_id":null,"html_url":"https://github.com/maptiler/get-started-react-maplibre-gl-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fget-started-react-maplibre-gl-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fget-started-react-maplibre-gl-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fget-started-react-maplibre-gl-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fget-started-react-maplibre-gl-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maptiler","download_url":"https://codeload.github.com/maptiler/get-started-react-maplibre-gl-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fget-started-react-maplibre-gl-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259172986,"owners_count":22816560,"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":["example-code","react","reactjs","template","tutorial-code"],"created_at":"2025-06-11T00:08:26.947Z","updated_at":"2025-06-11T00:08:28.801Z","avatar_url":"https://github.com/maptiler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Get started with React JS and MapLibre GL JS\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nQuick way to start a web map application with MapLibre GL JS using Create React App.\n\nA simple fullscreen map application as an example on how to use MapTiler maps together with React and MapLibre GL JS for your own React app.\n\n1. Clone this repo \n \n  ```sh\n    git clone https://github.com/maptiler/get-started-react-maplibre-gl-js.git my-react-map\n  ```\n\n2. Navigate to the newly created project folder **my-react-map**\n  ```sh\n    cd my-react-map\n  ```\n\n3. Install dependencies\n  ```sh\n    npm install\n  ```\n\n4. :warning: Open the App.js file and replace **YOUR_MAPTILER_API_KEY_HERE** with your actual [MapTiler API key](https://cloud.maptiler.com/account/keys/).\n\n  :information_source: If you don't have an API KEY you can create it for **FREE** at https://www.maptiler.com/cloud/\n\n5. Start your local environment\n  ```sh\n    npm start\n  ```\n\n6. You will find your app on address http://localhost:3000/. Now you should see the map in your browser.\n\n## Build With\n\n* [React.js](https://reactjs.org/)\n* [MapLibre GL JS](https://maplibre.org/)\n* [MapTiler](https://www.maptiler.com/)\n* [react-map-gl](https://visgl.github.io/react-map-gl/docs/get-started)\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Learn More\n\nYou can learn more at [How to display MapLibre GL JS map using React JS](https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/?utm_medium=referral\u0026utm_source=github\u0026utm_campaign=2022-05%20%7C%20js%20frameworks%20%7C%20react).\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fget-started-react-maplibre-gl-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaptiler%2Fget-started-react-maplibre-gl-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fget-started-react-maplibre-gl-js/lists"}