Help with displaying png on website Options

[Aendoran]

Hi there,

I have been working on a GitHub hosted page for my job, using this tutorial from Mapbox - https://docs.mapbox.com/help/tutorials/buil...-store-locator/ (I have very limited coding skills so this is way beyond my knowledge). On the left side of the store locator, there is a list of our stores that is clickable and directs the map to zoom in on the store location. I am trying to add emojis to each listing to easily describe what is available at a store (a quick visual indicator), but every time I try to add an image, the website fully breaks. My issue is that I can't just simply print out the emoji as the html code needs to variably print out three different emojis, based on what is available at each store. So each store has its own initialization and then the code later out just prints out the store properties.

I would love any and all help - thanks!


Here are some of the various codes that I wrote to try to get the emoji's to print:
1)

CODE

/*Creates the image using the image source*/
<div id="image">
        <img id="ConeEmoji" src="https://static.thenounproject.com/png/79716-200.png" width="5" height="5">
        </div>
.
.
.
/*Establishes the store properties that are later used to build the actual listing*/
const stores = {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': []
            },
            'properties': {
              'address': '',
              'productType': '',
              'storeName': '',
              'city': '',
              'postalCode': '',
              'state': '',
              'addresslink': '',
              'emoji' : 'ConeEmoji'
            }
          },
.
.
.
/*Creates the store listing*/
link.innerHTML = `${store.properties.emoji}`;

2)

CODE

const stores = {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': []
            },
            'properties': {
              'address': '',
              'productType': '',
              'storeName': '',
              'city': '',
              'postalCode': '',
              'state': '',
              'addresslink': '',
              'emoji' : 'https://static.thenounproject.com/png/79716-200.png'
            }
          },
.
.
.
/*Creates the store listing*/
link.innerHTML = `${store.properties.emoji}`;

[pandy]

Is what you show us an exact copy of what you have? If so I think you've written plain HTML in a JavaScript. That would break things. You can't mix'em.

[CharlesEF]

Shouldn't it be 'store.features.properties.emoji' instead of 'store.properties.emoji'?

[CharlesEF]

In case you're a real person I will suggest you change your stores layout. Currently, you posted 2 stores arrays. Both look exactly the same to me with 1 exception. In 1 array 'store.features.properties.emoji' will show the emoji name. The 2nd array will show the emoji path/url. The same 'store.features.properties.emoji' points to the same location but returns different information.

You should make emoji an array of objects. 1 object would contain the emoji 'name' and the 2nd object would contain the emoji 'path'. That way you only need 1 stores array. To get the emoji name you would use 'store.features.properties.emoji.name' and for the path you would use 'store.features.properties.emoji.path'

[abuislam]

You can try this approach to properly display the emoji images in your store listings:

Solution:
Instead of directly inserting the image URL as a string, modify your code to generate an <img> element dynamically.

Fix:
Modify how the emoji is stored and displayed:

javascript
Copy
Edit
const stores = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': []
},
'properties': {
'address': '',
'productType': '',
'storeName': '',
'city': '',
'postalCode': '',
'state': '',
'addresslink': '',
'emoji': '<img src="https://static.thenounproject.com/png/79716-200.png" width="20" height="20">'
}
}
]
};

// When creating the store listing
link.innerHTML = store.properties.emoji;
Explanation:
Instead of storing just the image URL, store the full <img> tag as a string inside emoji.
When setting innerHTML, it will render the image properly.