Network error[object ProgressEvent] during connection

[siloam]

Hello everybody

Tangram v0.20.1

I've got a strange connection error:

tangram.min.js?37b0:35 Tangram v0.20.1 [error]: Scene.load() failed to load "scene:\n background:\n color: '#ddeeee'\n\nsources:\n nextzen:\n type: MVT\n url: http://localhost/tiles/{z}/{x}/{y}\n max_zoom: 16\n\nlayers:\n landuse:\n data: { source: nextzen }\n draw:\n polygons:\n order: function() { return feature.sort_rank; }\n color: lightgreen\n\n water:\n data: { source: nextzen }\n draw:\n polygons:\n order: function() { return feature.sort_rank; }\n color: lightblue\n\n roads:\n data: { source: nextzen }\n filter:\n not: { kind: [path, rail, ferry] }\n draw:\n lines:\n order: function() { return feature.sort_rank; }\n color: [.6, .6, .6]\n width: [[0, 2px], [14, 2px], [16, 4px], [18, 6px]]\n outline:\n color: white\n width: [[14, 0px], [16, 1px]]\n order: 350\n\n buildings:\n data: { source: nextzen }\n draw:\n polygons:\n order: function() { return feature.sort_rank; }\n color: |\n function () {\n var h = feature.height || 20;\n h = Math.min((h + 50)/ 255, 1); // max brightness: 1\n h = Math.max(h, .4); // min brightness: .4\n h = (h - 0.4) * -1 + 1; // flip brightness\n return [h, h * 0.4, h * 0.7];\n }\n 3d-buildings:\n filter: { $zoom: { min: 15 } }\n draw:\n polygons:\n extrude: function () { return feature.height > 20 || $zoom >= 16; }\n\n places:\n data: { source: nextzen }\n filter: function() { return ($zoom >= feature.min_zoom && (feature.max_zoom == null || $zoom <= feature.max_zoom)); }\n draw:\n text:\n visible: global.labels\n priority: function() { return 1 - 1/feature.min_zoom; } # give higher priority to lower min_zoom\n repeat_distance: 512px # filter out duplicate place names\n text_source: name\n font:\n family: Helvetica\n fill: black\n size: |\n function() {\n if (feature.min_zoom == null) return 12;\n var p = feature.population_rank || 7;\n return Math.min(\n 12 + (p - 7) + Math.pow(1.5, Math.max($zoom - feature.min_zoom)),\n 24);\n }\n weight: bold\n": There was a network error[object ProgressEvent] Error: There was a network error[object ProgressEvent] at XMLHttpRequest.a.onerror (tangram.min.js?37b0:35)

ENVIRONMENT: WIndows 10, Chrome 84.0.4147.105

TO REPRODUCE THE ISSUE, FOLLOW THESE STEPS: I've used Tangram with pbf data from by my own tile server. The server works well with L.VectorGrid plugin. CORS headers are on

RESULT: The connection error as above.

EXPECTED RESULT: Connection established.

[bcamper]

The error looks like it's on the scene file itself. Is CORS enabled for that file, in addition to the tile data?

Could you please post the full request and response headers from the network tab of developer tools? And ideally also the scene file itself, though looks like a network error.

[siloam]

I don't think so. I've deleted all scene data except the url declaration and the error is the same. I am curious why Chrome Browser behaves differently in the case of Vectorgrid.

[bcamper]

Right, the issue would be if the scene YAML file itself did not have proper CORS headers. Examining the full list of request and response headers should make it clearer whether that's an issue or not.

[siloam]

This is how it looks like. Can it be the case of using raw-loader?

tangram.min.js?37b0:35 Tangram v0.20.1 [error]: Scene.load() failed to load "scene:\r\n    background:\r\n        color: '#ddeeee'\r\n\r\nsources:\r\n    custom:\r\n        type: MVT\r\n        url: http://localhost/tiles/{z}/{x}/{y}\r\n        max_zoom: 14": There was a network error[object ProgressEvent] Error: There was a network error[object ProgressEvent]
    at XMLHttpRequest.a.onerror (tangram.min.js?37b0:35)
Kr @ tangram.min.js?37b0:35
eval @ tangram.min.js?37b0:39
Promise.catch (async)
r.load @ tangram.min.js?37b0:39
onAdd @ tangram.min.js?37b0:39
_layerAdd @ leaflet-src.js?e11e:6617
whenReady @ leaflet-src.js?e11e:4477
addLayer @ leaflet-src.js?e11e:6679
addTo @ leaflet-src.js?e11e:6559
mounted @ TheContainer.vue?14cb:28
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3969
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ TheContainer.vue?8aa0:29
./src/views/TheMap/TheContainer.vue @ 31.js:146
__webpack_require__ @ app.js:854
hotApplyInternal @ app.js:750
hotApply @ app.js:412
(anonymous) @ app.js:387
Promise.then (async)
hotUpdateDownloaded @ app.js:386
hotAddUpdateChunk @ app.js:362
webpackHotUpdateCallback @ app.js:58
(anonymous) @ 31.59f4eeec8bec786d4ffd.hot-update.js:1

[bcamper]

By network headers I meant these, to see CORS-related info:

However, you may be correct about it being a loader issue... I don't use webpack much. It looks like it might be parsing the raw string contents of the file as the URL? If that's the case, you could either:

• provide a JSON object (not string) to as the scene parameter (like this example, which is inlined, but if you can use a loader to accomplish the same thing: https://github.com/tangrams/webpack-tangram-boilerplate/blob/master/main.js#L10).
• if you only have a string available for whatever reason, you could wrap it in a blob URL: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

[siloam]

Thank you for your tips. I've parsed Yaml string into JSON object. All is fine now. Anyway it should be fixed. Network error is quite misleading in this case .

[bcamper]

Glad you got it working 🎉 . The network error is because it looks like it was passing the full string content of the file where a URL is expected, and the log message prints the URL it tried to load. See my comments in gitter on potential for a JS callback-based tile source to support other storage formats like IndexedDB. PRs welcome ;)