Creating a globe?

[btyukodi]

This is not a bug, just a question (from a newbie).
Apparently this project: http://www.webglearth.org/ has the same API as Leaflet, except that "L." has to be changed to "WE." and then all the maps would be displayed on a 3D globe. I was wondering if there is a simple way to modifiy/add to the source code, something like a GlobeMap object that would work exactly as the Map object, except that the maps would be displayed on a globe.
If so, what would have to be changed or where should this be added? I would like to do it but would need some help.

Thanks!

[ocefpaf]

Interesting. I knew about Cesium, but had no idea someone wrapped it around Leaflet's API.

I was wondering if there is a simple way to modify/add to the source code, something like a GlobeMap

In theory yes, but that raises one major concern: saying that the API is the same (in my experience with software in general) is usually an overstatement. Implementations like that are rarely a drop-in replacement and many unexpected behaviors might arise.

With that said, there is nothing preventing someone from implementing that in folium.

[BibMartin]

saying that the API is the same (in my experience with software in general) is usually an overstatement. Implementations like that are rarely a drop-in replacement and many unexpected behaviors might arise.

👍 and I guess this is a reason for not handling this link into folium.

But it is possible to create new Map3d and TileLayer3d that inherit from folium :

class Map3d(folium.Map):
    def __init__(self, location=None, width='100%', height='100%', left='0%',
                 top='0%', position='relative', tiles='OpenStreetMap', API_key=None,
                 max_zoom=18, min_zoom=1, zoom_start=10, attr=None, min_lat=-90,
                 max_lat=90, min_lon=-180, max_lon=180, detect_retina=False, crs='EPSG3857'):
        super(Map3d, self).__init__(location=location, width=width, height=height,
                                    left=left, top=top, position=position, tiles=tiles,
                                    API_key=API_key, max_zoom=max_zoom, min_zoom=min_zoom,
                                    zoom_start=zoom_start, attr=attr, min_lat=min_lat,
                                    max_lat=max_lat, min_lon=min_lon, max_lon=max_lon,
                                    detect_retina=detect_retina, crs=crs)
        self._template = Template(u"""
        {% macro header(this, kwargs) %}
            <script src="https://www.webglearth.com/v2/api.js"></script>
            <style> #{{this.get_name()}} {
                position : {{this.position}};
                width : {{this.width[0]}}{{this.width[1]}};
                height: {{this.height[0]}}{{this.height[1]}};
                left: {{this.left[0]}}{{this.left[1]}};
                top: {{this.top[0]}}{{this.top[1]}};
                }
            </style>
        {% endmacro %}
        {% macro html(this, kwargs) %}
            <div class="folium-map" id="{{this.get_name()}}" ></div>
        {% endmacro %}

        {% macro script(this, kwargs) %}

            var southWest = L.latLng({{ this.min_lat }}, {{ this.min_lon }});
            var northEast = L.latLng({{ this.max_lat }}, {{ this.max_lon }});
            var bounds = L.latLngBounds(southWest, northEast);

            var {{this.get_name()}} = WE.map('{{this.get_name()}}', {
                                           center:[{{this.location[0]}},{{this.location[1]}}],
                                           zoom: {{this.zoom_start}},
                                           maxBounds: bounds,
                                           layers: [],
                                           crs: L.CRS.{{this.crs}}
                                         });
        {% endmacro %}
        """)

class TileLayer3d(folium.TileLayer):
    def __init__(self, tiles='OpenStreetMap', min_zoom=1, max_zoom=18, attr=None,
                 API_key=None, detect_retina=False, name=None, overlay=False, control=True):
        super(TileLayer3d, self).__init__(tiles=tiles,
            min_zoom=min_zoom, max_zoom=max_zoom, attr=attr,
            API_key=API_key, detect_retina=detect_retina, name=name,
            overlay=overlay, control=control)
        self._template = Template(u"""
        {% macro script(this, kwargs) %}
            var {{this.get_name()}} = WE.tileLayer(
                '{{this.tiles}}',
                {
                    maxZoom: {{this.max_zoom}},
                    minZoom: {{this.min_zoom}},
                    attribution: '{{this.attr}}',
                    detectRetina: {{this.detect_retina.__str__().lower()}}
                    }
                ).addTo({{this._parent.get_name()}});

        {% endmacro %}
        """)

m = Map3d(location=[30,0], tiles=None, zoom_start=2)
m.add_child(TileLayer3d(tiles='mapquestopen'))
m

When using inline notebook representation, i get an http vs https issue, but it renders well in a standalone html page.

[btyukodi]

Thanks! Apparently I have an earlier version installed (from pip) but I get the idea. Also, you are right: the API does not support marker clustering for example and that's probably just one of the possible issues.

[ocefpaf]

When using inline notebook representation, i get an http vs https issue, but it renders well in a standalone html page.

Are you using firefox? I could not run your example on firefox, had to change to Chromium to see it. (Awesome BTW!)

Maybe the problem is that the notebook is related to this:

ocefpaf/python4oceanographers#1 (comment)

[BibMartin]

Yes, there's at least a mix-content issue. This is why I've put the lib in https ; but maybe it's not enough.
It would worth trying to download it and serve it oneself.

btw : my default browser is opera ; it makes a third testing env.

[ocefpaf]

btw : my default browser is opera ; it makes a third testing env.

And real corner case one 😉

[ocefpaf]

I wonder if we should add this in folium or just an a notebook example on how to hack folium? I don't want to maintain something like that just because it is cool. But I also think we should show users that it is possible with some small piece of code.

[BibMartin]

I don't want to maintain something like that just because it is cool.

👍 This is definitely too instable for being incorporated to Folium. A Notebook example in folium-notebooks would be fine.

[ocefpaf]

Done http://nbviewer.jupyter.org/github/ocefpaf/folium_notebooks/blob/a68a89ae28587e6a9fbb21e7a1bd6042183a11bf/test_3D.ipynb.

(Closing this.)

[BibMartin]

Awesome!

[btyukodi]

Excellent! Thank you all!

[Mantej-Singh]

Thanks for making this!

[Mantej-Singh]

I tried the above "test_3D.ipynb" but it's not working for me.
Any suggestion?