I currently have a Leaflet.js map system. It's OK, although extremely slow on anything but the fastest computer once you have loaded any non-trivial amount of markers or overlay images.

Anyway, what I would like is for the existing maps to "wrap around" a sphere representing Earth, with a black background to represent space (if zoomed out enough). I'd love to be able to toggle this on/off with a button, switching between the standard 2D view and the 3D globe.

Additionally, I would like to be able to put some sort of "height data" files (such as what I can get from a government site for my country) in a dir and tell Leaflet about these, and then have the relevant area on the 3D globe get "height differences".

All the markers and stuff would display in this mode, just like in the 2D mode. This is important.

(Of course, I would like a Google Maps-like actual 3D environment with 3D objects, but I consider that "science fiction" at this stage, especially since I want it for free and without relying on a third party service.)

Is what I ask for possible already in Leaflet? I have a vague memory of a few plug-ins that attempt to do something similar, but from what I can remember, they all suck. I would love for Leaflet itself to support this, without a plug-in required, and it seems like it would be trivial to accomplish for somebody who managed to make Leaflet in the first place, as it's essentially "just" putting the 2D textures onto a sphere in WebGL or something, and the height differences part isn't even a requirement -- it would just be a bonus.

I hope you have some happy news for me, such as: "Yeah, this is a very requested feature and has been prioritized by the Leaflet.js team. We're adding it in the next version which is due to be released next week. Then you can simply use the config option "use3DGlobe: true". Enjoy!"

closed as too broad by PolyGeo Jun 16 '18 at 4:19

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


No, Leaflet is 2D only.

If you want 3D, use a 3D map engine, such as CesiumJS.

and it seems like it would be trivial to accomplish [...] as it's essentially "just" putting the 2D textures onto a sphere in WebGL or something,

Nope. I wish it could be trivial.

For starters, floating point numbers in Javascript are 8-byte, which means a good amount of precision. In WebGL, they are 3-byte, which means precision errors of up to a couple of meters when representing points far from the origin of coordinates.

The algorithm for determining if a tile is visible on the screen? In 2D, it's a simple bounding box. Add 3D and camera tilt, and all of a sudden you've got non-rectangular sets and levels of detail to care about.

If you want a deeper look on why it is hard, I recommend the following book: https://www.amazon.com/3D-Engine-Design-Virtual-Globes/dp/1568817118


No, Leaflet is 2D only.

If you want 3D, Use openlayers 3. It supports 3d globe views

Not the answer you're looking for? Browse other questions tagged or ask your own question.