Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to change mapStyle?

See original GitHub issue

Hello! I have a deckgl visualization of some arcs. I want to be able to switch between two mapbox styles (light and satellite). I’m trying to use setProps to do this, but the mapStyle isn’t changing. Below is the full code showing an example of what I’m trying to do. What am I doing wrong? Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Switch map style</title>
  <link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css'>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <style>
  html{
    margin,padding:0;
  }
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'Khula', sans-serif;
  }
  #switch-satellite{
    position: absolute;
    top:20px;
    right:90px;
    z-index: 1;
    background: #fff000;
    padding:8px 15px;
    margin-top:10px;
  }
  #switch-light{
    position: absolute;
    top:20px;
    right:20px;
    z-index: 1;
    background: #fff000;
    padding:8px 15px;
    margin-top:10px;
  }
  </style>
</head>
<body>
  <div id="switch-light">light</div>
  <div id="switch-satellite">satellite</div>

  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
  <script src='https://unpkg.com/deck.gl@~7.0.0/dist.min.js'></script>
  <script>
    data = [{"id": 1,"begin_lat": 39.319732,"begin_lng": -76.649533,"end_lat": 39.990821,"end_lng": -75.168428},{"id": 2,"begin_lat": 32.11667,"begin_lng": 20.06667,"end_lat": 31.649504,"end_lng": -7.189711},{"id": 3,"begin_lat": 19.647634,"begin_lng": -155.533256,"end_lat": 37.778008,"end_lng": -122.431272},{"id":4,"begin_lat": 47.673455,"begin_lng": -122.331537,"end_lat": 49.2819,"end_lng": -123.11874},{"id": 5,"begin_lat": 0.049354,"begin_lng": 32.461462,"end_lat": 35.870357,"end_lng": 14.44776},{"id":6,"begin_lat": 41.601897,"begin_lng": -87.497065,"end_lat": 41.468717,"end_lng": -81.687371},{"id":7,"begin_lat": 63.314401,"begin_lng": 93.884016,"end_lat": 57.06689,"end_lng": 25.458464},{"id":8,"begin_lat": 63.314401,"begin_lng": 93.884016,"end_lat": 47.086857,"end_lng": 19.447899}]

    const deckgl = new deck.DeckGL({
      mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
      mapStyle: 'mapbox://styles/mapbox/light-v9',
      initialViewState: {
        longitude: -33,
        latitude: 36,
        zoom: 3,
        maxZoom: 15,
        pitch: 0,
        bearing: 0
      },
      controller: true,
      layers: []
    });

    updateLayers(data)

    $("#switch-satellite").on('click',function(d){
      updateLayers(data[2])
      deckgl.setProps({
        mapStyle: 'mapbox://styles/mapbox/satellite-v9'
      })
    })

    $("#switch-light").on('click',function(d){
      updateLayers(data)
      deckgl.setProps({
        mapStyle: 'mapbox://styles/mapbox/light-v9'
      })
    })

    function updateLayers(data) {
      const arcLayer = new deck.ArcLayer({
        id: 'arc',
        data: data,
        getSourcePosition: d => [d.begin_lng,d.begin_lat],
        getTargetPosition: d => [d.end_lng,d.end_lat],
        getSourceColor: d => [0, 100, 155],
        getTargetColor: d => [100, 200, 0],
        getHeight: .5,
        opacity: 1,
        getWidth: 3
      });

      deckgl.setProps({
        layers: [arcLayer]
      });
    }
  </script>
</body>
</html>