94 mapbox

Creating 3D maps with Mapbox

In [ ]:

# %pip install -U leafmap

# %pip install -U leafmap

In [ ]:

import leafmap.mapbox as leafmap

import leafmap.mapbox as leafmap

You need a Mapbox access token to use the Mapbox widget. First, sign up for a free Mapbox account. Then, you can create a token by following the instructions here. Set Mapbox_TOKEN as an environment variable to use the Mapbox widget. Alternatively, uncomment the following code block and replace YOUR-API-TOKEN with your Mapbox access token.

In [ ]:

# import os
# os.environ['MAPBOX_TOKEN'] = 'YOUR-API-TOKEN'

# import os # os.environ['MAPBOX_TOKEN'] = 'YOUR-API-TOKEN'

In [ ]:

m = leafmap.Map(center=[-100, 40], zoom=1.2, height="600px")
m

m = leafmap.Map(center=[-100, 40], zoom=1.2, height="600px") m

In [ ]:

m = leafmap.Map(style="mapbox://styles/mapbox/satellite-streets-v12")
m

m = leafmap.Map(style="mapbox://styles/mapbox/satellite-streets-v12") m

In [ ]:

m.clicked_lnglat

m.clicked_lnglat

In [ ]:

m.zoom

m.zoom

In [ ]:

m.center

m.center

In [ ]:

m.bounds

m.bounds

In [ ]:

esm = """

    const map = new mapboxgl.Map({
        container: 'map',
        zoom: 14,
        center: [-114.26608, 32.7213],
        pitch: 80,
        bearing: 41,
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-streets-v12'
    });

    map.on('style.load', () => {
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
        // add the DEM source as a terrain layer with exaggerated height
        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
    });


"""

esm = """ const map = new mapboxgl.Map({ container: 'map', zoom: 14, center: [-114.26608, 32.7213], pitch: 80, bearing: 41, // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/satellite-streets-v12' }); map.on('style.load', () => { map.addSource('mapbox-dem', { 'type': 'raster-dem', 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1', 'tileSize': 512, 'maxzoom': 14 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 }); }); """

In [ ]:

m.set_esm(esm)
m

m.set_esm(esm) m

In [ ]:

esm = """

    (async () => {
        const map = new mapboxgl.Map({
            container: 'map',
            zoom: 13,
            center: [6.6301, 45.35625],
            pitch: 80,
            bearing: 160,
            interactive: false,
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/satellite-v9'
        });

        await map.once('style.load');

        // Add daytime fog
        map.setFog({
            'range': [-1, 2],
            'horizon-blend': 0.3,
            'color': 'white',
            'high-color': '#add8e6',
            'space-color': '#d8f2ff',
            'star-intensity': 0.0
        });

        // Add 3D terrain
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.terrain-rgb',
            'tileSize': 512,
            'maxzoom': 14
        });
        map.setTerrain({
            'source': 'mapbox-dem',
            'exaggeration': 1.5
        });

        // Run a timing loop to switch between day and night
        await map.once('idle');

        let lastTime = 0.0;
        let animationTime = 0.0;
        let cycleTime = 0.0;
        let night = true;

        const initialBearing = map.getBearing();

        function frame(time) {
            const elapsedTime = (time - lastTime) / 1000.0;

            animationTime += elapsedTime;
            cycleTime += elapsedTime;

            if (cycleTime >= 10.0) {
                if (night) {
                    // night fog styling
                    map.setFog({
                        'range': [-1, 2],
                        'horizon-blend': 0.3,
                        'color': '#242B4B',
                        'high-color': '#161B36',
                        'space-color': '#0B1026',
                        'star-intensity': 0.8
                    });
                } else {
                    // day fog styling
                    map.setFog({
                        'range': [-1, 2],
                        'horizon-blend': 0.3,
                        'color': 'white',
                        'high-color': '#add8e6',
                        'space-color': '#d8f2ff',
                        'star-intensity': 0.0
                    });
                }

                night = !night;
                cycleTime = 0.0;
            }

            const rotation = initialBearing + animationTime * 2.0;
            map.setBearing(rotation % 360);

            lastTime = time;

            window.requestAnimationFrame(frame);
        }

        window.requestAnimationFrame(frame);
    })();

"""

