{"id":34747013,"url":"https://github.com/mongrov/geofence-visualizer","last_synced_at":"2026-05-25T03:33:42.171Z","repository":{"id":323932351,"uuid":"1092997938","full_name":"mongrov/geofence-visualizer","owner":"mongrov","description":null,"archived":false,"fork":false,"pushed_at":"2025-11-12T22:22:15.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-12T23:28:54.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/mongrov.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":"2025-11-09T17:59:27.000Z","updated_at":"2025-11-12T22:22:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mongrov/geofence-visualizer","commit_stats":null,"previous_names":["mongrov/geofence-visualizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mongrov/geofence-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongrov%2Fgeofence-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongrov%2Fgeofence-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongrov%2Fgeofence-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongrov%2Fgeofence-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mongrov","download_url":"https://codeload.github.com/mongrov/geofence-visualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mongrov%2Fgeofence-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33459701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T02:24:28.008Z","status":"ssl_error","status_checked_at":"2026-05-25T02:23:23.339Z","response_time":57,"last_error":"SSL_read: 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":[],"created_at":"2025-12-25T04:55:13.777Z","updated_at":"2026-05-25T03:33:42.166Z","avatar_url":"https://github.com/mongrov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Geofence Visualization Tool\n\nAn interactive web-based map visualization tool for testing and debugging geofencing logic. This tool displays real-time badge locations, geofence boundaries, and visual indicators for geofence events.\n\n## Features\n\n- **Real-time Badge Tracking**: Display badge locations (lat/lon) as points or circles (with radius)\n- **Geofence Visualization**: Display geofence boundaries as GeoJSON polygons\n- **Event Indicators**: Visual feedback for events:\n  - `enter`: Green flash/animation\n  - `exit`: Red flash/animation\n  - `cross`: Yellow/orange flash (radius extends outside)\n  - `inside`: Blue indicator\n  - `outside`: Gray indicator\n- **Testing Tools**:\n  - Manual badge placement by clicking on map\n  - Radius adjustment for badges\n  - Import/Export test scenarios as JSON\n- **Real-time Updates**: MQTT/WebSocket integration for live data\n- **Event Log**: History of recent geofence events\n- **Statistics Dashboard**: Track badges, geofences, and event counts\n\n## Tech Stack\n\n- **Frontend**: React + Vite\n- **Mapping**: Leaflet.js\n- **Real-time**: Socket.io (WebSocket)\n- **Backend**: Express.js\n- **MQTT**: mqtt.js\n\n## Installation\n\n### Prerequisites\n\n- Node.js 18+ and npm\n- MQTT broker (e.g., Mosquitto, Mainflux)\n- Access to geofence data source\n\n### Setup\n\n1. **Install frontend dependencies**:\n```bash\ncd geofence-visualizer\nnpm install\n```\n\n2. **Install server dependencies**:\n```bash\ncd server\nnpm install\n```\n\n3. **Configure MQTT connection** (optional):\n   - Set environment variables or edit `server/index.js`:\n   ```bash\n   export MQTT_BROKER=mqtt://localhost:1883\n   export MQTT_USERNAME=your_username\n   export MQTT_PASSWORD=your_password\n   export MQTT_TOPIC_BADGES=old/assets/+/location\n   export MQTT_TOPIC_GEOFENCE=geofence/+\n   ```\n\n## Running the Application\n\n### Development Mode\n\n1. **Start the backend server** (in one terminal):\n```bash\ncd server\nnpm start\n```\n\n2. **Start the frontend dev server** (in another terminal):\n```bash\nnpm run dev\n```\n\n3. **Open your browser**:\n   - Frontend: http://localhost:3000\n   - Backend API: http://localhost:3001\n\n### Production Build\n\n1. **Build the frontend**:\n```bash\nnpm run build\n```\n\n2. **Serve the built files** (you can use any static file server):\n```bash\nnpm run preview\n```\n\n## Usage\n\n### Connecting to MQTT\n\nThe tool automatically connects to the MQTT broker configured in the server. Check the connection status in the top-right corner of the interface.\n\n### Adding Badges\n\n1. Click **\"+ Add Badge\"** in the control panel\n2. Enter:\n   - MAC address\n   - Latitude\n   - Longitude\n   - Radius (optional, in feet)\n3. Click **\"Add\"**\n\n### Manual Testing\n\n1. Enable **\"Test Mode\"** in the controls\n2. Select a badge from the badge list\n3. Click anywhere on the map to move the badge\n4. Adjust radius using the slider/input for the selected badge\n\n### Adding Geofences\n\nGeofences can be added by:\n1. **Importing from GeoJSON file** (`.geojson` extension):\n   - Click \"Import GeoJSON\" button in the Geofences section\n   - Supports standard GeoJSON formats:\n     - FeatureCollection (multiple geofences)\n     - Feature (single geofence)\n     - Polygon/MultiPolygon (direct geometry)\n     - Array of geofences\n   - Geofence names are extracted from `properties.name` or `properties.id`\n   - MAC addresses are extracted from `properties.mac` (optional)\n2. Importing from JSON file (see example data format below)\n3. Receiving via MQTT/WebSocket\n\n**Note**: The tool specifically supports `.geojson` file extension for geofence imports.\n\n### Import/Export\n\n- **Import Badges/Geofences**: Click \"Import Data\" and select a JSON file\n- **Import Geofences Only**: Click \"Import GeoJSON\" and select a `.geojson` file\n- **Export All Data**: Click \"Export Data\" to save badges and geofences as JSON\n- **Export Geofences as GeoJSON**: Click \"Export as GeoJSON\" to save geofences in standard GeoJSON format\n\n## Data Formats\n\n### Badge Location Update\n```json\n{\n  \"mac\": \"feed31446a32\",\n  \"latitude\": 28.59448340810775683408107756,\n  \"longitude\": 77.200186828551038682855103,\n  \"radius\": 20.5\n}\n```\n\n### Geofence Boundary (GeoJSON Polygon)\n\n**Standard GeoJSON Format** (for `.geojson` files):\n```json\n{\n  \"type\": \"FeatureCollection\",\n  \"features\": [\n    {\n      \"type\": \"Feature\",\n      \"properties\": {\n        \"name\": \"DelhiHall1\",\n        \"mac\": \"feed31446a32\"\n      },\n      \"geometry\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [[\n          [77.20018682855103, 28.594483408107756],\n          [77.2002, 28.5945],\n          [77.2003, 28.594483408107756],\n          [77.20018682855103, 28.594483408107756]\n        ]]\n      }\n    }\n  ]\n}\n```\n\n**Custom Format** (for JSON test data files):\n```json\n{\n  \"name\": \"DelhiHall1\",\n  \"mac\": \"feed31446a32\",\n  \"polygon\": {\n    \"type\": \"Polygon\",\n    \"coordinates\": [[\n      [77.20018682855103, 28.594483408107756],\n      [77.2002, 28.5945],\n      [77.2003, 28.594483408107756],\n      [77.20018682855103, 28.594483408107756]\n    ]]\n  }\n}\n```\n\n### Geofence Event\n```json\n{\n  \"detect\": \"enter\",\n  \"id\": \"feed31446a32\",\n  \"hook\": \"geofence_feed31446a32_DelhiHall1\",\n  \"object\": {\n    \"type\": \"Polygon\",\n    \"coordinates\": [[...]]\n  },\n  \"time\": \"2025-11-05T03:46:41Z\"\n}\n```\n\n### Test Data File Format\n```json\n{\n  \"badges\": [\n    {\n      \"mac\": \"feed31446a32\",\n      \"latitude\": 28.59448340810775683408107756,\n      \"longitude\": 77.200186828551038682855103,\n      \"radius\": 20.5\n    }\n  ],\n  \"geofences\": [\n    {\n      \"name\": \"DelhiHall1\",\n      \"mac\": \"feed31446a32\",\n      \"polygon\": {\n        \"type\": \"Polygon\",\n        \"coordinates\": [[[77.20018682855103, 28.594483408107756], ...]]\n      }\n    }\n  ]\n}\n```\n\n## GeoJSON File Support\n\nThe tool fully supports importing geofences from `.geojson` files. Supported formats include:\n\n1. **FeatureCollection** (recommended for multiple geofences):\n   ```json\n   {\n     \"type\": \"FeatureCollection\",\n     \"features\": [\n       {\n         \"type\": \"Feature\",\n         \"properties\": { \"name\": \"Geofence1\" },\n         \"geometry\": { \"type\": \"Polygon\", \"coordinates\": [...] }\n       }\n     ]\n   }\n   ```\n\n2. **Single Feature**:\n   ```json\n   {\n     \"type\": \"Feature\",\n     \"properties\": { \"name\": \"Geofence1\" },\n     \"geometry\": { \"type\": \"Polygon\", \"coordinates\": [...] }\n   }\n   ```\n\n3. **Direct Polygon Geometry**:\n   ```json\n   {\n     \"type\": \"Polygon\",\n     \"coordinates\": [[...]]\n   }\n   ```\n\nSee `example-geofences.geojson` for a complete example.\n\n## MQTT Topics\n\nThe server subscribes to:\n- **Badge locations**: `old/assets/+/location` (wildcard for MAC address)\n- **Geofence events**: `geofence/+` (wildcard for MAC address)\n\n## Configuration\n\n### Environment Variables\n\n- `MQTT_BROKER`: MQTT broker URL (default: `mqtt://localhost:1883`)\n- `MQTT_USERNAME`: MQTT username (optional)\n- `MQTT_PASSWORD`: MQTT password (optional)\n- `MQTT_TOPIC_BADGES`: Badge location topic (default: `old/assets/+/location`)\n- `MQTT_TOPIC_GEOFENCE`: Geofence event topic (default: `geofence/+`)\n- `PORT`: Server port (default: `3001`)\n\n## Troubleshooting\n\n### Connection Issues\n\n- **MQTT not connecting**: Check broker URL and credentials\n- **WebSocket not connecting**: Ensure server is running on port 3001\n- **No data appearing**: Verify MQTT topics match your broker configuration\n\n### Map Issues\n\n- **Map not loading**: Check internet connection (uses OpenStreetMap tiles)\n- **Badges not showing**: Verify badge data has valid lat/lon coordinates\n- **Geofences not rendering**: Check GeoJSON polygon format\n\n## Development\n\n### Project Structure\n\n```\ngeofence-visualizer/\n├── src/\n│   ├── components/\n│   │   ├── BadgeLayer.jsx      # Badge visualization\n│   │   ├── GeofenceLayer.jsx   # Geofence visualization\n│   │   ├── ControlPanel.jsx    # Control panel UI\n│   │   ├── EventLog.jsx        # Event log display\n│   │   └── StatisticsPanel.jsx  # Statistics dashboard\n│   ├── utils/\n│   │   └── geometry.js         # Geometry utilities\n│   ├── App.jsx                 # Main app component\n│   └── main.jsx                # Entry point\n├── server/\n│   └── index.js                # Express + Socket.io server\n└── package.json\n```\n\n### Adding Features\n\n- **Drawing Tools**: Integrate Leaflet.draw for polygon editing\n- **Historical Playback**: Add time-based replay of badge movements\n- **Multiple Map Providers**: Add Mapbox, Google Maps support\n- **Geofence Editor**: Visual polygon editor on the map\n\n## License\n\nSee project license file.\n\n## Support\n\nFor issues and questions, refer to the main project documentation or create an issue in the repository.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongrov%2Fgeofence-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmongrov%2Fgeofence-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmongrov%2Fgeofence-visualizer/lists"}