RAMP map instance initialization

[AleksueiR]

Currently, the main way to create a RAMP instance on a page is to include a is="rv-map" node somewhere on the page, before the main RAMP script is loaded:

<div is="rv-map" style="height: 100%; display:flex;" rv-langs='["en-CA", "fr-CA"]'></div>
<script src="/js/rv-main.js"></script>

As the script loads, it searches the page for is="rv-map" elements and turns them into map instances. Alternatively (I think), you can create a map instance through the RAMP API.

Do we want to keep this auto-initialization behaviour or explicitly require the page to initialize all RAMP instances manually through the API?

Dropping auto-initialization has some benefits:

• less code for us to write--no need for the logic to find these elements
• more consistency--RAMP instances are always created through the API no matter what
• greater flexibility--markup can be included on the page upfront, but initialized later

This might look something like:

<div id="map"></div>

<script src="https://azure.cdn.ramp/4.2/rv-main.js"></script>
<script>
    var map = ramp.Map(document.getElementById('map'), {
        // inline config or config file url
    });
</script>

This works, but the script initializing a RAMP instance needs to be included after the script tag loading the main RAMP file. This can be annoying in some cases, especially when webpack injection is used as it will often injects script tags at the very bottom of the file, breaking the above order.

To avoid manually waiting for the script to load like this:

<script>
var intervalHandle = window.setInterval(() => {
    if (window.ramp) {
        window.clearInterval(intervalHandle);
        ramp.Map(document.getElementById('map'), { ... });
    }
}, 1000);
</script>

the main RAMP script can automatically call a specific global function (rampOnLoad for example) after loading, if it's available. This function, in turn, can initialize RAMP instances as it pleases:

<div id="map"></div>
<script>
    function rampOnLoad() {
        var map = ramp.Map(document.getElementById('map'), {
            // inline config or config file url
        });
    }
</script>
<script src="https://azure.cdn.ramp/4.2/rv-main.js"></script>

This callback function needs to be defined before the main RAMP script is loaded, but this seems to be more easily managed than the reverse.

What do you think?

Further questions

• how to provide a map config (inline, file url, both)?
• how to provided map configs for multiple languages?

[james-rae]

Done, and some parts undoned by #393