freealberta/map/README.md

3.6 KiB
Raw Blame History

NocoDB Map Viewer

A containerized web application that visualizes geographic data from NocoDB on an interactive map using Leaflet.js.

Features

  • 🗺️ Interactive map visualization with OpenStreetMap
  • 📍 Real-time geolocation support
  • Add new locations directly from the map
  • 🔄 Auto-refresh every 30 seconds
  • 📱 Responsive design for mobile devices
  • 🔒 Secure API proxy to protect credentials
  • 🐳 Docker containerization for easy deployment
  • 🆓 100% open source (no proprietary dependencies)

Quick Start

Prerequisites

  • Docker and Docker Compose
  • NocoDB instance with a table containing location data
  • NocoDB API token

NocoDB Table Setup

  1. Create a table in NocoDB with these required columns:

    • geodata (Text): Format "latitude;longitude"
    • latitude (Decimal): Precision 10, Scale 8
    • longitude (Decimal): Precision 11, Scale 8
  2. Optional recommended columns:

    • title (Text): Location name
    • description (Long Text): Details
    • category (Single Select): Classification

Installation

  1. Clone this repository or create the file structure as shown

  2. Copy the environment template:

    cp .env.example .env
    
  3. Edit .env with your NocoDB details:

    NOCODB_API_URL=https://db.lindalindsay.org/api/v1
    NOCODB_API_TOKEN=your-token-here
    NOCODB_VIEW_URL=https://db.lindalindsay.org/dashboard/#/nc/p406kno3lbq4zmq/mvtryxrvze6td79
    
  4. Start the application:

    docker-compose up -d
    
  5. Access the map at: http://localhost:3000

Finding NocoDB IDs

API Token

  1. Click user icon → Account Settings
  2. Go to "API Tokens" tab
  3. Create new token with read/write permissions

Project and Table IDs

  • Simply provide the full NocoDB view URL in NOCODB_VIEW_URL
  • The system will automatically extract the project and table IDs

API Endpoints

  • GET /api/locations - Fetch all locations
  • POST /api/locations - Create new location
  • GET /api/locations/:id - Get single location
  • PUT /api/locations/:id - Update location
  • DELETE /api/locations/:id - Delete location
  • GET /health - Health check

Configuration

All configuration is done via environment variables:

Variable Description Default
NOCODB_API_URL NocoDB API base URL Required
NOCODB_API_TOKEN API authentication token Required
NOCODB_VIEW_URL Full NocoDB view URL Required
PORT Server port 3000
DEFAULT_LAT Default map latitude 53.5461
DEFAULT_LNG Default map longitude -113.4938
DEFAULT_ZOOM Default map zoom level 11

Development

To run in development mode:

  1. Install dependencies:

    cd app
    npm install
    
  2. Start with hot reload:

    npm run dev
    

Security Considerations

  • API tokens are kept server-side only
  • CORS is configured for security
  • Rate limiting prevents abuse
  • Input validation on all endpoints
  • Helmet.js for security headers

Troubleshooting

Locations not showing

  • Verify table has geodata, latitude, and longitude columns
  • Check that coordinates are valid numbers
  • Ensure API token has read permissions

Cannot add locations

  • Verify API token has write permissions
  • Check browser console for errors
  • Ensure coordinates are within valid ranges

Connection errors

  • Verify NocoDB instance is accessible
  • Check API URL format
  • Confirm network connectivity

License

MIT License - See LICENSE file for details

Support

For issues or questions:

  1. Check the troubleshooting section
  2. Review NocoDB documentation
  3. Open an issue on GitHub