Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bridge setup does not work for feature-dependent expression values #654

Open
elenatorro opened this issue Sep 23, 2019 · 1 comment
Open

Bridge setup does not work for feature-dependent expression values #654

elenatorro opened this issue Sep 23, 2019 · 1 comment
Labels
BUG 🐛 Something isn't working as expected rt-frontend

Comments

@elenatorro
Copy link
Contributor

What is happening?

When adding a Legend through the Bridge, Airship creates a baseStyle object with default values for each style property from the viz. This is not 100% accurate, cause it's getting a single value for each property. When the property is an expression that depends on a feature, this doesn't work.

airship/packages/bridge/src/vl/legends/index.ts

Lines 28 to 40 in 1b52c88

function _getNumberValue(viz, propName, defaultValue?) {
const prop = viz[propName];
if (prop.expressionName === 'ramp') {
return defaultValue || _getLegendData(prop);
}
if (prop.type === 'number') {
return prop.value;
}
return defaultValue;
}

What should happen?

From my perspective, the best solution is to use the getLegendData for each style property. This will imply some changes in the widget data, but it's the correct way to proceed.

Steps to Reproduce

Use this html example:

<!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>DEMO</title>

    <script src="https://libs.cartocdn.com/airship-components/v2.1.1/airship.js"></script>
    <script src="https://libs.cartocdn.com/airship-bridge/v2.1.1/asbridge.js"></script>
    <script src="http://libs.cartocdn.com/carto-vl/v1.4.1/carto-vl.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>

    <link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.1.1/airship.css">
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />

    <style>
      html, body {
        margin: 0;
      }
      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .as-panel {
        flex-direction: column;
      }

      as-legend {
        width: 100%;
      }

      #widget {
        font-size: 2em;
        margin-top: 20px;
      }
    </style>
  </head>

  <body class="as-app-body as-app">
    <div class="as-content">
      <main class="as-main">
        <div class="as-map-area">
          <div id="map"></div>
          <div class="as-map-panels">
            <div class="as-panel as-panel--top as-panel--left" id="legends">
              <as-legend
                id="spend-data-legend"
                heading="Spend Data"
                description="Color intensity defined by Spend Data">
                <as-legend-color-continuous-polygon id="spend-data" slot="legends" />
              </as-legend>
            </div>
          </div>
        </div>
      </main>
      <aside class="as-sidebar as-sidebar--right">
        <section class="as-box">
          <as-widget-header>
            <h2 class="as-widget-header__header">Spend Data</h2>
          </as-widget-header>
          <p class="as-body" id="widget"></p>
        </section>

        <section class="as-box">
          <as-histogram-widget
            show-clear
            id="histogramWidget"
            heading="spend-data"
          >
          </as-histogram-widget>
        </section>

        <section class="as-box">
          <as-category-widget
            show-clear
            id="categoryWidget"
            heading="Type"
          ></as-category-widget>
        </section>
      </aside>
    </div>

    <script>
      const map = new mapboxgl.Map({
        container: 'map',
        style: carto.basemaps.darkmatter,
        center: [0, 40],
        zoom: 1
      });

      map.addControl(new mapboxgl.NavigationControl());

      carto.setDefaultAuth({
        username: 'cartovl',
        apiKey: 'default_public'
      });

      const source = new carto.source.SQL(`
        SELECT * FROM spend_data
      `);

      const viz = new carto.Viz(`
        color: opacity(ramp(clusterAVG($amount), sunset),0.9)
        width: clusterCount()
      `);

      const layer = new carto.Layer('spend_data', source, viz);

      layer.addTo(map, 'watername_ocean');

      AsBridge.VL.Legends.rampLegend('#spend-data',
        layer,
        'color'
      );
    </script>
  </body>
</html>
@elenatorro elenatorro added the BUG 🐛 Something isn't working as expected label Sep 23, 2019
@alonsogarciapablo
Copy link

Thank you @elenatorro!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
BUG 🐛 Something isn't working as expected rt-frontend
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alonsogarciapablo @elenatorro @oriolbx