Mapbox

In [ ]:

# %pip install mapwidget

# %pip install mapwidget

In [ ]:

import mapwidget.mapbox as mapwidget

import mapwidget.mapbox as mapwidget

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 = mapwidget.Map(center=[20, 0], zoom=2, height='600px')
m

m = mapwidget.Map(center=[20, 0], zoom=2, height='600px') m

In [ ]:

m.clicked_latlng

m.clicked_latlng

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

---

Last update: 2023-03-24