Mapbox instance variable

HI all,

I am trying to access the Mapbox instance variable so I can add a navigation control.

Can someone please provide an example of how to access the Mapbox instance - in a workflow preferably in a Javascript action or formula.

Thanks in advance

Hey @Wayne !
When you drop a Mapbox instance, a new variable containing the instance is created under Variable/Elements. It is usable like a regular variable!

Thanks for your reply. I can locate it but I can;t seem to use it to get any data from. Have tried calling it in a formula and customer JS script action - just can’t seem to instantiate it and get data out of it.

Any ideas ?

Thanks

Wayne

You can use mabox method on a specific instance like this:

variables[…] being the Mapbox instance.

Hi,

Did you actually get the function working ?

I tried the exact function and got an error message saying function does not exist.

“TypeError”

message: “variables.048ad79d-6e41-47e8-8f5a-22c06a92f824-instance.flyto is not a function”

I have also been trying other functions and have got the same message. I wonder if all the methods are implemented/available - or is there something I wam doing wrong ???

I think you should be able to use pretty much all methods as the library is imported.
On that case, you forgot the uppercase .flyTo()

Thanks that fixed it.

I have started trying out the other methods and most of the ones I have tried work :slightly_smiling_face:

However stil having trouble adding a navigation control to the map. I have tried this code which was generated.

// Ensure Mapbox GL JS is initialized properly
if (typeof mapboxgl !== ‘undefined’) {
// Get the instance of Mapbox from variables collection using the provided key
const mapboxInstance = variables[‘048ad79d-6e41-47e8-8f5a-22c06a92f824-instance’];

// Add navigation control to the Mapbox instance
mapboxInstance.addControl(new mapboxgl.NavigationControl());
} else {
console.error(‘mapboxgl is not defined. Make sure Mapbox GL JS is properly included.’);
}

return;

It executes successfully but does not add the control to the map.

Are you able to us a JS Custom scsript to successfully add a navigation control to the map and show me correct code ?

This would be a big help.

Thanks

I’ve modified your script a bit and this did the trick. I think we needed to redeclare the mapboxgl library to make it work. Otherwise, it was throwing me an error.

const mapboxgl = wwLib.wwPlugins.mapbox.mapboxgl;

// Ensure Mapbox GL JS is initialized properly
if (typeof mapboxgl !== undefined) {

    // Get the instance of Mapbox from variables collection using the provided key
    const mapboxInstance = variables[/* Mapbox - instance */ '5906601e-1ff2-4f5f-8798-7567a20fe6bb-instance']

    // Add navigation control to the Mapbox instance
    mapboxInstance.addControl(new mapboxgl.NavigationControl());

} else {

    console.error("mapboxgl is not defined. Make sure Mapbox GL JS is properly included.");

}

The compass button on the Navigation doesn’t seem to be working on my end though. If that’s not important, maybe you can hide it with parameters!

That worked well.

Thanks for the response.

1 Like