CORS error when requesting coverage vector tiles

Imagery, data, and integrations
1

Requesting a tile with curl works fine but when I try to add the tiles as a Leaflet layer, I get a CORS error (see below). Isn’t it the goal to integrate Mapillary data and visualization to other websites?

Access to fetch at 'https://tiles.mapillary.com/maps/vtp/mly1_computed_public/2/{z}/{x}/{y}?access_token=XXX' from origin 'XXX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
1 Like
2

I am also experiencing this issue (same error message) when trying to access https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=XXX

3

Thanks @vcoppe @connerleverett for reporting this issue. We’ll investigate it and get back to you shortly.

1 Like
4

So…three-and-a-half-years later…still getting this. Any update?

5

@nikola - do you know what this error represents?

6

@jswoveland Which URL are you using Mapillary tiles on? I think they can be used anywhere but @tao would know of any restrictions here.

7

Thanks for your response, @nikola, @tao.
I inherited the code @connerleverett (above) was working on. It believe he was trying to use the url, https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=XXX incorrectly.
The goal was to locate the mapillary image id for the image closest to a specific coordinate.
I have had some success using the graph API, to retrieve images within a bounding box:
https://graph.mapillary.com/images?access_token=${this.mapillaryKey}&bbox=${bbox}&limit=1
However this is not ideal.
Ideally I’d like to simply add a layer to my ArcGIS web map, that shows the locations of Mapillary imagery (like Mapillary). The user could then select a feature from that layer and open the Mapillary viewer to that location.

8

Have you tried one of our ArcGIS plugins from ArcGIS ?

9

Thanks @nikola. I have not, because I am not using one of the Esri web-map viewer apps. The integration I am working on is with the VertiGIS Studio Web Viewer (VSW). VSW provides an alternative to Esri’s Web AppBuilder and Experience Builder for building ArcGIS webmap-based mapping applications.
I know we have built wrappers for other Experience Builder widgets to load them in VSW, but I’m not seeing an ExB widget for Mapillary.

10

Maybe this example of using Mapillary map tiles and the image viewer could be helpful: Viewer From Map | MapillaryJS

11

Thanks again, @nikola. I looked at the code, and while there are some bits that will likely be helpful, the image markers on the mapbox map are hard-coded. My current plan is to retrieve these features using the Mapillary graph API, using the extent of the map as the bounding box. However, even better would be if I could simply add the https://tiles.mapillary.com/maps/vtp/mly1/ service to an arcgis webmap. I hope that makes sense.

12

OK, I think maybe this example could be useful: Add a third party vector tile source | Mapbox GL JS | Mapbox I recommend using the tiles for showing data on the map.

13

Thanks @nikola. I did try adding that layer to an ArcGIS Web Map using the AGOL Map Viewer. In the DevTools network tab I can see all the requests for tiles, which appear to be correct and successful, however the layer is not drawing on the map. I see in the sample you linked the symbology is being provided, so perhaps that’s why. I’ll try adding the layer using the ArcGIS Javascript API, which provides more options. This is promising. Cheers!

14

Hi again, @nikola, out of curiousity, I installed the Mapillary add-on for ArcGIS Pro created a map with the Mapillary coverage layer, and published this out as a WebMap. Interestingly, this brings me full-circle, in that when opening the webmap in Map Viewer, all the requests for tiles are getting CORS errors.

Here is the JSON for the Mapillary coverage layer in the webmap:

{
      "id": "6c29b3887b20488fae7b84e5751762bb",
      "title": "Mapillary Coverage",
      "visibility": true,
      "blendMode": "normal",
      "opacity": 1,
      "visibilityMode": "independent",
      "layers": [
        {
          "id": "8e71c4804bee47789a600a33aed1d67b",
          "title": "Public Mapillary Coverage",
          "visibility": true,
          "blendMode": "normal",
          "opacity": 1,
          "type": "VectorTileLayer",
          "styleUrl": "https://langanees.maps.arcgis.com/sharing/rest/content/items/de8e38bc3e214386ba903bdf3fdaea6d/resources/styles/root.json",
          "layerType": "VectorTileLayer"
        }
      ],
      "layerType": "GroupLayer"
    }

And here’s the CORS error:

Access to fetch at 'https://tiles.mapillary.com/maps/vtp/mly1_public/2/12/702/1635' from origin 'https://latitudegeo.maps.arcgis.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this errorAIdojo.js:64       
            
GET https://tiles.mapillary.com/maps/vtp/mly1_public/2/12/702/1635 net::ERR_FAILED 403 (Forbidden)
15

Thanks for letting us know, I’ll investigate with @tao.

1 Like
16

Thanks @nikola, I really appreciate all your attention on this matter.

17

We’ve updated the third-party tile API to always return * for the “access-control-allow-origin” header so this should hopefully fix the issue you’re facing. Please try them again and let us know.

1 Like