Custom Widget for mapbox

[#1]

Hi,

I was just throwing this out there to see if anybody had been able to successfully embed the mapbox js library inside a custom widget inside SAC?

I can load the library ok but when I instantiate the map through the constructor it fails to find the div which is defined at the beginning?

I was wondering if anybody had been able to successfully do this?

This is the Javascript I am using...

(function () {
    let template = document.createElement("template");
    template.innerHTML = `
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css">
        <style>
            #map { 
                    width: 100%;
                    height:100%;
                }
        </style>
        <div id='map'></div>
`;
    class Map extends HTMLElement {
        constructor() {
            super();
            this.appendChild(template.content.cloneNode(true));
            this._props = {};
            let that = this;
            mapboxgl.accessToken = "OUR MAPBOX TOKEN";
            that._map = new mapboxgl.Map({
                container: "map",
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-74.5, 40],
                zoom: 9
            });
        }
        onCustomWidgetBeforeUpdate(changedProperties) {
            this._props = { ...this._props, ...changedProperties };
        }
        onCustomWidgetAfterUpdate(changedProperties) {
        }
    }

    let scriptSrc = "https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js";
    let onScriptLoaded = function () {
        customElements.define("com-test-map", Map);
    }

    let customElementScripts = window.sessionStorage.getItem("customElementScripts") || [];
    let scriptStatus = customElementScripts.find(function (element) {
       return element.src == scriptSrc;
    });

    if (scriptStatus) {
        if (scriptStatus.status == "ready") {
            onScriptLoaded();
        } else {
            scriptStatus.callbacks.push(onScriptLoaded);
        }
    } else {
        let scriptObject = {
            "src": scriptSrc,
            "status": "loading",
            "callbacks": [onScriptLoaded]
        }

        customElementScripts.push(scriptObject);
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = scriptSrc;
        script.onload = function () {
            scriptObject.status = "ready";
            scriptObject.callbacks.forEach((callbackFn) => callbackFn.call());
        };
        document.head.appendChild(script);
       }
})();

[andrewbarlow1]

Thanks for this Bob - I did initially try a document.getElementById("map") which returned a null inside the constructor so that rings true.

I had a look at the doc but I could do with an example of where and how to implement connectedCallback if possible?