Leaflet Maps - Leaflet Routing Machine - UberH3 - Service Area Mode :

Deployed link : Live Site

Deployed docs path: Deployed Docs

You can also access docs on local server by navigating to "/docs/index.html"

Service.Area.mode.rectangle.webm

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:

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

• 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

service.area.mode.polygon.webm

• Define service area bounds by drawing a rectangle or polygon on to the map

Place.drag.edit.and.delete.-.rectange.and.polygon.webm

• 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