# Change map type at click button

**URL:** <https://community.thunkable.com/t/change-map-type-at-click-button/802360>\
**Category:** Questions about Thunkable X\
**Created:** [September 8, 2020, 6:33pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360 "2020-09-08T18:33:37Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pedro\_Alcaide](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@Pedro\_Alcaide](https://community.thunkable.com/u/Pedro_Alcaide)\
**Post date:** [September 8, 2020, 6:33pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/1 "2020-09-08T18:33:37Z")

</div>

Is there a way to change the map type when a button is pressed?

In the blocks associated with the map component, the MapType option does not appear and the CustomMapStyleString option does not appear.

Any ideas ?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [September 9, 2020, 12:03pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/2 "2020-09-09T12:03:03Z")

</div>

You can only do what you have blocks for.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [September 9, 2020, 12:17pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/3 "2020-09-09T12:17:18Z")

</div>

Have 2 maps in the same location. With button click make one disappear and the other appear?

---

<div class="post-metadata">

**Author:** ![Pedro\_Alcaide](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@Pedro\_Alcaide](https://community.thunkable.com/u/Pedro_Alcaide)\
**Post date:** [September 9, 2020, 3:02pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/4 "2020-09-09T15:02:00Z")

</div>

No. Only one map.

---

<div class="post-metadata">

**Author:** ![seth](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@seth](https://community.thunkable.com/u/seth)\
**Post date:** [September 9, 2020, 3:36pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/5 "2020-09-09T15:36:31Z")

</div>

You should do Jared’s suggestion.

---

<div class="post-metadata">

**Author:** ![DuMonster](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dumonster/32/81287_2.png) [@DuMonster](https://community.thunkable.com/u/DuMonster)\
**Post date:** [September 9, 2020, 6:46pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/6 "2020-09-09T18:46:28Z")

</div>

You could possibly gain the control you are wanting by using the web viewer along with some custom HTML and JavaScript. This is my preferred method when needing a map with highly customizable features

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [September 9, 2020, 7:10pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/7 "2020-09-09T19:10:05Z")

</div>

Could you demonstrate an example of this?

---

<div class="post-metadata">

**Author:** ![DuMonster](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dumonster/32/81287_2.png) [@DuMonster](https://community.thunkable.com/u/DuMonster)\
**Post date:** [September 9, 2020, 8:22pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/8 "2020-09-09T20:22:43Z")

</div>

![streets](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6d560f42743878c851687bdd962520c05bf60abf.png) ![grayscale](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/c/2c7f04436f0db8bcbe6b5a4fba64fd32f5c56dfc.png)

This code in this html is from an example of using a simple tutorial on layer controls from

> **[Leaflet — an open-source JavaScript library for interactive maps](https://leafletjs.com/)**
>
> Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

I didn’t use any blocks… Just created the .html file in Notepad. I did modify the styling in the html to use % instead of pixel to adjust the map to device width and height. Once you get the .html the way you want it you can upload the file in the “Files” area of the Project Designer tab. Then set the Web Viewer Component url to the name of the .html file you uploaded and that should be it. Here is the test project I used to create this

[https://x.thunkable.com/copy/47bd71796988c800485aaea2c318dee3](https://x.thunkable.com/copy/47bd71796988c800485aaea2c318dee3)

---

<div class="post-metadata">

**Author:** ![seth](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@seth](https://community.thunkable.com/u/seth)\
**Post date:** [September 9, 2020, 8:31pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/9 "2020-09-09T20:31:34Z")

</div>

My html files just show the code on the screen, what am I doing wrong?

---

<div class="post-metadata">

**Author:** ![DuMonster](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dumonster/32/81287_2.png) [@DuMonster](https://community.thunkable.com/u/DuMonster)\
**Post date:** [September 9, 2020, 8:34pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/10 "2020-09-09T20:34:24Z")

</div>

@seth Are you referring to the html file in the project I sent? or your own personal?

---

<div class="post-metadata">

**Author:** ![seth](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@seth](https://community.thunkable.com/u/seth)\
**Post date:** [September 9, 2020, 9:43pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/11 "2020-09-09T21:43:47Z")

</div>

My own.

---

<div class="post-metadata">

**Author:** ![DuMonster](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/dumonster/32/81287_2.png) [@DuMonster](https://community.thunkable.com/u/DuMonster)\
**Post date:** [September 9, 2020, 9:53pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/12 "2020-09-09T21:53:02Z")

</div>

If you don’t mind sharing I can attempt to help you troubleshoot the issue

---

<div class="post-metadata">

**Author:** ![seth](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@seth](https://community.thunkable.com/u/seth)\
**Post date:** [September 9, 2020, 10:17pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/13 "2020-09-09T22:17:33Z")

</div>

Sure I’ll have to do so privately as there are api keys in the file.  
I’ll message you tomorrow.

But I’ll post what we do here after. Many thanks

---

<div class="post-metadata">

**Author:** ![seth](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@seth](https://community.thunkable.com/u/seth)\
**Post date:** [September 11, 2020, 5:06pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/14 "2020-09-11T17:06:47Z")

</div>

The issue was that you need an active sub to Intercom for it to work. Doh haha!

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 12:24pm UTC](https://community.thunkable.com/t/change-map-type-at-click-button/802360/15 "2024-11-08T12:24:01Z")

</div>