esm = """ (async () => { const map = new mapboxgl.Map({ container: 'map', zoom: 13, center: [6.6301, 45.35625], pitch: 80, bearing: 160, interactive: false, // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/satellite-v9' }); await map.once('style.load'); // Add daytime fog map.setFog({ 'range': [-1, 2], 'horizon-blend': 0.3, 'color': 'white', 'high-color': '#add8e6', 'space-color': '#d8f2ff', 'star-intensity': 0.0 }); // Add 3D terrain map.addSource('mapbox-dem', { 'type': 'raster-dem', 'url': 'mapbox://mapbox.terrain-rgb', 'tileSize': 512, 'maxzoom': 14 }); map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 }); // Run a timing loop to switch between day and night await map.once('idle'); let lastTime = 0.0; let animationTime = 0.0; let cycleTime = 0.0; let night = true; const initialBearing = map.getBearing(); function frame(time) { const elapsedTime = (time - lastTime) / 1000.0; animationTime += elapsedTime; cycleTime += elapsedTime; if (cycleTime >= 10.0) { if (night) { // night fog styling map.setFog({ 'range': [-1, 2], 'horizon-blend': 0.3, 'color': '#242B4B', 'high-color': '#161B36', 'space-color': '#0B1026', 'star-intensity': 0.8 }); } else { // day fog styling map.setFog({ 'range': [-1, 2], 'horizon-blend': 0.3, 'color': 'white', 'high-color': '#add8e6', 'space-color': '#d8f2ff', 'star-intensity': 0.0 }); } night = !night; cycleTime = 0.0; } const rotation = initialBearing + animationTime * 2.0; map.setBearing(rotation % 360); lastTime = time; window.requestAnimationFrame(frame); } window.requestAnimationFrame(frame); })(); """

In [ ]:

m.set_esm(esm)
m

m.set_esm(esm) m

In [ ]:

m = leafmap.Map(style="mapbox://styles/mapbox/satellite-streets-v12")
m

m = leafmap.Map(style="mapbox://styles/mapbox/satellite-streets-v12") m

In [ ]:

# import ee
# ee.Authenticate()
# ee.Initialize(project="YOUR-PROJECT-ID")

# import ee # ee.Authenticate() # ee.Initialize(project="YOUR-PROJECT-ID")

In [ ]:

# dataset = ee.ImageCollection("ESA/WorldCover/v200").first()
# vis_params = {"bands": ["Map"]}
# url = leafmap.ee_tile_url(dataset, vis_params)

# dataset = ee.ImageCollection("ESA/WorldCover/v200").first() # vis_params = {"bands": ["Map"]} # url = leafmap.ee_tile_url(dataset, vis_params)

In [ ]:

esm = """
    const map = new mapboxgl.Map({
        container: 'map',
        zoom: 1.2,
        center: [-100, 40],
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-streets-v12'
    });

    map.on('style.load', () => {
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
        });
        // add the DEM source as a terrain layer with exaggerated height
        map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

        map.addSource('raster-tiles', {
            'type': 'raster',
            'tiles': [
                'https://THE-TILE-URL' // replace with the actual tile URL
            ],
            'tileSize': 256
        });

        map.addLayer({
            'id': 'raster-layer',
            'type': 'raster',
            'source': 'raster-tiles',
            'paint': {
                'raster-opacity': 0.7 // Adjust the opacity as needed
            }
        });
        
    });

"""

esm = """ const map = new mapboxgl.Map({ container: 'map', zoom: 1.2, center: [-100, 40], // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/satellite-streets-v12' }); map.on('style.load', () => { map.addSource('mapbox-dem', { 'type': 'raster-dem', 'url': 'mapbox://mapbox.mapbox-terrain-dem-v1', 'tileSize': 512, 'maxzoom': 14 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 }); map.addSource('raster-tiles', { 'type': 'raster', 'tiles': [ 'https://THE-TILE-URL' // replace with the actual tile URL ], 'tileSize': 256 }); map.addLayer({ 'id': 'raster-layer', 'type': 'raster', 'source': 'raster-tiles', 'paint': { 'raster-opacity': 0.7 // Adjust the opacity as needed } }); }); """

In [ ]:

m.set_esm(esm)
m

m.set_esm(esm) m