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}}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: