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.

MVT 'category' property returns a suspected numeric value

See original GitHub issue

Hi all,

I’m testing your MVT creation using Mapnik. I’m trying to extract ‘category’ properties in order to do some stuff later with a ‘featureEnter’ event, but always it returns a numerical value.

As you can see below (simplified example), your public table ‘ne_10m_populated_places_simple’ has a string column called ‘name’, which is the target. I feel like I am missing out…

<!DOCTYPE html>
<html>

<head>
  <title>MVT Test | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
</head>

<body>
  <div id="map"></div>
  <div id="loader">
    <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
      <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
      </svg>
    </div>
  </div>
  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: carto.basemaps.voyager,
      center: [8.234, 46.802],
      zoom: 7
    });

    const nav = new mapboxgl.NavigationControl({
      showCompass: false
    });
    map.addControl(nav, 'top-left');

    async function loadMVT() {
      const mapConfig = {
        buffersize: { mvt: 0 },
        layers: [
          {
            id: 'testLayer',
            type: 'mapnik',
            options: {
              sql: `SELECT cartodb_id,
                           the_geom,
                           the_geom_webmercator,
                           name
                    FROM ne_10m_populated_places_simple
                    WHERE adm0name = 'Switzerland'`
            }
          }
        ]
      }
      const response = await fetch('https://cartovl.carto.com/api/v1/map', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(mapConfig)
      });
      const layergroup = await response.json();
      const tilejson = layergroup.metadata.tilejson.vector;
      const source = new carto.source.MVT(tilejson.tiles, {
        properties: {
          cartodb_id: { type: 'number' },
          name: { type: 'category' }
        },
        idProperty: 'cartodb_id',
      }, {
          layerID: 'testLayer',
          viewportZoomToSourceZoom: zoom => Math.min(Math.max(Math.ceil(zoom), 1), 11)
      });

      const exp = carto.expressions
      const viz = new carto.Viz({
        variables: {
          v_name: exp.viewportFeatures(exp.prop('name'))
        }
      });
      const layer = new carto.Layer('layer', source, viz);

      layer.addTo(map, 'watername_ocean');
      layer.on('loaded', hideLoader);

      const interactivity = new carto.Interactivity(layer)

      interactivity.on('featureEnter', (featureEvent) => {
        console.log(`Country name: ${featureEvent.features[0]._rawFeature.name}`);

        featureEvent.features.forEach(feature => {
          let target = featureEvent.features[0].variables.v_name._properties.name;
          console.log(`Country name: ${target}`);
        });
      });

      function hideLoader() {
        document.getElementById('loader').style.opacity = '0';
      }
    }

    loadMVT();
  </script>
</body>

</html>

Thanks!

Adri.

Issue Analytics

State:
Created 5 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

rochoacommented, Jan 10, 2019

@AdriSolid, we already fixed this issue. Also, the fix will get into the next release. You can track the release status at https://github.com/CartoDB/carto-vl/issues/1205. Meanwhile, you can use the master branch to get the fix.

Thanks for reporting this problem! 🤗

1reaction

rochoacommented, Jan 8, 2019

We already detected what’s the problem with the original issue. Internally we store everything with numeric values and we transform to the proper value, in this case, a category, at the API level.

However, the MVT source is not being properly configured to do that translation based on the metadata provided by the user: the mechanism we use to do that translation is not initialized at the right place.

We already have a solution for that, see https://github.com/CartoDB/carto-vl/pull/1222, but that requires more internal changes to avoid some circular structures, for that we also have a proposal (https://github.com/CartoDB/carto-vl/pull/1223).

I don’t know if we are gonna be able to merge this fixes before the next release of CARTO VL—which is almost ready. If that’s the case and you need those fixes, you will have to use a version based on the master branch until we release another version of CARTO VL., the following release should happen at the end of February.