MapBox with relief

Anvil Q&A
1

What I’m trying to do:
Hello,
I’m trying to implement a MAPbox map with relief like this Add 3D terrain to a map | Mapbox GL JS | Mapbox
I can’t syntax the following JS code in python.
in the MapBox documentation, you need to do the following in javascript:
Code Sample

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 });

II don’t know how to write the map.on event in python
The documentation is here “https: / /docs.mapbox.com/mapbox-gl-js/api/events/#evented#on”

What I’ve tried and what’s not working:

Code Sample:

  def form_show(self, **event_args):
    """This method is called when the form is shown on the page"""
    mapboxgl.accessToken = 'my_token...';
    self.map = mapboxgl.Map({
        'container' : anvil.js.get_dom_node(self.spacer_1),
        'style' : 'mapbox://styles/mapbox/satellite-streets-v12',
        'projection' : 'globe', 
        'zoom' : 13,
        'center' : [6.04013888, 45.0651389],
        'pitch' : 60, 
        'bearing' : -60
    })

    
    self.map.on('style.load', self.add_relief()) 
  
    self.map.setTerrain({'source': 'mapbox-dem', 'exaggeration': 1.5})
    
  def add_relief(self) :
    self.map.addSource('mapbox-dem', {
          'type': 'raster-dem',
          'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
          'tileSize': 512,
          'maxzoom': 14
    })

Clone link:
https://gsp-view.anvil.app/

2

I can’t say if this is your entire issue or not, but when you pass a function to be used as a callback, you don’t want to call the function (e.g. you don’t want the parentheses). It should be:

self.map.on('style.load', self.add_relief)

1 Like