All Apps and Add-ons
Highlighted

Cannot Render Custom Splunk Map Visualization, using Mapbox Map Style

New Member

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.

0 Karma
Highlighted

Re: Cannot Render Custom Splunk Map Visualization, using Mapbox Map Style

New Member

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?

0 Karma
Highlighted

Re: Cannot Render Custom Splunk Map Visualization, using Mapbox Map Style

New Member

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'
0 Karma