The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with displaying png on website
Aendoran
post Jan 30 2024, 12:42 PM
Post #1





Group: Members
Posts: 1
Joined: 30-January 24
Member No.: 29,122



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}`;

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 30 2024, 05:33 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,756
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 31 2024, 01:53 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,984
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Shouldn't it be 'store.features.properties.emoji' instead of 'store.properties.emoji'?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 31 2024, 06:49 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,984
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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'
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd October 2024 - 11:57 AM