Maplibre

In [ ]:

# %pip install mapwidget

# %pip install mapwidget

In [ ]:

import mapwidget.maplibre as mapwidget

import mapwidget.maplibre as mapwidget

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.center

m.center

In [ ]:

m.zoom

m.zoom

In [ ]:

m.bounds

m.bounds

In [ ]:

m.clicked_latlng

m.clicked_latlng

In [ ]:

esm = """

    var videoStyle = {
        'version': 8,
        'sources': {
            'satellite': {
                'type': 'raster',
                'url':
                    'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
                'tileSize': 256
            },
            'video': {
                'type': 'video',
                'urls': [
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4',
                    'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'
                ],
                'coordinates': [
                    [-122.51596391201019, 37.56238816766053],
                    [-122.51467645168304, 37.56410183312965],
                    [-122.51309394836426, 37.563391708549425],
                    [-122.51423120498657, 37.56161849366671]
                ]
            }
        },
        'layers': [
            {
                'id': 'background',
                'type': 'background',
                'paint': {
                    'background-color': 'rgb(4,7,14)'
                }
            },
            {
                'id': 'satellite',
                'type': 'raster',
                'source': 'satellite'
            },
            {
                'id': 'video',
                'type': 'raster',
                'source': 'video'
            }
        ]
    };

    var map = new maplibregl.Map({
        container: 'map',
        minZoom: 14,
        zoom: 17,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: videoStyle
    });

    var playingVideo = true;

    map.on('click', function () {
        playingVideo = !playingVideo;

        if (playingVideo) map.getSource('video').play();
        else map.getSource('video').pause();
    });

"""

esm = """ var videoStyle = { 'version': 8, 'sources': { 'satellite': { 'type': 'raster', 'url': 'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', 'tileSize': 256 }, 'video': { 'type': 'video', 'urls': [ 'https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4', 'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm' ], 'coordinates': [ [-122.51596391201019, 37.56238816766053], [-122.51467645168304, 37.56410183312965], [-122.51309394836426, 37.563391708549425], [-122.51423120498657, 37.56161849366671] ] } }, 'layers': [ { 'id': 'background', 'type': 'background', 'paint': { 'background-color': 'rgb(4,7,14)' } }, { 'id': 'satellite', 'type': 'raster', 'source': 'satellite' }, { 'id': 'video', 'type': 'raster', 'source': 'video' } ] }; var map = new maplibregl.Map({ container: 'map', minZoom: 14, zoom: 17, center: [-122.514426, 37.562984], bearing: -96, style: videoStyle }); var playingVideo = true; map.on('click', function () { playingVideo = !playingVideo; if (playingVideo) map.getSource('video').play(); else map.getSource('video').pause(); }); """

In [ ]:

m.set_esm(esm)
m

m.set_esm(esm) m

In [ ]:

esm = """

    var map = (window.map = new maplibregl.Map({
        container: 'map',
        zoom: 12,
        center: [11.39085, 47.27574],
        pitch: 52,
        hash: true,
        style: {
            version: 8,
            sources: {
                osm: {
                    type: 'raster',
                    tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                    tileSize: 256,
                    attribution: '© OpenStreetMap Contributors',
                    maxzoom: 19
                },
                terrainSource: {
                    type: 'raster-dem',
                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
                    tileSize: 256
                },
                hillshadeSource: {
                    type: 'raster-dem',
                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
                    tileSize: 256
                }
            },
            layers: [
                {
                    id: 'osm',
                    type: 'raster',
                    source: 'osm'
                },
                {
                    id: 'hills',
                    type: 'hillshade',
                    source: 'hillshadeSource',
                    layout: { visibility: 'visible' },
                    paint: { 'hillshade-shadow-color': '#473B24' }
                }
            ],
            terrain: {
                source: 'terrainSource',
                exaggeration: 1
            }
        },
        maxZoom: 18,
        maxPitch: 85
    }));

    map.addControl(
        new maplibregl.NavigationControl({
            visualizePitch: true,
            showZoom: true,
            showCompass: true
        })
    );

    map.addControl(
        new maplibregl.TerrainControl({
            source: 'terrainSource',
            exaggeration: 1
        })
    );

"""

esm = """ var map = (window.map = new maplibregl.Map({ container: 'map', zoom: 12, center: [11.39085, 47.27574], pitch: 52, hash: true, style: { version: 8, sources: { osm: { type: 'raster', tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'], tileSize: 256, attribution: '© OpenStreetMap Contributors', maxzoom: 19 }, terrainSource: { type: 'raster-dem', url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json', tileSize: 256 }, hillshadeSource: { type: 'raster-dem', url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json', tileSize: 256 } }, layers: [ { id: 'osm', type: 'raster', source: 'osm' }, { id: 'hills', type: 'hillshade', source: 'hillshadeSource', layout: { visibility: 'visible' }, paint: { 'hillshade-shadow-color': '#473B24' } } ], terrain: { source: 'terrainSource', exaggeration: 1 } }, maxZoom: 18, maxPitch: 85 })); map.addControl( new maplibregl.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true }) ); map.addControl( new maplibregl.TerrainControl({ source: 'terrainSource', exaggeration: 1 }) ); """

In [ ]:

m.set_esm(esm)
m

m.set_esm(esm) m

---

Last update: 2023-03-24