What is the process for converting x and y coordinates to align with a fixed display?

When I make an API call, I am receiving X and Y coordinates in the following format:

x: "-0.0120956897735595703"
y: "0.147876381874084473"

To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" properties are set to the X and Y values using the code 

style={{left: player.x, top: player.y}}
. However, it seems like the numbers are too small to render properly. Currently, all the images are appearing in the top left corner due to the minuscule x and y coordinates.

https://i.sstatic.net/Kdqfn.jpg

I'm wondering what type of coordinates these are in my API call and how I can convert them into CSS-friendly values for "Top" and "Left" so that they are accurately displayed on my minimap.

Here is the component code for reference:

const Minimap = (props) => {
  const { players } = props.data.data
  return (
      <div style={mapStyle} className="realMinimapContainer">
      {players.map(player => {
        const heroName = localizedList[player.hero_id].replace('npc_dota_hero_', '');
        return (
          <img
          style={{left: player.x, top: player.y}}
          className="mapIcon" src={
            player.hero_id === 126 || player.hero_id === 128 ?
            newHeroes[player.hero_id] :
            `http://cdn.dota2.com/apps/dota2/images/heroes/${heroName}_icon.png`
      }></img>
        )
      })}
      </div>
  )
}

Following the advice of @FelipeMateusMalara, I made some adjustments but the images still seem a bit off.

You can see where the images should be positioned in relation to the red arrow I drew below:

https://i.sstatic.net/M9pcN.png

javascripthtmlcssreactjsmath

Answer №1

After analyzing the data received from the API call, it appears that the coordinates are in a normalized form ranging from -1 to 1. The negative x coordinate values indicate their placement within this range. It seems that the API's coordinate system has its origin at the center while your display's coordinate system originates at the top left corner. To properly align the coordinates with your display, you will need to adjust them by multiplying with the size of your display and shifting them according to your display's origin:

player.x = (API.x + 1) * display.width
player.y = (API.y + 1) * display.height

Answer №2

If you take those numbers and increase each by 50 after multiplying them by 100, you will accurately position them on the map. The result of the x expression should be applied to the left css directive, while the result of the y expression should be set as the bottom css directive, both in percentage.

Why is this approach effective?

This method works because the point of origin for these directives is at the 50% mark rather than at 0%. Therefore, converting the values into percentages (by multiplying by 100) and adding the missing 50% will ensure the correct positioning.

Answer №3

It is difficult to determine the exact meaning of the numbers presented without more context. It seems possible that these numbers represent changes in values rather than fixed positions, especially considering one number is negative. To gain further insight, it may be helpful to inspect the debugger tools you are using to see if there are additional x/y coordinates available. Alternatively, you could continuously update a global variable with these delta values, although this may not align with your desired approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Testing Form with Select using Ant Design components and React Testing Library

I'm having trouble testing a customized Select input within an Ant Design Form that is pre-filled with initial values. The test is failing because the Select component is not receiving a value. What would be the best approach to properly test this "cu ...

reactjsantdreact-testing-library

Creating a nested observable in Angular2: A step-by-step guide

Currently, I am exploring a new approach in my Angular2 service that involves using observables. The data source for this service will initially be local storage and later updated when an HTTP call to a database returns. To achieve this dynamic updating of ...

javascripttypescriptangularrxjs

What is the best method to ensure that an image remains at the bottom of a div even as the div's height adjusts?

In my current project, I am facing a challenge with positioning an image in the bottom-right corner of a dynamically changing div. Initially, this is easily achieved by using CSS selectors: #div1 { position: relative; } #div1 img { position: abso ...

jquerycsspositioning

Styling a header using CSS

I successfully coded a header and navigation bar, but I am struggling with setting up elements like "Contact me" properly. My goal is to separate them, add icons, and align the text to the right. I am using Bootstrap 4, but nothing seems to be working, n ...

htmlcssbootstrap-4

