https://github.com/808vita/maps-with-uber-h3
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)
https://github.com/808vita/maps-with-uber-h3
geospatial geospatial-analysis leaflet-routing-machine leafletjs uber-h3
Last synced: 4 months ago
JSON representation
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)
- Host: GitHub
- URL: https://github.com/808vita/maps-with-uber-h3
- Owner: 808vita
- Created: 2024-06-16T10:28:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T10:56:14.000Z (about 2 years ago)
- Last Synced: 2025-10-23T10:09:26.333Z (8 months ago)
- Topics: geospatial, geospatial-analysis, leaflet-routing-machine, leafletjs, uber-h3
- Language: TypeScript
- Homepage: https://phenomenal-haupia-559541.netlify.app/
- Size: 16.3 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leaflet Maps - Leaflet Routing Machine - UberH3 - Service Area Mode :
### Deployed link : [`Live Site`](https://phenomenal-haupia-559541.netlify.app/)
### Deployed docs path: [`Deployed Docs`](https://phenomenal-haupia-559541.netlify.app/docs/index.html)
You can also access docs on local server by navigating to "/docs/index.html"
[Service Area mode (rectangle).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/71779b5a-22c1-455d-9076-794403afbcbe)
## Getting Started
Please run `npm install` to install all project required dependencies.
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.
After installation - run the development server:
```bash
npm run dev
npm run build
npm run start
npm run docs
```
- use `npm run dev` to start the local server.
- use `npm run build` to start the production build files.
- use `npm run start` to start the local server using production build files (run yarn build first!).
- use `npm run docs` to reupdate the typedoc generated docs.
## Modes
# Normal Mode - normal routing with no restrictions
[double click to place markers - use buttons.webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/bdbbd2bd-fcf1-4f2d-8da7-b121e6ac175b)
- Place Markers by double clicking on map
- On placing marker uber h3 cell data is fetched along with street adress and shown on map - h3 cell polygon gets drawn
- Can place multiple markers - displays tooltip and all marker popups contain marker relevant data
- Relevant data includes : Marker address, marker latlng , uber h3 cell index which contains marker along with h3cell center latlng
- After placing at least two markers on map Routing button gets displayed
- Leaflet Routing Machine uses marker latlngs as waypoints and makes network calls to OSRM server
- On sucessfull network request routing plan gets displayed.
- More markers can be added to and rerouted - waypoints and marker data will adjusted automatically
- Clear button - can clear markers , route line and routing plan window
# Service Area Mode (by drawing a rectangle / polygon) - Markers can only placed inside service area
[Service Area mode (rectangle).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/71779b5a-22c1-455d-9076-794403afbcbe)
[service area mode (polygon).webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/b55b5fb3-4e9a-4247-845c-c808974724d1)
- Define service area bounds by drawing a rectangle or polygon on to the map
[Place , drag ,edit and delete - rectange and polygon .webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/f91df461-7c32-4e35-b07e-32dc81d763e5)
- On placing a rect/polygon ; the boundary data is used for fetch uberh3 cells data
- Uber h3 indices which fit within the polygon boundary is calculated
- Uber h3 indices are then used to generate uber h3 ploygon and gets drawn on the polygon
- NOTE: only user drawn rectange / polygon boundaries are used for enforcing restriction on placing markers
- Uber h3 polygon gets updated everytime service is edited or moved (that is when drawn rect/polygon is edited or moved)
- When service area is active - markers only can be placed within service area boundaries
- Route button gets displayed when at least two markers are placed
- Same as before - routing data is fetched using markers as waypoints
- Same as before - more markers can placed and rerouted
- Clear button - can only clear markers , route line and routing plan
- You can remove service area by using eraser button on bottom left
- Eraser button becomes visible when a service area is drawn but no markers are placed
## Specifics
- Project setup using create-next-app - typescript
- Used Leaflet , Leaflet Routing Machine ,h3-js and Geoman
- Users can place markers by double clicking
- Markers display path information and clicking it displays information such address, latlng , h3 data.
- Users can draw rectangle or polygon on the map
- Rectangle / ploygon can be resized , moved and deleted
- Uber h3 cell data are fetched when markers placed and h3 cell gets drawn
- Uber h3 cell data are also fetched when rect/polygon are placed and h3 polygon gets drawn
- Multiple markers can placed on to the map and routing also works
- Only one rectangle or polygon can be placed on map - one service area
- When a service area is drawn - mutliple markes can only be placed within service area
- Service area enforces marker placing restrictions
- Routing can be triggered by clicking on Route button (requires at least 2 markers)
- Clear button can be used to remove markers , route line and routing plan
- Eraser button (on bottomleft) should be used to remove a service area.
# Others
- Nextjs based - generated as a static site
- Typescript codebase
- Codebase documented - makes use of typedoc to generate docs
- Readme & dedicated docs
- File versioning - using git/ github
- Google Cloud Platform (GCP) deployment: Storage Bucket with Load balancer
[dedicated docs.webm](https://github.com/808vita/maps-with-uber-h3/assets/97225946/3cbdac85-001a-4a67-9e52-157ddb12399b)