{"id":26356581,"url":"https://github.com/aindrajaya/react-map","last_synced_at":"2025-08-07T14:39:10.220Z","repository":{"id":115597380,"uuid":"579047328","full_name":"aindrajaya/react-map","owner":"aindrajaya","description":"Enhancing ReactJS GIS implementation using Leaflet","archived":false,"fork":false,"pushed_at":"2023-01-02T02:50:51.000Z","size":8598,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-21T03:15:16.638Z","etag":null,"topics":["geojson","geospatial","geospatial-analysis","gis","leaflet","reactjs","vite"],"latest_commit_sha":null,"homepage":"https://react-map-seven.vercel.app","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/aindrajaya.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}},"created_at":"2022-12-16T14:24:53.000Z","updated_at":"2024-03-24T16:59:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"285011fa-b71a-4cfc-b626-9c494cf87629","html_url":"https://github.com/aindrajaya/react-map","commit_stats":{"total_commits":83,"total_committers":1,"mean_commits":83.0,"dds":0.0,"last_synced_commit":"9be7e37e49348d6949ddc0897e5b51e247c73d98"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aindrajaya%2Freact-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aindrajaya%2Freact-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aindrajaya%2Freact-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aindrajaya%2Freact-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aindrajaya","download_url":"https://codeload.github.com/aindrajaya/react-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243875108,"owners_count":20361947,"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":["geojson","geospatial","geospatial-analysis","gis","leaflet","reactjs","vite"],"created_at":"2025-03-16T13:31:14.414Z","updated_at":"2025-03-16T13:32:11.145Z","avatar_url":"https://github.com/aindrajaya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT SHIELDS --\u003e\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/aindrajaya/react-map\"\u003e\n    \u003cimg src=\"src/assets/logo.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact GIS Application\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    React GIS App build using Leaflet\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/aindrajaya/react-map\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/aindrajaya/react-map\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/aindrajaya/react-map/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/aindrajaya/react-map/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails open=\"open\"\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-react-gis-application\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#feature-and-data-analysis\"\u003eFeatures and Data Analysis\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\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/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About the React GIS Application\n[![Product Name Screen Shot][product-screenshot]](https://react-map-seven.vercel.app/)\n\nThis project enhancing ReactJS GIS implementation using Leaflet. This project has a tool for visualizing and analyzing spatial data. It uses [GeoJSON](http://geojson.org/) files as input and allows users to view and manipulate the data in various ways.\n\n### Built With\nThis projects is built with\n* [Leaflet](https://leafletjs.com/) for mapping and visualization\n* [React](https://reactjs.org/) is a JavaScript library for building user interfaces\n* [Vite](https://vitejs.dev/) a javascript build tool\n* [GeoJSON](https://geojson.org/) is a format for encoding a variety of geographic data structures.\n\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\nThis is an example of how you may give instructions on setting up your project locally.\nTo get a local copy up and running follow these simple example steps.\n\n### Installation\nTo run the application, after you install [Node.js](https://nodejs.org/) you also need [yarn](https://yarnpkg.com/) installed on your system. This project is also using [vite](https://vitejs.dev/) as a build tool that aims to provide a faster develpoment experience. Once you have those dependencies installed, you can install the application by running the following command in the root directory of the project:\n```bash\n$ cd your-project\n$ yarn\n$ yarn dev\n``` \n\n### Usage\nTo use the application, you will need to have a GeoJSON file that you want to visualize. Once you have the file, you can start the application by running the following command:\n```bash\n$ yarn dev\n```\nThis will start the application and open a web browser window with the application interface. From there, you can use the various controls to view and manipulate the data in the GeoJSON file.\n\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\nSee the [open issues](https://github.com/aindrajaya/react-map/issues) for a list of proposed features (and known issues).\n\n\u003c!-- FEATURE --\u003e\n## Feature and Data Analysis\n### Data \nGeospatial data taken from this [GeoJSON file](https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places_simple.geojson). At this phase I just converted to JavaScript object variable to make it simple to use, and for the next phase it will be `.json` file.\n\u003e *Note:* Geospatial data refers to data that is associated with a specific location on the earth's surface. This can include data about geographical features, such as rivers, mountains, and roads, as well as data about human-made structures, such as buildings, bridges, and pipelines.\n\n### Features\n* Show map Marker from the Geospatial Data above\n* Custom marker\n* Filter radius based on Marker (City)\n* Custom circle radius (add tooltip for more information)\n* Geo filter, filter by continents\n* ~~Analyse geospatial data ()~~ (Under development)\n* etc...\n\n\n\n\u003c!-- CONTACT --\u003e\n## Contact\nArista - [@Arista_Indra](https://twitter.com/Arista_Indra) - arista.indrajay@gmail.com\n\nProject Link: [React GIS](https://github.com/aindrajaya/react-map)\n\n\u003c!-- LICENSE --\u003e\n## License\nThis application is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n## Acknowledgements\n* [React](https://reactjs.org/)\n* [Leaflet](https://leafletjs.com/)\n* [GeoJSON](https://geojson.org/)\n* [Vite](https://vitejs.dev/)\n* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)\n* [Img Shields](https://shields.io)\n* [Choose an Open Source License](https://choosealicense.com)\n* [GitHub Pages](https://pages.github.com)\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[stars-shield]: https://img.shields.io/github/stars/aindrajaya/react-map.svg?style=for-the-badge\n[stars-url]: https://github.com/aindrajaya/react-map/stargazers\n[issues-shield]: https://img.shields.io/github/issues/aindrajaya/react-map.svg?style=for-the-badge\n[issues-url]: https://github.com/aindrajaya/react-map/issues\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://www.linkedin.com/in/aindrajaya\n[product-screenshot]: src/assets/screenshot.gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faindrajaya%2Freact-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faindrajaya%2Freact-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faindrajaya%2Freact-map/lists"}