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
-
Query the data from the SQLite database in data/land-cover.db to get the land use percentages for your country
-
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)
-
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.
