Cannot Render Custom Splunk Map Visualization, using Mapbox Map Style

[ays7abt]

Hi!

I have been trying to make a custom visualization app following the steps in the tutorial. I simply want a mapbox map to be displayed, irrespective of the search result at this moment. The updateView function for the moment looks as follows:

P.S: My problem is that the map does not get rendered. I have tried to manually enter a json object as the map style as well.

updateView: function (data, config) {
// Draw something here

      var map = new Mbx.Map({

        container: this.el.id,
        center: [-122.420679, 37.772537],
        zoom: 1,
        style: 'mapbox://styles/mapbox/streets-v9'

      })
    }

I have tried logging this.el.id. I do get the correct container. This is how I have included mapbox.

const Mbx = require('../node_modules/mapbox-gl')

I would like to have an idea about whether the webpack.config.js file needs further modification (I am using the one from the tutorial). I have made the required modifications in the other files such as the visualizations.conf file.

I would appreciate any leads. Thank you.

[ays7abt]

Just to help anyone else who might be having a doubt about these kinds of errors...

The container parameter can actually take an HTMLElement instead of the div id as well. so just having the following inside updateView worked for me.

this.isInitializedDom = false
var map = new Mbx.Map({
container: this.el,

        zoom: 5,
        center: [10.34445, 45.7898],
        style: 'mapbox://styles/mapbox/streets-v9'

[ays7abt]

The map gets rendered. But quite surprisingly the map gets hidden behind the legend. Dragging the resizable tag down shows the map. Leaving the resizable tag again hides the map.

Any idea?