[openstreetmap/openstreetmap-website] Proposal: Add an interactive 3D Globe toggle view to the main homepage map (Issue #7167)

[joeyboy76767]

joeyboy76767 created an issue (openstreetmap/openstreetmap-website#7167)

### Problem

With the successful deployment of vector tiles directly to the OpenStreetMap servers, the core infrastructure of the project has leaped forward. However, the front-end user interface on openstreetmap.org is still locked into a traditional, flat 2D projection.While flat map projections were a necessary mathematical compromise for paper maps and early, low-powered computers, modern web browsers and graphics cards (GPUs) are fully optimized for real-time 3D rendering. Because we are displaying this map on digital screens rather than a static sheet of paper, we have the processing power to handle the true geometry of the Earth on the fly.Platforms like Esri (ArcGIS) are already proving the strength of our data. Their OpenStreetMap 3D Scene Viewer streams our raw vector coordinates and renders a beautiful, interactive 3D globe right in the browser. It calculates text labels and lines dynamically, keeping town names perfectly readable without the distortion of a flat projection.Since the OSM servers are already handling the heavy lifting of serving the raw vector data packets, adding a native 3D globe view would not put a rendering strain on the backend infrastructure. Modern open-source libraries like MapLibre GL can toggle between a flat mercator view and a type: 'globe' projection entirely on the user's local graphics card.Could the development team consider adding a toggle button to the main homepage—similar to Google Maps—allowing users to switch seamlessly between the flat layout and an interactive 3D globe view? This would fully showcase the power of OpenStreetMap’s new vector infrastructure on modern devices.

### Description

Proposed Code Approach (Using MapLibre GL)Once the homepage frontend completely transitions to a native WebGL vector engine like MapLibre GL, a 3D globe toggle can be implemented entirely on the client side using a simple projection layout switch:


// 1. Initialize the map natively using OSM's live vector tile feeds
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://openstreetmap.org', // Direct vector feed
    center:, // Center of the world
    zoom: 2
});

// 2. A simple UI toggle function to switch modes on the fly
function changeMapProjection(wants3DGlobe) {
    if (wants3DGlobe) {
        // Renders the 3D globe view natively using the user's GPU
        map.setProjection({ type: 'globe' });
    } else {
        // Switches back to the standard flat layout
        map.setProjection({ type: 'mercator' });
    }
}


### Screenshots

https://www.arcgis.com/apps/instant/3dviewer/index.html?appid=3d386d0484a64573900bdaee007d805e

<img width="1920" height="1050" alt="Image" src="https://github.com/user-attachments/assets/db02897f-924a-4f7f-84f9-7782c537b4c7" />


-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/7167
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/7167 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260620/f88664f0/attachment-0001.htm>