UNBiodiversityLab - WDPA Carto 400 Bad Request

[scabecks]

Expected Behavior

WDPA view should load

Current Behavior

WPDA view does not show; console shows that 400 Bad Request is being returned from Carto data request

Possible Solution

URL change?

Steps to Reproduce

1. Try to add WDPA layer in UNBioLab - also occurs in mvp.app.mapx.org

Detailed Description

NA

[fxi]

@thomaspiller that's for you. We have to make sure to use an official endpoint for those tiles. The solution I've found was a hack to demonstrate that we can use cartodb mvt tiles in MapX. Not sure if you used the same for this view too. Thanks @scabecks for reporting this. By the way, if you know the official public endoint for mvt, you can give it to @thomaspiller.

[thomaspiller]

I had a look at the API documentation and couldn't find information about the mvt tiles. @antobenve is in touch with someone working at WCMC who could clarify the situation.

[fxi]

I've had a quick look in the doc, and first page, we got this:

https://carto.com/docs/carto-engine/maps-api/quickstart/

@thomaspiller, I wrote an example ( using fetch and promises, because reasons ). You can try to use the result ( templateUrl ) to fetch the URL endpoint. But first, maybe you can have a look on how configure multiple endpoint in mapbox gl sources using carto subdomains, and then look at the output of the command (data). Example of output after the command.

var config = {
  "version": "1.3.1",
  "layers": [{
    "type": "cartodb",
    "options": {
      "cartocss_version": "2.1.1",
      "cartocss": "#layer { polygon-fill: #FFF; }",
      "sql": "SELECT the_geom, the_geom_webmercator, wdpaid, marine FROM wdpa_point UNION ALL SELECT the_geom, the_geom_webmercator, wdpaid, marine FROM wdpa_poly"
    }
  }]
}

function postData(url,data){
    return fetch(url, {
        method: "POST", 
        mode: "cors", 
        cache: "no-cache",
        credentials: "same-origin", 
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        redirect: "follow", 
        referrer: "no-referrer", 
        body: JSON.stringify(data), 
    })
    .then(response => response.json()) 
    .catch(error => console.error(`Fetch Error =\n`, error));
};

postData(`https://carbon-tool.carto.com/api/v1/map`, config)
  .then(data => {
var templateUrl = 'https://carbon-tool.carto.com/api/v1/map/' + data.layergroupid + '/{z}/{x}/{y}.mvt'
    console.log(templateUrl);
}) 
  .catch(error => console.error(error));

output of the command (without using the template):

{
  "layergroupid": "552fb65b3e3e24d1659db0afef296bf4:1530502789289",
  "metadata": {
    "layers": [
      {
        "type": "mapnik",
        "id": "layer0",
        "meta": {
          "cartocss": "#layer { polygon-fill: #FFF; }",
          "stats": {
            "estimatedFeatureCount": 237334
          },
          "cartocss_meta": {
            "rules": []
          }
        },
        "tilejson": {
          "vector": {
            "tilejson": "2.2.0",
            "tiles": [
              "https://cartocdn-gusc-a.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.mvt",
              "https://cartocdn-gusc-b.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.mvt",
              "https://cartocdn-gusc-c.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.mvt",
              "https://cartocdn-gusc-d.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.mvt"
            ]
          },
          "raster": {
            "tilejson": "2.2.0",
            "tiles": [
              "https://cartocdn-gusc-a.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.png",
              "https://cartocdn-gusc-b.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.png",
              "https://cartocdn-gusc-c.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.png",
              "https://cartocdn-gusc-d.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/layer0/{z}/{x}/{y}.png"
            ]
          }
        }
      }
    ],
    "dataviews": {},
    "analyses": [],
    "tilejson": {
      "vector": {
        "tilejson": "2.2.0",
        "tiles": [
          "https://cartocdn-gusc-a.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.mvt",
          "https://cartocdn-gusc-b.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.mvt",
          "https://cartocdn-gusc-c.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.mvt",
          "https://cartocdn-gusc-d.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.mvt"
        ]
      },
      "raster": {
        "tilejson": "2.2.0",
        "tiles": [
          "https://cartocdn-gusc-a.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.png",
          "https://cartocdn-gusc-b.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.png",
          "https://cartocdn-gusc-c.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.png",
          "https://cartocdn-gusc-d.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.png"
        ]
      }
    },
    "url": {
      "vector": {
        "urlTemplate": "https://cartocdn-gusc-{s}.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.mvt",
        "subdomains": [
          "a",
          "b",
          "c",
          "d"
        ]
      },
      "raster": {
        "urlTemplate": "https://cartocdn-gusc-{s}.global.ssl.fastly.net/carbon-tool/api/v1/map/552fb65b3e3e24d1659db0afef296bf4:1530502789289/{z}/{x}/{y}.png",
        "subdomains": [
          "a",
          "b",
          "c",
          "d"
        ]
      }
    }
  },
  "cdn_url": {
    "templates": {
      "http": {
        "subdomains": [
          "0",
          "1",
          "2",
          "3"
        ],
        "url": "http://{s}.gusc.cartocdn.com"
      },
      "https": {
        "subdomains": [
          "a",
          "b",
          "c",
          "d"
        ],
        "url": "https://cartocdn-gusc-{s}.global.ssl.fastly.net"
      }
    },
    "http": "gusc.cartocdn.com",
    "https": "cartocdn-gusc.global.ssl.fastly.net"
  },
  "last_updated": "2018-07-02T03:39:49.289Z"
}

[scabecks]

Digging further within the console, the error being thrown is with the map configuration token, with the following message:

{"errors":["Invalid or nonexistent map configuration token '79cadcbe341067462b709f50c3bd0424'"],"errors_with_context":[{"type":"unknown","message":"Invalid or nonexistent map configuration token '79cadcbe341067462b709f50c3bd0424'"}]} <

[fxi]

@scabecks Thanks. I've wrote the correct way of getting the mvt endpoint. @thomaspiller is currently checking if the endpoint is permanent or temporary. If it's temporary, the code in my last post should be run each time, when the user click on a view. It's assigned to @thomaspiller, but if it's urgent, I can do it.

[thomaspiller]

I have incorporated the code above into that of the view. For now everything works. @scabecks If you get an error message again, let us know.

[thomaspiller]

No issues reported for a week. "400 Bad request" problem fixed.