Remove unused js code

This commit is contained in:
Eugene Burmakin
2025-09-12 23:08:11 +02:00
parent 52a69ecf3d
commit e583a8fb52
3 changed files with 1 additions and 391 deletions

View File

@@ -1,98 +0,0 @@
/**
* Integration script for adding hexagon grid to the existing maps controller
* This file provides the integration code to be added to maps_controller.js
*/
import { createHexagonGrid } from './hexagon_grid';
// Add this to the maps_controller.js connect() method after line 240 (after live map initialization)
export function initializeHexagonGrid(controller) {
// Create hexagon grid instance
controller.hexagonGrid = createHexagonGrid(controller.map, {
apiEndpoint: `/api/v1/maps/hexagons?api_key=${controller.apiKey}`,
style: {
fillColor: '#3388ff',
fillOpacity: 0.1,
color: '#3388ff',
weight: 1,
opacity: 0.5
},
debounceDelay: 300,
maxZoom: 16, // Don't show hexagons beyond this zoom
minZoom: 8 // Don't show hexagons below this zoom
});
return controller.hexagonGrid;
}
// Add this to the controlsLayer object in maps_controller.js (around line 194-205)
export function addHexagonToLayerControl(controller) {
// This should be added to the controlsLayer object:
// "Hexagon Grid": controller.hexagonGrid?.hexagonLayer || L.layerGroup()
return {
"Hexagon Grid": controller.hexagonGrid?.hexagonLayer || L.layerGroup()
};
}
// Add this to the disconnect() method cleanup
export function cleanupHexagonGrid(controller) {
if (controller.hexagonGrid) {
controller.hexagonGrid.destroy();
}
}
// Settings panel integration - add this to the settings form HTML (around line 843)
export const hexagonSettingsHTML = `
<label for="hexagon_grid_enabled">
Hexagon Grid
<label for="hexagon_grid_enabled_info" class="btn-xs join-item inline">?</label>
<input type="checkbox" id="hexagon_grid_enabled" name="hexagon_grid_enabled" class='w-4' style="width: 20px;" />
</label>
<label for="hexagon_opacity">Hexagon Opacity, %</label>
<div class="join">
<input type="number" class="input input-ghost join-item focus:input-ghost input-xs input-bordered w-full max-w-xs" id="hexagon_opacity" name="hexagon_opacity" min="10" max="100" step="10" value="50">
<label for="hexagon_opacity_info" class="btn-xs join-item">?</label>
</div>
`;
// Settings update handler - add this to updateSettings method
export function updateHexagonSettings(controller, event) {
const hexagonEnabled = event.target.hexagon_grid_enabled?.checked || false;
const hexagonOpacity = (parseInt(event.target.hexagon_opacity?.value) || 50) / 100;
if (controller.hexagonGrid) {
if (hexagonEnabled) {
controller.hexagonGrid.show();
controller.hexagonGrid.updateStyle({
fillOpacity: hexagonOpacity * 0.2, // Scale down for fill
opacity: hexagonOpacity
});
} else {
controller.hexagonGrid.hide();
}
}
// Return the settings object to be sent to the server
return {
hexagon_grid_enabled: hexagonEnabled,
hexagon_opacity: hexagonOpacity
};
}
// Layer control event handlers - add these to the overlayadd/overlayremove event listeners
export function handleHexagonLayerEvents(controller, event) {
if (event.name === 'Hexagon Grid') {
if (event.type === 'overlayadd') {
console.log('Hexagon Grid layer enabled via layer control');
if (controller.hexagonGrid) {
controller.hexagonGrid.show();
}
} else if (event.type === 'overlayremove') {
console.log('Hexagon Grid layer disabled via layer control');
if (controller.hexagonGrid) {
controller.hexagonGrid.hide();
}
}
}
}

View File

@@ -101,4 +101,4 @@ class HexagonQuery
conditions.any? ? "AND #{conditions.join(' AND ')}" : ''
end
end
end

View File

