How to multiply each value in an array of coordinates

May 27, 2022

I have an array of coordinates:

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

And I want to multiply each value by x, and map the new coordinates to a new similar array.
Like so:

const newMarkerCoords = markerCoords.map({topLeftX, topLeftY} => {topLeftX * x, topLeftY * x})

It is to place markers on the correct spots, when I scale the image map bigger.

>Solution :

You were pretty close, here’s a working sample of what you tried to do:

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

const x = 2;
    
newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => {return {topLeftY: topLeftY * x, topLeftX: topLeftX * x}})

console.log(newMarkerCoords);