Add MapCircleArea component and circular area highlight documentation #1

Open

DinethDilhara wants to merge 5 commits from DinethDilhara/feature/circle-highlight into main

pull from: DinethDilhara/feature/circle-highlight

merge into: AnmolSaini16:main

AnmolSaini16:main

Conversation 1 Commits 5 Files changed 8 +444 -2

DinethDilhara commented 2025-12-30 13:33:22 -05:00 (Migrated from github.com)

Copy link

Add MapCircleArea component and circular area highlight documentation

Summary

This pull request introduces a new MapCircleArea component that enables rendering circular areas on the map using GeoJSON polygons. In addition, it adds a dedicated documentation page with an example and API reference to guide users in using the component effectively.

Motivation

The goal of this change is to provide a simple, flexible, and accurate way to visualize radius-based areas such as coverage zones, and geofencing boundaries.

---

Changes Included

New Component

• Added MapCircleArea component
• Renders circular areas based on:
  • Center coordinate ([longitude, latitude])
  • Radius in meters
• Supports customization options:
  • Fill color
  • Fill opacity
  • Outline color
  • Outline width
  • Circle smoothness via configurable step count
• Uses GeoJSON polygons with proper geographic calculations

Documentation

• Added a new Circular Area Highlight documentation page
• Included a live example demonstrating MapCircleArea usage
• Added a complete API reference detailing all component props
• Added a new example showcasing user location tracking and geofence status using MapCircleArea
• Updated sidebar and navigation to include the new docs page

---

Screenshots

• api reference for component

• docs with example 01 Basic Circular Area Highlight

• docs with example 02 User Location Tracking (geofence)

---

Notes

• The component supports multiple instances without ID conflicts
• Geographic calculations ensure consistent circle rendering across different latitudes
• Designed to integrate seamlessly with existing map components

---

Checklist

• Implemented MapCircleArea component
• Added documentation page
• Documented API and props
• Included usage examples
• Updated navigation and sidebar

# Add MapCircleArea component and circular area highlight documentation ## Summary This pull request introduces a new **`MapCircleArea`** component that enables rendering circular areas on the map using GeoJSON polygons. In addition, it adds a dedicated documentation page with an example and API reference to guide users in using the component effectively. ## Motivation The goal of this change is to provide a simple, flexible, and accurate way to visualize radius-based areas such as coverage zones, and geofencing boundaries. --- ## Changes Included ### New Component - Added **`MapCircleArea`** component - Renders circular areas based on: - Center coordinate (`[longitude, latitude]`) - Radius in meters - Supports customization options: - Fill color - Fill opacity - Outline color - Outline width - Circle smoothness via configurable step count - Uses GeoJSON polygons with proper geographic calculations ### Documentation - Added a new **Circular Area Highlight** documentation page - Included a live example demonstrating `MapCircleArea` usage - Added a complete API reference detailing all component props - Added a new example showcasing user location tracking and geofence status using `MapCircleArea` - Updated sidebar and navigation to include the new docs page --- ## Screenshots - api reference for component  - docs with example 01 `Basic Circular Area Highlight`  - docs with example 02 `User Location Tracking (geofence)`  --- ## Notes - The component supports multiple instances without ID conflicts - Geographic calculations ensure consistent circle rendering across different latitudes - Designed to integrate seamlessly with existing map components --- ## Checklist - [x] Implemented `MapCircleArea` component - [x] Added documentation page - [x] Documented API and props - [x] Included usage examples - [x] Updated navigation and sidebar

👀 1

vercel[bot] commented 2025-12-30 13:33:27 -05:00 (Migrated from github.com)

Copy link

@DinethDilhara is attempting to deploy a commit to the anmolsaini16's projects Team on Vercel.

A member of the Team first needs to authorize it.

@DinethDilhara is attempting to deploy a commit to the **anmolsaini16's projects** Team on [Vercel](https://vercel.com). A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=anmolsaini16's%20projects&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%22f0038f80338b0fcbc31b99f6f038ad24ed69c447%22%7D%2C%22id%22%3A%22Qmens4wdgrGVNDardrCLNMcovxaVDX6aKYyd7ETbsbqFDM%22%2C%22org%22%3A%22AnmolSaini16%22%2C%22prId%22%3A1%2C%22repo%22%3A%22mapcn%22%7D).

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin DinethDilhara/feature/circle-highlight:DinethDilhara/feature/circle-highlight

git switch DinethDilhara/feature/circle-highlight

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff DinethDilhara/feature/circle-highlight

git switch DinethDilhara/feature/circle-highlight

git rebase main

git switch main

git merge --ff-only DinethDilhara/feature/circle-highlight

git switch DinethDilhara/feature/circle-highlight

git rebase main

git switch main

git merge --no-ff DinethDilhara/feature/circle-highlight

git switch main

git merge --squash DinethDilhara/feature/circle-highlight

git switch main

git merge --ff-only DinethDilhara/feature/circle-highlight

git switch main

git merge DinethDilhara/feature/circle-highlight

git push origin main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

AnmolSaini16/mapcn!1

No description provided.