Nemo

Posted on Nov 2

Locus Earth: Building an Open-Source 3D Globe That Runs Directly in Your Browser 🌍

#webgl #javascript #cesium #opensource

Have you ever wanted to explore the Earth in 3D without installing a dedicated desktop application?

That's exactly what I wanted to build.

Locus Earth is an open-source, browser-based 3D globe application inspired by Google Earth. It combines interactive 3D terrain, satellite imagery, 3D buildings, measurement tools, location search, and more — all accessible directly from a modern web browser.

No complicated installation. No account registration. Just open the page and start exploring.

But this project is about more than displaying a 3D globe. I wanted to build something that feels like a complete mapping application, works across desktop and mobile devices, and remains relatively easy for other developers to explore and modify.

Let's take a look!

🌍 What is Locus Earth?

Locus Earth is built with CesiumJS, an open-source JavaScript library for 3D geospatial visualization.

The application provides an interactive virtual globe with:

Global satellite imagery and 3D terrain.
Global 3D buildings based on OpenStreetMap data.
Multiple imagery providers and map styles.
Location search and navigation.
Distance and area measurement.
Custom markers, paths, and polygons.
Day/night lighting simulation.
Dark and light themes.
Offline imagery caching.
Progressive Web App (PWA) support.

The interface is designed for both desktop and mobile devices, with touch-friendly controls and an adaptive layout.

🗺️ Exploring the World

One of the main features is the ability to switch between different imagery sources.

Instead of relying on a single basemap, Locus Earth integrates several providers:

Sentinel-2
Blue Marble
Nighttime satellite imagery
Tianditu satellite imagery
Tencent Maps

This gives users different ways to explore the same location.

The application also supports terrain visualization and 3D buildings, making the experience more immersive than a traditional flat map.

Region-aware features

Some features are activated depending on the geographic area being viewed.

For example:

In supported cities such as Denver, Washington, D.C., and Sydney, the application automatically switches to higher-detail city models.
When browsing mainland China, a Street View button becomes available, allowing users to jump to panoramic imagery.

There is also an experimental Google 3D mode that uses a Google 3D Tiles demonstration asset hosted on Cesium ion. Its availability depends on network connectivity and the continued availability of that asset.

📐 More Than Just a Globe

I didn't want Locus Earth to be just something users open, look at, and close.

So I added several practical mapping tools.

Measurement tools

Users can measure distances and areas directly on the globe.

Both polylines and polygons follow the terrain rather than simply floating above the surface.

Completed measurements can also be named and saved for later use.

Markers, paths, and favorites

Users can create custom markers, paths, and geometric shapes.

These objects are organized in a unified favorites system and stored locally in the browser.

They can also be exported and imported using KML (XML), making it easier to preserve or transfer user-created geographic data.

Location search

Simply enter a place name to navigate to it.

The built-in geocoder makes it possible to jump between locations without manually navigating the globe.

🌗 A Few Details That Make It Feel Like an Application

There are also several smaller features that make everyday interaction more convenient:

Day/night simulation with adjustable time.
Sun and Moon lighting.
Optional 3D terrain.
Building model visibility controls.
Compass and camera tilt reset.
Draggable floating toolbar.
System-aware light and dark themes.

These features may seem relatively small individually, but together they help make the application feel more complete.

⚙️ The Technical Side: Why Zero Build?

One of my most important architectural decisions was to avoid a traditional build pipeline.

Locus Earth uses native JavaScript ES Modules.

There is no bundler, transpiler, or complicated compilation process required to run the application.

The project is essentially a static web application.

This approach has several advantages:

The source code can be inspected directly.
There is no build step before deployment.
Changes can be tested quickly.
Hosting is straightforward.
Contributors can work with the actual source files.

The application also uses a Service Worker and Web App Manifest to provide PWA functionality.

For deployment, it can be hosted on static hosting platforms such as GitHub Pages or Cloudflare Pages.

📱 Offline Support

Offline functionality was another feature I wanted to include.

Locus Earth supports local caching of imagery tiles.

Once an area has been visited and its imagery has been cached, users can revisit that area even without an active network connection.

However, offline functionality has limitations:

Previously cached imagery can still be displayed.
Terrain data still requires a network connection.
3D buildings still require a network connection.
Location search still requires a network connection.

The goal isn't to turn the entire globe into a fully offline application, but to make previously explored areas more accessible.

📲 Bringing It to Android

Although Locus Earth is fundamentally a web application, I also wanted to provide an Android installation option.

Instead of rewriting the entire application in Kotlin or building a separate native mapping engine, I created a lightweight Android WebView wrapper.

The APK essentially opens the online application in a fullscreen native window.

It provides:

A fullscreen experience without a browser address bar.
Domain whitelisting.
External links opened in the system browser.
A simple first-launch explanation that the application is web-based.

And here's an interesting part:

The Android application does not contain the actual mapping logic.

The web application is still the main product, and its content is loaded online.

This means that when I update the website, existing Android installations automatically receive the updated version.

There is no need to rebuild or redistribute the APK for ordinary website updates.

The Android wrapper only needs to be rebuilt when its own configuration changes, such as the application icon, package name, or allowed domains.

The Android project is also included in the repository, so developers can build their own versions.

🤖 Built with AI Assistance

Locus Earth has been developed with assistance from several large language models.

The models used during development include:

DeepSeek-V4.1-Flash
Hunyuan4
ChatGPT-4o

AI assistance has been part of the development process, helping with implementation, debugging, and exploring possible solutions.

However, the project still involves plenty of testing, integration, troubleshooting, and decisions about how different components should work together.

Getting individual features to work is one thing. Making them work together reliably across different browsers and devices is another challenge entirely.

🛠️ Technology Stack

Here's a quick overview:

The entire project is released under the MIT License.

Both the web application and Android wrapper source code are available in the repository.

🚀 Try It Yourself!

You can access Locus Earth directly in your browser:

GitHub Pages:
https://zhunemo.github.io/locus-earth/

Cloudflare Pages:
https://locus-earth.pages.dev

Source Code:
https://github.com/ZhuNemo/locus-earth

For developers interested in contributing, modifying, or self-hosting the project, the repository also includes documentation covering development decisions, configuration, deployment, and Android APK builds.

One important note: the API keys included in the repository are restricted to the project's own domains. If you fork or deploy your own instance, you'll need to obtain and configure your own API keys.

Final Thoughts

Locus Earth started as a personal project, but it gradually grew into something much more substantial.

There were plenty of challenges along the way: rendering compatibility, mobile browser behavior, integrating different geographic data sources, caching strategies, and making the interface work well on different screen sizes.

It's still an independently maintained project, and there is always room for improvement.

For now, I'm happy with where it has arrived.

If you're interested in 3D maps, CesiumJS, geospatial visualization, or just want to explore an alternative browser-based globe, give it a try!

Happy exploring! 🌍

Top comments (1)

Ivan Annovazzi • Nov 2

Ok this is sick, Google Earth that just runs in a browser tab with no install. Curious about one thing: terrain and the OSM buildings usually need a Cesium ion token, so does a fresh fork work out of the box or does a new dev have to register their own key first?