{"id":31944292,"url":"https://github.com/808vita/maps-with-uber-h3","last_synced_at":"2026-03-06T04:37:27.598Z","repository":{"id":312356598,"uuid":"815840647","full_name":"808vita/maps-with-uber-h3","owner":"808vita","description":"About This project uses Leaflet for maps , Leaflet Routing Machine for routing , H3-js for Uber H3 cells and Geoman for drawing tools. Additionally Typedoc is used for generating docs. _deployed to google cloud bucket (previously)","archived":false,"fork":false,"pushed_at":"2024-06-16T10:56:14.000Z","size":17125,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T10:09:26.333Z","etag":null,"topics":["geospatial","geospatial-analysis","leaflet-routing-machine","leafletjs","uber-h3"],"latest_commit_sha":null,"homepage":"https://phenomenal-haupia-559541.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/808vita.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-16T10:28:47.000Z","updated_at":"2025-05-08T21:51:17.000Z","dependencies_parsed_at":"2025-08-30T04:00:04.050Z","dependency_job_id":null,"html_url":"https://github.com/808vita/maps-with-uber-h3","commit_stats":null,"previous_names":["808vita/maps-with-uber-h3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/808vita/maps-with-uber-h3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/808vita%2Fmaps-with-uber-h3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/808vita%2Fmaps-with-uber-h3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/808vita%2Fmaps-with-uber-h3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/808vita%2Fmaps-with-uber-h3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/808vita","download_url":"https://codeload.github.com/808vita/maps-with-uber-h3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/808vita%2Fmaps-with-uber-h3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30161922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T04:22:03.816Z","status":"ssl_error","status_checked_at":"2026-03-06T04:22:00.183Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["geospatial","geospatial-analysis","leaflet-routing-machine","leafletjs","uber-h3"],"created_at":"2025-10-14T10:23:00.615Z","updated_at":"2026-03-06T04:37:27.566Z","avatar_url":"https://github.com/808vita.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet Maps - Leaflet Routing Machine - UberH3 - Service Area Mode :\n\n### Deployed link : [`Live Site`](https://phenomenal-haupia-559541.netlify.app/)\n\n### Deployed docs path: [`Deployed Docs`](https://phenomenal-haupia-559541.netlify.app/docs/index.html)\n\nYou can also access docs on local server by navigating to \"/docs/index.html\"\n\n[Service Area mode (rectangle).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/71779b5a-22c1-455d-9076-794403afbcbe)\n\n\n## Getting Started\nPlease run `npm install` to install all project required dependencies.\n\nThis project uses Leaflet for maps , Leaflet Routing Machine for routing , H3-js for Uber H3 cells and Geoman for drawing tools.\nAdditionally Typedoc is used for generating docs.\n\nAfter installation - run the development server:\n\n```bash\n\nnpm run dev\nnpm run build\nnpm run start\nnpm run docs\n\n```\n\n- use `npm run dev` to start the local server.\n- use `npm run build` to start the production build files.\n- use `npm run start` to start the local server using production build files (run yarn build first!).\n- use `npm run docs` to reupdate the typedoc generated docs.\n\n## Modes\n\n# Normal Mode - normal routing with no restrictions\n\n[double click to place markers - use buttons.webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/bdbbd2bd-fcf1-4f2d-8da7-b121e6ac175b)\n\n\n- Place Markers by double clicking on map \n\n- On placing marker uber h3 cell data is fetched along with street adress and shown on map - h3 cell polygon gets drawn\n\n- Can place multiple markers - displays tooltip and all marker popups contain marker relevant data\n  \n- Relevant data includes : Marker address, marker latlng , uber h3 cell index which contains marker along with h3cell center latlng\n\n- After placing at least two markers on map Routing button gets displayed\n\n- Leaflet Routing Machine uses marker latlngs as waypoints and makes network calls to OSRM server\n\n- On sucessfull network request routing plan gets displayed.\n\n- More markers can be added to and rerouted - waypoints and marker data will adjusted automatically\n\n- Clear button - can clear markers , route line and routing plan window\n\n\n# Service Area Mode (by drawing a rectangle / polygon) - Markers can only placed inside service area\n\n[Service Area mode (rectangle).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/71779b5a-22c1-455d-9076-794403afbcbe)\n\n[service area mode (polygon).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/b55b5fb3-4e9a-4247-845c-c808974724d1)\n\n\n\n- Define service area bounds by drawing a rectangle or polygon on to the map\n\n[Place , drag ,edit and delete - rectange and polygon .webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/f91df461-7c32-4e35-b07e-32dc81d763e5)\n\n\n\n- On placing a rect/polygon ; the boundary data is used for fetch uberh3 cells data\n\n- Uber h3 indices which fit within the polygon boundary is calculated\n\n- Uber h3 indices are then used to generate uber h3 ploygon and gets drawn on the polygon\n\n- NOTE: only user drawn rectange / polygon boundaries are used for enforcing restriction on placing markers\n\n- Uber h3 polygon gets updated everytime service is edited or moved (that is when drawn rect/polygon is edited or moved)\n\n- When service area is active - markers only can be placed within service area boundaries\n\n- Route button gets displayed when at least two markers are placed\n\n- Same as before - routing data is fetched using markers as waypoints\n\n- Same as before - more markers can placed and rerouted\n\n- Clear button - can only clear markers , route line and routing plan\n\n- You can remove service area by using eraser button on bottom left\n\n- Eraser button becomes visible when a service area is drawn but no markers are placed\n\n\n\n\n\n## Specifics\n- Project setup using create-next-app - typescript\n- Used Leaflet , Leaflet Routing Machine ,h3-js and Geoman\n- Users can place markers by double clicking\n- Markers display path information and clicking it displays information such address, latlng , h3 data.\n- Users can draw rectangle or polygon on the map\n- Rectangle / ploygon can be resized , moved and deleted\n- Uber h3 cell data are fetched when markers placed and h3 cell gets drawn\n- Uber h3 cell data are also fetched when rect/polygon are placed and h3 polygon gets drawn\n- Multiple markers can placed on to the map and routing also works\n- Only one rectangle or polygon can be placed on map - one service area \n- When a service area is drawn - mutliple markes can only be placed within service area\n- Service area enforces marker placing restrictions\n- Routing can be triggered by clicking on Route button (requires at least 2 markers)\n- Clear button can be used to remove markers , route line and routing plan\n- Eraser button (on bottomleft) should be used to remove a service area.\n  # Others\n- Nextjs based - generated as a static site\n- Typescript codebase\n- Codebase documented - makes use of typedoc to generate docs\n- Readme \u0026 dedicated docs\n- File versioning - using git/ github\n- Google Cloud Platform (GCP) deployment: Storage Bucket with Load balancer\n  \n[dedicated docs.webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/3cbdac85-001a-4a67-9e52-157ddb12399b)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F808vita%2Fmaps-with-uber-h3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F808vita%2Fmaps-with-uber-h3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F808vita%2Fmaps-with-uber-h3/lists"}