# Map icon with photo

**URL:** https://community.thunkable.com/t/map-icon-with-photo/2987458
**Category:** Questions about Thunkable X
**Tags:** icon
**Created:** [May 6, 2024, 11:06am UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458 "2024-05-06T11:06:09Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![wammytech](https://avatars.discourse-cdn.com/v4/letter/w/e8c25b/32.png) [@wammytech](https://community.thunkable.com/u/wammytech)
#### Post date: [May 6, 2024, 11:06am UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/1 "2024-05-06T11:06:09Z")

</div>

I’m looking for a way to automate the process to use the icon like the one below, searching for the photo in the database and setting the icon like this. I’m currently creating each image in the Canva app and adding it to the database, but with the demand increasing, it’s not You can create 1 by 1 of these images. Is there any way to automate this process?

 ![Captura de ecrã 2024-05-06 120527](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/f/efa4b121d0f861fdb89933ee7f5213820732c5ea.png)

---

<div class="post-metadata">

### Author: ![samir.henry3rz](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samir.henry3rz/32/176572_2.png) [@samir.henry3rz](https://community.thunkable.com/u/samir.henry3rz)
#### Post date: [May 6, 2024, 1:56pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/2 "2024-05-06T13:56:36Z")

</div>

You can create an app with a screen, which already has this frame, connected to a database table where each line has a new image and automatically add the images stored in the database within the frame. Inside the frame you insert an image component with the desired formatting.

---

<div class="post-metadata">

### Author: ![wammytech](https://avatars.discourse-cdn.com/v4/letter/w/e8c25b/32.png) [@wammytech](https://community.thunkable.com/u/wammytech)
#### Post date: [May 6, 2024, 2:06pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/3 "2024-05-06T14:06:05Z")

</div>

Do you have an example to show how to do this?

---

<div class="post-metadata">

### Author: ![samir.henry3rz](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/samir.henry3rz/32/176572_2.png) [@samir.henry3rz](https://community.thunkable.com/u/samir.henry3rz)
#### Post date: [May 6, 2024, 2:22pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/5 "2024-05-06T14:22:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/9/c977a5d3951d3c933789bd266d6beaf7bb949338.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9eb018fabc11aa8bbbe8a17a7c84e494fd5deed3.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/de00eb83d65bd1e78e35791bd71f0060c3ab2e93.png)

A simple example of a random image generator

---

<div class="post-metadata">

### Author: ![wammytech](https://avatars.discourse-cdn.com/v4/letter/w/e8c25b/32.png) [@wammytech](https://community.thunkable.com/u/wammytech)
#### Post date: [May 7, 2024, 3:29pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/6 "2024-05-07T15:29:34Z")

</div>

Sorry, I didn’t inform you that this icon would be used as a markeicon on maps. Is there any way to create these images when calling the database?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [May 7, 2024, 5:47pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/7 "2024-05-07T17:47:17Z")

</div>

You could probably automate the cropping inside the outline image using Cloudinary transformations described on this page: [Apply Overlay and Underlay Transformations | Cloudinary](https://cloudinary.com/documentation/layers).

And since Cloudinary transformations only require a custom url, they are easy to build in Thunkable using the Join block in the Text drawer. You would then set the `icon` value to the url.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/80b299e1f6a540a013dc1fb53219d5fa1a4860fe.png)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)
#### Post date: [August 5, 2024, 5:48pm UTC](https://community.thunkable.com/t/map-icon-with-photo/2987458/8 "2024-08-05T17:48:04Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.