Large variable in backend causes a Bad Gateway

Ask the community
,
1

Hi,

I am building a Wix website and I want to use a leafletjs map inside.
The map will represents the French departments delimited with polygons as in the example below.


To do this, I need to use a “large” GeoJson file (3.79 MB) in which each department contains between 1000 and 2000 coordinates and there are 96 departments.

To use it in Wix, I need to create a HTML element and communicate with it through the backend, the JS page code and the
$w(“#html1”).postMessage method.

Let’s move on to the code.

departments.jsw

var departmentsData = {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [[[4.78021, 46.17668], [4.78024, 46.18905][....]{"code": "01", "nom": "Ain"}}, {...}; // very large

export function getDepartments() {
    return departmentsData;
}

Code for my Page

import {getDepartments} from 'backend/departments';

$w.onReady(function () {
    getDepartments().then((departments) => {
        console.log("send departments");
        $w("#html1").postMessage(departments);
    });
 });

Code for the HTML element #html1 (shortened here)

 <html>
 window.onmessage =
        function(event) {

            if (event.data) {
                console.log(event.data);
        };
<html>

This is causing a

Uncaught (in promise) Error: Bad Gateway
 at s (wixCodeNamespacesAndElementorySupport.min.js:4)
 at XMLHttpRequest.n.onreadystatechange (wixCodeNamespacesAndElementorySupport.min.js:4)
 at XMLHttpRequest.o (raven.js:375)

I tested the same code with the French regions (4 times smaller) and the code works (the HTML element receives the json).

So, is there a time or size limit to make the request? Is there a solution?

Thank you very much for any help you may have!

2

As I recall there is a size limit of the message payload that can be sent between page and HtmlComponent. You can split it up into pieces and send them one at a time. Maybe an array of pieces that you can just loop through and send.

3

The problem arises before sending the message to the HtmlComponent.
This occurs when using the method from the backend.

departments.jsw

import {getDepartments} from 'backend/departments';

$w.onReady(function () {
    getDepartments();
});

The error is thrown when the method getDepartements is called.

edit : correct typo

4

The spelling of the function in the call is not the same as the function.

You call it with this spelling:

import {getDepartements} from 'backend/departments';
getDepartements();

You define it with this spelling:

export function getDepartments() {
    return departmentsData;
}
5

@yisrael-wix I’m sorry, it’s just on the forum where I wrote wrong. It’s a typing error, in the real code it’s the same name.

6

@gabrielbellard (Next time, copy/paste to avoid confusion. :beers:)

You might be experiencing a timing issue. Using an HtmlComponent often requires a handshake between the page and the HtmlComponent to ensure that they’re both ready. You can see in our example how this might be done:

Multiple Markers in Google Maps

Embed Google Map on your site with multiple location markers , marker clustering, and custom controls using the HTML component.

Fullscreen with HTML Component

This example demonstrates the requestFullscreen method of the HTML fullscreen API as used to change a specified element to full screen.

Can’t say for sure that’s the problem. It might be a limitation. If that’s the case, send the data in pieces.