u/geoglify

Finally solved a problem that looked simple… but wasn’t.

Geoglify can now apply SVG textures to polygons so that no two adjacent regions ever share the same pattern.

This isn’t about the Four Color Theorem. Using 4 patterns is easy. The challenge was distributing 28 different patterns across 242 countries while keeping the map visually balanced, accessible, and free of adjacent duplicates.

The whole algorithm runs in ~5ms using R-trees, edge hashing, and a randomized greedy graph coloring algorithm.

Full technical write-up:
https://leoneljdias.github.io/posts/map-coloring-patterns/

Try it:
https://geoglify.com

I managed to integrate Textures.js into MapLibre's WebGL renderer, solving an accessibility issue on geoglify.com that the web too often overlooks.

Maps that rely solely on solid colors are inaccessible to around 8% of the population due to color vision deficiency. Traditional cartography solved this problem decades ago with pattern fills: lines, dots, hexagons, waves, and other textures that make adjacent regions distinguishable regardless of color.

There's another, less obvious benefit. Thematic maps can encode two independent variables simultaneously: color for one variable and pattern for another, something that's impossible with solid fills alone. The groundwork is now in place.

The real technical challenge was rendering. MapLibre's WebGL pipeline doesn't support SVG textures directly, so I had to generate pixel-perfect SVG tiles in the background and convert them dynamically into bitmap textures while preserving the exact device pixel ratio. This ensures that patterns remain sharp and perfectly aligned, even on HiDPI and Retina displays.

The next step is implementing graph coloring based on the classic Four Color Theorem, ensuring that adjacent regions are automatically assigned different patterns without any manual intervention.

The weekend was short, but Geoglify is now even more realistic. It now uses two open data sources to display the planet more accurately.

First, EOX Sentinel-2 Cloudless provides satellite imagery from the European Copernicus/ESA program, covering the entire world while minimizing cloud coverage. Second, Mapterhorn provides terrain elevation data, including mountains, valleys, and landforms, based on open datasets.

By combining both, Geoglify can display a globe with real satellite imagery and true terrain relief, without relying on paid services such as Google. Of course, Google, Apple Maps, and Microsoft offer highly advanced solutions, but it is also possible to build an accessible alternative with no direct costs.

These small self-imposed challenges often push me to explore new ideas, find different solutions, and learn more about the technology world.

I built this interactive globe after not finding a simple way in MapLibre to achieve a visually rich globe experience with optical simulation and animated depth without using 3D engines.

The main challenge was performance and real-time visual effects. I built a custom rendering layer in Canvas 2D on top of MapLibre.

Atmospheric glow is handled with a radialGradient positioned via map.project().

I also implemented a Retina-optimized 2D parallax system where background stars react to globe rotation, creating a moving galaxy effect (still not perfect on mobile).

Shooting stars are generated dynamically using a requestAnimationFrame loop. Yes, there are moving stars crossing the scene.

Live: geoglify.com

I implemented authentication on geoglify.com using u/Laravel Socialite and within minutes I had GitHub and Google login working. The main advantage is that users don’t waste time creating an account or remembering another password, reducing costs overall.

Authenticated users can store a project up to 5 MB. A unique link is generated for each project, and all links automatically expire after 3 days. Soon, users will also be able to share geo projects with other people.

Having fun again with Geoglify.

Styling for points, lines and polygons is now working. Still missing more style options, but it’s already usable.

Lightweight by design. Projects under 5MB are stored directly in the browser session and can be restored later.

No UI framework used, just HTML5 + Tailwind CSS from the Laravel + Vue.js setup.

https://geoglify.free.laravel.cloud