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.

• 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

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!

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

   • 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.

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

• Node.js 24+ installed on your machine

Start the development server:

npm run dev

Or for production mode:

npm start

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

Build and run with Docker:

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

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.

• 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

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.

Created by Koen van Gilst

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