Ons Land - European Land Use Visualization

An interactive hexagonal map showing land use patterns across European countries. Each hex represents a land percentage, split into Water, Nature, Cities, and Agriculture.

🔗 Live demo: https://onsland.koenvangilst.nl

Originally created to visualize Dutch land use, this project now lets you compare land use patterns across Europe and see what makes each country unique.

https://github.com/user-attachments/assets/2e425a3a-3fa4-439e-a37d-18a6d4a0877b

Features

• Interactive Country Visualizations - Explore land use patterns for 27+ European countries with hexagonal grid and geographic map views
• Rankings & Comparisons - Compare countries side-by-side to see which have the most woodland, agriculture, urban areas, and more
• Multi-Language Support - Available in English, Dutch, French, Spanish, and German
• Toggle Views - Switch between square grid and geographic map visualizations for different perspectives
• Detailed Breakdowns - See granular land use categories including specific crop types, different nature areas, and more

Contributing

Want to add more countries? The map rendering is already there, and land use data is available in the SQLite database for EU countries. PRs welcome, also for non-European countries!

Adding a New Country

1. Query the data from the SQLite database in data/land-cover.db to get the land use percentages for your country

2. Add the country configuration to public/shared/countries.js and add its slug to the supported country list in server.js

   • Add the isoCode by checking the Wikipedia "List of ISO 3166 country codes" to get the country's NUMeric code
   • Add the geographic center coordinates (longitude and then latitude) for proper map centering
   • Play with the scale value to get the best fit for the hex map
   • Populate the categories percentages from the "Land Cover Categories" of the command's output
   • Adjust the labels for better readability (use the instructions in the Development section for help)

3. Add the country name translation to the locale files in public/locales/

   • Add the country name to the countries section in each language file (en.json, nl.json, fr.json, es.json, de.json)

The country will automatically appear on the home page grid and in the rankings once added to the configuration. See existing country configurations for examples.

Development

This project uses Express.js, a minimal Node.js web framework.

Prerequisites

• Node.js 24.22.1+ installed on your machine

Running Locally

Start the development server:

npm run dev

Or for production mode:

npm start

The site will be available at http://localhost:8000

Docker Deployment

Build and run with Docker:

docker build -t onsland .
docker run -p 8000:8000 onsland

Development Tips

Enable drag-and-drop label positioning by setting DEV_MODE = true in public/country.js. Check the browser console for the current label positions to update the configuration.

Technology

• Backend: Express.js (Node.js 24+) - Minimal web server with Handlebars templating for server-side rendering
• Client-side: Vanilla JavaScript - No framework dependencies, all interactivity handled in the browser
• Visualization: D3.js, d3-hexbin, and TopoJSON
• Data: Eurostat Land Cover Statistics 2022
• Deployment: Docker-ready for Coolify and other platforms

Architecture Notes

This project uses a simple Express server for routing and templating. All interactivity is handled through vanilla JavaScript files loaded directly in the browser, keeping the stack minimal and avoiding framework complexity.

Author

Created by Koen van Gilst

---

Previous HN discussion: https://news.ycombinator.com/item?id=40599763

Static production release

Production uses the shared vnglst/static-sites Nginx host; no Node process runs there. Run npm ci && npm test && npm run export, commit dist/ with the source, then update the immutable Onsland source pin in the hosting repository. The export preserves /, /about, /rankings and all 26 /country/<name> URLs. Unsupported countries and missing files return 404. Node/Fastify remain local development and export tools.