Is it possible to incorporate a <div> element within a PHP code?

After successfully writing some PHP/SQL code, I encountered an issue when trying to create a new div called "content" along with applying a CSS class. The recommended approach was suggested as follows: $mydiv = '<div name="content">'; $myn ...

phphtmlinclude

Fixed MenuItem from Material UI

Is there a way to add a fixed MenuItem to Menu? I want to use one of the MenuItems as a header. If there are other solutions, I am willing to give them a try as well. Here's how the structure looks like: <Menu> <MenuItem className={class ...

reactjsmaterial-ui

Utilizing long polling technique with jQuery/AJAX on the server end

Currently, I am facing an issue with long polling on a single page that contains multiple pages. The problem arises when a new request is made while a previous request is still processing. Even though I attempt to abort the previous request, it completes b ...

phpjavascriptjqueryajax

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

htmlgoogle-chromeinput

Executing a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

javascriptmysqlnode.jsexpressknex.js

There was a Runtime Error that occurred, stating a TypeError: It is not possible to access properties of an undefined value (specifically

I've encountered an issue with a donut chart implemented from react-apex charts. Every time I try to render the page containing the chart, an error occurs. However, if I make changes to a property of the chart, it renders without any errors on the fro ...

reactjstypescriptnext.jsfrontendreact-apexcharts

How come the styles in my CSS file aren't being applied to my images based on their class or ID?

When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine. <--JavaScript- ...

javascripthtmlcssreactjs

Move the menu position in Bootstrap 4 navbar

<div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Hidden content</h5> <span class="text-muted">Toggleable via the ...

htmlcssbootstrap-4

Can WebSocket messages be encoded?

Is there a way to encrypt or obscure the data I transmit via websockets? For example, the message looks like this: var encryptedMsg = { type: "message", data: { message: "Hello world!" } } I require the ability to send this message in ...

javascriptnode.jswebsocket

The AudioPlayerStatus module in Discord JS is a powerful tool for managing

Could you explain why this code snippet: client.player.once(AudioPlayerStatus.Idle, () => { console.log(client.playlist); next.run(message, args, client); client.playlist.shift(); return; }); is b ...

javascriptnode.jsdiscord.js

Encountered an error 'Unexpected token ;' while attempting to include a PHP variable in a jQuery AJAX call

Trying to execute a PHP script that updates a deleted field in the database when you drag a specific text element to a droppable area. Currently, here is the droppable area code: <div class="dropbin" id="dropbin" > <span class="fa fa-trash-o ...

javascriptphpjqueryhtmlajax

Using Vue.js, send information from an Ajax request to a Laravel controller for processing

As someone new to development, I have a little confusion with handling data from a multi-step form in an AJAX request on my controller. While I've been able to successfully collect all form inputs at once, I'm struggling to use the data from $req ...

javascriptvue.jsaxios

Leveraging symbols as object key type in TypeScript

I am attempting to create an object with a symbol as the key type, following MDN's guidance: A symbol value may be used as an identifier for object properties [...] However, when trying to use it as the key property type: type obj = { [key: s ...

javascripttypescripttypessymbols

My Next.js application is successfully making Axios API calls to my localhost while running on the server-side

In my Next.js and React application, I am utilizing the axios library. Initially, I was able to successfully call the API from the server using getStaticProps() and render the initial data properly. However, when attempting to fetch more data from the clie ...

javascriptreactjsaxiosnext.js

Issue with generating random cells in a table using a loop

Within my HTML code, I have a table constructed using the table element. To achieve the goal of randomly selecting specific cells from this table, I implemented a JavaScript function that utilizes a for loop for iteration purposes. Despite setting the loop ...

javascripthtml

Tips for disentangling code from types in Typescript

Instead of intertwining code and types like the example below: const compar8 : boolean | error = (action: string, n: number) => { switch(action) { case 'greater': return n > 8; case 'less': ...

javascripttypescripttypestypescript-typingstranspiler