# Mapbox instance variable

**URL:** <https://community.weweb.io/t/mapbox-instance-variable/9984>\
**Category:** Ask us anything\
**Created:** [July 28, 2024, 1:54pm UTC](https://community.weweb.io/t/mapbox-instance-variable/9984 "2024-07-28T13:54:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wayne](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@Wayne](https://community.weweb.io/u/Wayne)\
**Post date:** [July 28, 2024, 1:54pm UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/1 "2024-07-28T13:54:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 29, 2024, 9:20am UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/2 "2024-07-29T09:20:05Z")

</div>

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!

 ![CleanShot 2024-07-29 at 11.17.53](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/104078165c4c32e8b95595f58207243fa2a68135.png)

---

<div class="post-metadata">

**Author:** ![Wayne](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@Wayne](https://community.weweb.io/u/Wayne)\
**Post date:** [July 29, 2024, 10:54am UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/3 "2024-07-29T10:54:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 29, 2024, 1:01pm UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/4 "2024-07-29T13:01:00Z")

</div>

> [@Wayne](#):
>
> Any ideas ?
> 
> Thanks
> 
> Wayne

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

 ![CleanShot 2024-07-29 at 14.59.55](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d1e026b87a76afc0eca99d0a010be52994746c47.png)

variables[…] being the Mapbox instance.

---

<div class="post-metadata">

**Author:** ![Wayne](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@Wayne](https://community.weweb.io/u/Wayne)\
**Post date:** [July 29, 2024, 2:13pm UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/6 "2024-07-29T14:13:34Z")

</div>

Hi,

Did you actually get the function working ?

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/37a8ba563d672cbd1d4f63dd1113fa43df47e989.png)

“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 ???

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 29, 2024, 2:18pm UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/7 "2024-07-29T14:18:32Z")

</div>

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()

---

<div class="post-metadata">

**Author:** ![Wayne](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@Wayne](https://community.weweb.io/u/Wayne)\
**Post date:** [July 30, 2024, 12:51am UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/8 "2024-07-30T00:51:35Z")

</div>

Thanks that fixed it.

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

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

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 30, 2024, 6:34am UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/9 "2024-07-30T06:34:17Z")

</div>

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.

```auto
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!

---

<div class="post-metadata">

**Author:** ![Wayne](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@Wayne](https://community.weweb.io/u/Wayne)\
**Post date:** [July 31, 2024, 5:14am UTC](https://community.weweb.io/t/mapbox-instance-variable/9984/10 "2024-07-31T05:14:30Z")

</div>

That worked well.

Thanks for the response.