@@ -1,292 +0,0 @@
# Hexagonal Grid Overlay Implementation
This implementation adds a hexagonal grid overlay to the Leaflet map in your Ruby on Rails + PostGIS project. The grid displays ~1km hexagons that dynamically load based on the current map viewport.
## Components
### 1. Backend - Rails API Controller
**File**: `app/controllers/api/v1/maps/hexagons_controller.rb`
**Endpoint**: `GET /api/v1/maps/hexagons`
**Authentication**: Requires valid API key
**Parameters**:
- `api_key`: User's API key (required)
- `min_lon`, `min_lat`, `max_lon`, `max_lat`: Bounding box coordinates
**Features**:
- Generates hexagons using PostGIS `ST_HexagonGrid`
- 1km edge-to-edge hexagon size (~500m center-to-edge)
- Maximum 5000 hexagons per request for performance
- Validates bounding box size and coordinates
- Handles edge cases (large areas, invalid coordinates)
- Returns GeoJSON FeatureCollection
### 2. Frontend - JavaScript Module
**File**: `app/javascript/maps/hexagon_grid.js`
**Key Features**:
- Efficient viewport-based loading with debouncing
- Zoom-level restrictions (min: 8, max: 16)
- Automatic cleanup and memory management
- Hover effects and click handling
- Request cancellation for pending requests
### 3. Integration
**File**: `app/javascript/controllers/maps_controller.js` (modified)
**Integration Points**:
- Import and initialize hexagon grid
- Add to layer control
- Event handling for layer toggle
- Cleanup on disconnect
## Usage
### Basic Usage
The hexagon grid will be available as a layer in the map's layer control panel. Users can toggle it on/off via the "Hexagon Grid" checkbox.
### Programmatic Control
```javascript
// Show hexagons
controller.hexagonGrid.show();
// Hide hexagons
controller.hexagonGrid.hide();
// Toggle visibility
controller.hexagonGrid.toggle();
// Update styling
controller.hexagonGrid.updateStyle({
fillColor: '#ff0000',
fillOpacity: 0.2,
color: '#ff0000',
weight: 2,
opacity: 0.8
});
```
## PostGIS SQL Example
Here's the core SQL that generates the hexagon grid:
```sql
WITH bbox_geom AS (
SELECT ST_MakeEnvelope(-74.0, 40.7, -73.9, 40.8, 4326) as geom
),
bbox_utm AS (
SELECT
ST_Transform(geom, 3857) as geom_utm,
geom as geom_wgs84
FROM bbox_geom
),
hex_grid AS (
SELECT
(ST_HexagonGrid(500, bbox_utm.geom_utm)).geom as hex_geom_utm
FROM bbox_utm
)
SELECT
ST_AsGeoJSON(ST_Transform(hex_geom_utm, 4326)) as geojson,
row_number() OVER () as id
FROM hex_grid
WHERE ST_Intersects(
hex_geom_utm,
(SELECT geom_utm FROM bbox_utm)
)
LIMIT 5000;
```
## Performance Considerations
### Backend Optimizations
1. **Request Limiting**: Maximum 5000 hexagons per request
2. **Area Validation**: Rejects requests for areas > 250,000 km²
3. **Coordinate Validation**: Validates lat/lng bounds
4. **Efficient PostGIS**: Uses `ST_HexagonGrid` with proper indexing
### Frontend Optimizations
1. **Debounced Loading**: 300ms delay prevents excessive API calls
2. **Viewport-based Loading**: Only loads visible hexagons
3. **Request Cancellation**: Cancels pending requests when new ones start
4. **Memory Management**: Clears old hexagons before loading new ones
5. **Zoom Restrictions**: Prevents loading at inappropriate zoom levels
## Edge Cases and Solutions
### 1. Large Bounding Boxes
**Problem**: User zooms out too far, requesting millions of hexagons
**Solution**:
- Backend validates area size (max 250,000 km²)
- Returns 400 error with user-friendly message
- Frontend handles error gracefully
### 2. Crossing the International Date Line
**Problem**: Bounding box crosses longitude 180/-180
**Detection**: `min_lon > max_lon`
**Solution**: Currently handled by PostGIS coordinate system transformation
### 3. Polar Regions
**Problem**: Hexagon distortion near poles
**Detection**: Latitude > ±85°
**Note**: Current implementation works with Web Mercator (EPSG:3857) limitations
### 4. Network Issues
**Problem**: API requests fail or timeout
**Solutions**:
- Request cancellation prevents multiple concurrent requests
- Error handling with console logging
- Graceful degradation (no hexagons shown, but map still works)
### 5. Performance on Low-End Devices
**Problem**: Too many hexagons cause rendering slowness
**Solutions**:
- Zoom level restrictions prevent overloading
- Limited hexagon count per request
- Efficient DOM manipulation with LayerGroup
## Configuration Options
### HexagonGrid Constructor Options
```javascript
const options = {
apiEndpoint: '/api/v1/maps/hexagons',
style: {
fillColor: '#3388ff',
fillOpacity: 0.1,
color: '#3388ff',
weight: 1,
opacity: 0.5
},
debounceDelay: 300, // ms to wait before loading
maxZoom: 16, // Don't show beyond this zoom
minZoom: 8 // Don't show below this zoom
};
```
### Backend Configuration
Edit `app/controllers/api/v1/maps/hexagons_controller.rb`:
```ruby
# Change hexagon size (in meters, center to edge)
hex_size = 500 # For ~1km edge-to-edge
# Change maximum hexagons per request
MAX_HEXAGONS_PER_REQUEST = 5000
# Change area limit (km²)
area_km2 > 250_000
```
## Testing
### Manual Testing Steps
1. **Basic Functionality**:
- Open map at various zoom levels
- Toggle "Hexagon Grid" layer on/off
- Verify hexagons load dynamically when panning
2. **Performance Testing**:
- Zoom to maximum level and pan rapidly
- Verify no memory leaks or excessive API calls
- Test on slow connections
3. **Edge Case Testing**:
- Zoom out very far (should show error handling)
- Test near International Date Line
- Test in polar regions
4. **API Testing**:
```bash
# Test valid request
curl "http://localhost:3000/api/v1/maps/hexagons?api_key=YOUR_KEY&min_lon=-74&min_lat=40.7&max_lon=-73.9&max_lat=40.8"
# Test invalid bounding box
curl "http://localhost:3000/api/v1/maps/hexagons?api_key=YOUR_KEY&min_lon=-180&min_lat=-90&max_lon=180&max_lat=90"
```
## Troubleshooting
### Common Issues
1. **Hexagons not appearing**:
- Check console for API errors
- Verify API key is valid
- Check zoom level is within min/max range
2. **Performance issues**:
- Reduce `MAX_HEXAGONS_PER_REQUEST`
- Increase `minZoom` to prevent loading at low zoom levels
- Check for JavaScript errors preventing cleanup
3. **Database errors**:
- Ensure PostGIS extension is installed
- Verify `ST_HexagonGrid` function is available (PostGIS 3.1+)
- Check coordinate system support
### Debug Information
Enable debug logging:
```javascript
// Add to hexagon_grid.js constructor
console.log('HexagonGrid initialized with options:', options);
// Add to loadHexagons method
console.log('Loading hexagons for bounds:', bounds);
```
## Future Enhancements
### Potential Improvements
1. **Caching**: Add Redis caching for frequently requested areas
2. **Clustering**: Group nearby hexagons at low zoom levels
3. **Data Visualization**: Color hexagons based on data (point density, etc.)
4. **Custom Shapes**: Allow other grid patterns (squares, triangles)
5. **Persistent Settings**: Remember user's hexagon visibility preference
### Performance Optimizations
1. **Server-side Caching**: Cache generated hexagon grids
2. **Tile-based Loading**: Load hexagons in tile-like chunks
3. **Progressive Enhancement**: Load lower resolution first, then refine
4. **WebWorker Integration**: Move heavy calculations to background thread
## Dependencies
### Required
- **PostGIS 3.1+**: For `ST_HexagonGrid` function
- **Leaflet**: Frontend mapping library
- **Rails 6+**: Backend framework
### Optional
- **Redis**: For caching (future enhancement)
- **Sidekiq**: For background processing (future enhancement)
## License and Credits
This implementation uses:
- PostGIS for spatial calculations
- Leaflet for map visualization
- Ruby on Rails for API backend
The hexagon grid generation leverages PostGIS's built-in `ST_HexagonGrid` function for optimal performance and accuracy.