{"id":28576930,"url":"https://github.com/maptiler/maptiler-maps-in-react","last_synced_at":"2026-02-06T23:02:01.764Z","repository":{"id":268881267,"uuid":"816907762","full_name":"maptiler/maptiler-maps-in-react","owner":"maptiler","description":"Create map in React with use of MapTiler SDK.","archived":false,"fork":false,"pushed_at":"2026-01-13T14:33:59.000Z","size":13129,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-01-13T17:06:52.245Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-18T16:16:43.000Z","updated_at":"2025-08-11T13:19:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"4841dc72-6383-4caf-bce0-c8fc057716bb","html_url":"https://github.com/maptiler/maptiler-maps-in-react","commit_stats":null,"previous_names":["maptiler/maptiler-maps-in-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maptiler/maptiler-maps-in-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fmaptiler-maps-in-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fmaptiler-maps-in-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fmaptiler-maps-in-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fmaptiler-maps-in-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maptiler","download_url":"https://codeload.github.com/maptiler/maptiler-maps-in-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fmaptiler-maps-in-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29179565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T22:12:24.066Z","status":"ssl_error","status_checked_at":"2026-02-06T22:12:09.859Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-06-11T00:08:16.680Z","updated_at":"2026-02-06T23:02:01.759Z","avatar_url":"https://github.com/maptiler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/maptiler/maptiler-sdk-kotlin/main/Examples/maptiler-logo.png\" alt=\"Company Logo\" height=\"32\"/\u003e\n\n# Maps in React\n\nThe main branch's code shows a basic example of a map with a marker and navbar using React and MapTiler SDK. (MapTiler SDK extends MapLibre GL JS with functions related to the MapTiler mapping platform. The basic concepts of this tutorial also show how to create a React map with MapLibre GL JS). You can find a step-by-step tutorial for it [here](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react).\n\nRepository branches show code changes corresponding to the [MapTiler React video series](https://youtube.com/playlist?list=PLGHe6Moaz52Mb9_0qH9mdktsTgkrow9oI\u0026si=2RCT0UU_2ssLyGjN).\n\n![](https://img.shields.io/badge/-white?style=for-the-badge\u0026logo=javascript)![](https://img.shields.io/badge/-white?style=for-the-badge\u0026logo=typescript)![](https://img.shields.io/badge/-white?style=for-the-badge\u0026logo=react\u0026logoColor=61dafb)\n\n---\n\n📖 [Documentation](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/) \u0026nbsp; 🔑 [Get API Key](https://cloud.maptiler.com/account/keys/)\n\n---\n\n\u003cbr\u003e\n\n\u003cdetails\u003e \u003csummary\u003e\u003cb\u003eTable of Contents\u003c/b\u003e\u003c/summary\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#-basic-usage\"\u003eBasic Usage\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#-related-examples\"\u003eExamples\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#maps-in-react-series\"\u003eMaps in React series\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#-support\"\u003eSupport\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#-acknowledgements\"\u003eAcknowledgements\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cp align=\"center\"\u003e   \u003cimg src=\"assets/final_app.png\" alt=\"Demo Screenshot\" width=\"80%\"/\u003e  \u003cbr /\u003e  \u003ca href=\"https://docs.maptiler.com/react/sdk-js/get-started-material-ui/\"\u003eSee live interactive demo\u003c/a\u003e \u003c/p\u003e\n\u003cbr\u003e\n\n## 🚀 Basic Usage\n\n1. Clone this repo\n\n```shell\n  git clone https://github.com/maptiler/maps-in-react.git my-react-map\n```\n\n2. Navigate to the newly created project folder **my-react-map**\n\n```shell\n  cd my-react-map\n```\n\n3. Install dependencies\n\n```shell\n  npm install\n```\n\n4. :warning: Open my-react-map/src/config.js and replace **YOUR_MAPTILER_API_KEY_HERE** with your actual [MapTiler API key](https://cloud.maptiler.com/account/keys/).\n   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\n```shell\n  npm run dev\n```\n\n6. You will find your app on the address http://localhost:5173/.\n   Now, you should see the map in your browser.\n\n\u003cbr\u003e\n\n## 💡 Related Examples\n\n- [Episode 0: Map in React JS with Material UI](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)\n- [Episode 1: Map in React JS point data from geojson data](https://docs.maptiler.com/react/sdk-js/geojson-points/)\n- [Episode 2: Map in React JS create a heatmap](https://docs.maptiler.com/react/sdk-js/heatmap/)\n- [Episode 3: Map in React js with popup and sidebar](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)\n- [Episode 4: Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/geocoding-control/)\n- [Episode 5: 3D Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/3d-map/)\n\nCheck out the full list of [MapTiler examples](https://docs.maptiler.com/react/examples/)\n\n\u003cbr\u003e\n\n## Maps in React series\n\n### Episode specific instructions\n\nHere is the step-by-step guide for creating a state in the main branch: https://docs.maptiler.com/react/sdk-js/get-started-material-ui/. \n\n#### E1 - Map in React js with geojson data, points, and clusters\n\n[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/geojson-points/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\nadd custom geojson data to a React map with SDK helpers\nread more about **[MapTilerSDK point helper](https://docs.maptiler.com/sdk-js/api/helpers/#point?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)**\n\nYou can find GeoJSON data used in tutorial videos in the assets folder.\n\n#### E2 - Map in React js with heatmap and visualization switcher\n\n[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/heatmap/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\n**[MapTiler SDK heatmap helper](https://docs.maptiler.com/sdk-js/api/helpers/#heatmap?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)** \n**[MapTiler SDK Color Ramp](https://docs.maptiler.com/sdk-js/api/color-ramp/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)**\n\n#### E3 - Map in React js with popup and sidebar\n\n[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/popup-sidebar/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\n**Material UI:** https://mui.com/core/\n**MUI sidebar examples:** https://mui.com/material-ui/react-drawer/\n\n#### E4 - Map in React js with geocoding control\n\n[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/geocoding-control/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\nDownload MapTiler geocoding control from npm: https://www.npmjs.com/package/@maptiler/geocoding-control\n\nOpen the terminal on the my-react-map folder.\n\n- npm i @maptiler/geocoding-control\n- npm install\n- npm run dev //to start your map app\n  [geocoding API reference](https://docs.maptiler.com/client-js/geocoding/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react) \n\n#### E5 - 3D Map in React js\n\n[step-by-step tutorial](https://docs.maptiler.com/react/sdk-js/3d-map/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\nEnable/disable map terrain programmatically: [https://docs.maptiler.com/sdk-js/examples/map-terrain/](https://docs.maptiler.com/sdk-js/examples/map-terrain/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n\nHow to find the id of last text map layer?\n![how to find layel id](/assets/layer_id.png)\n\n1. Go to [MapTiler](https://cloud.maptiler.com/?utm_medium=social\u0026utm_source=github\u0026utm_campaign=2024%20|%20react)\n2. Select a map that you want to use as a basemap\n3. Customize\n4. Go to layer - Verticality and find the last symbol layer\n5. Click at the last symbol layer and open JSON editor ( {} )\n6. Copy layer id, e.g., \"Ocean labels\".\n\nCheck out the [How to make custom map design in MapTiler](https://docs.maptiler.com/guides/map-design/how-to-make-custom-map-design-in-maptiler-cloud/) tutorial\n\n\u003cbr\u003e\n\n## 💬 Support\n\n- 📚 [Documentation](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/) - Comprehensive guides and API reference\n- ✉️ [Contact us](https://maptiler.com/contact) - Get in touch or submit a request\n- 🐦 [Twitter/X](https://twitter.com/maptiler) - Follow us for updates\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## 🤝 Contributing\n\nWe love contributions from the community! Whether it's bug reports, feature requests, or pull requests, all contributions are welcome:\n\n- Fork the repository and create your branch from `main`\n- If you've added code, add tests that cover your changes\n- Ensure your code follows our style guidelines\n- Give your pull request a clear, descriptive summary\n- Open a Pull Request with a comprehensive description\n\n\u003cbr\u003e\n\n## 📄 License\n\nThis project is licensed under the MIT License – see the [LICENSE](./LICENSE) file for details.\n\n\u003cbr\u003e\n\n## 🙏 Acknowledgements\n\nThis project is built on the shoulders of giants:\n\n- [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/) – The open-source mapping library\n- [React](https://react.dev/) – The library for web and native user interfaces\n- [Material UI](https://mui.com/material-ui/) – Open-source React component library that implements Google's Material Design\n- [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) – The Build Tool for the Web \n\n\u003cbr\u003e\n\n\u003cp align=\"center\" style=\"margin-top:20px;margin-bottom:20px;\"\u003e \u003ca href=\"https://cloud.maptiler.com/account/keys/\" style=\"display:inline-block;padding:12px 32px;background:#F2F6FF;color:#000;font-weight:bold;border-radius:6px;text-decoration:none;\"\u003e Get Your API Key \u003csup style=\"background-color:#0000ff;color:#fff;padding:2px 6px;font-size:12px;border-radius:3px;\"\u003eFREE\u003c/sup\u003e\u003cbr /\u003e \u003cspan style=\"font-size:90%;font-weight:400;\"\u003eStart building with 100,000 free map loads per month ・ No credit card required.\u003c/span\u003e \u003c/a\u003e \u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e 💜 Made with love by the \u003ca href=\"https://www.maptiler.com/\"\u003eMapTiler\u003c/a\u003e team \u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.maptiler.com/\"\u003eWebsite\u003c/a\u003e •\n  \u003ca href=\"https://docs.maptiler.com/react/sdk-js/get-started-material-ui/\"\u003eDocumentation\u003c/a\u003e •\n  \u003ca href=\"https://github.com/maptiler/maptiler-maps-in-react\"\u003eGitHub\u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fmaptiler-maps-in-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaptiler%2Fmaptiler-maps-in-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fmaptiler-maps-in-react/lists"}