JSFiddle - React, Tailwind, and code Playground

by datinc

HTML

<div id='x'></div>
<div id='y'></div>

JavaScript

event = {"name":"Slay the Shatterer","level":50,"map_id":20,"flags":["group_event"],"location":{"type":"sphere","center":[-10914,36746, -82],"radius":4402,"rotation":0}};
map = {"map_name":"Blazeridge Steppes","min_level":40,"max_level":50,"default_floor":1,"floors":[0,1,2],"region_id":2,"region_name":"Ascalon","continent_id":1,"continent_name":"Tyria","map_rect":[[-24576,-49152],[24576,49152]],"continent_rect":[[29184,12160],[31232,16256]]};

event_location = event['location'];
map_rect = map["map_rect"];
continent_rect = map["continent_rect"];

map_width = map_rect[1][0] - map_rect[0][0]; 
map_height = map_rect[1][1] - map_rect[0][1];

continent_width = continent_rect[1][0] - continent_rect[0][0]; 
continent_height = continent_rect[1][1] - continent_rect[0][1];

xMap = (event_location["center"][0] - map_rect[0][0])/map_width;
yMap = (event_location["center"][1] - map_rect[0][1] )/map_height;

xContinent = continent_rect[0][0] + xMap * continent_width;
yContinent = continent_rect[0][1] + yMap * continent_height;

$("#x").html(xContinent);
$("#y").html(yContinent);