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.
This is probably what you want:
const newMarkerCoords = markerCoords.map(item => {return {topLeftX:item.topLeftX*x, topLeftY:item.topLeftY*x};})
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);I think this is the problem with your code:
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 }];
let newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => {
return {topLeftY: topLeftY * 2, topLeftX: topLeftX * 2}
});
console.log(newMarkerCoords);You were not returning correctly from the map function the curly braces make the body of the function but were not returning anything.
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 }];
let newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => Object.assign({}, {topLeftY: topLeftY * 2, topLeftX: topLeftX * 2}));
console.log(newMarkerCoords);You can do something like it.