{"id":228,"date":"2026-03-10T14:55:55","date_gmt":"2026-03-10T14:55:55","guid":{"rendered":"https:\/\/georgesilvio.ro\/index.php\/dimensiunea-reala-a-tarilor\/"},"modified":"2026-03-10T14:55:55","modified_gmt":"2026-03-10T14:55:55","slug":"dimensiunea-reala-a-tarilor","status":"publish","type":"page","link":"https:\/\/georgesilvio.ro\/index.php\/dimensiunea-reala-a-tarilor\/","title":{"rendered":"Dimensiunea reala a tarilor"},"content":{"rendered":"<div class=\"gs-toy-inline\" data-gs-toy-id=\"227\">\n  <div id=\"app\">\n    <aside class=\"panel\">\n      <div class=\"inner\">\n        <div class=\"hero\">\n          <h1>True Size Country Overlay Map<\/h1>\n          <p class=\"small\">\n            Search a country, spawn one or more draggable ghost outlines, and compare how Mercator changes apparent size across latitudes.\n          <\/p>\n        <\/div>\n\n        <section class=\"box\">\n          <div class=\"section-head\">\n            <h2>Add country ghost<\/h2>\n            <span class=\"badge\" id=\"ghostCountBadge\">0 ghosts<\/span>\n          <\/div>\n\n          <div class=\"controls\">\n            <input id=\"countrySearch\" list=\"countryList\" placeholder=\"Search a country...\" autocomplete=\"off\" \/>\n            <datalist id=\"countryList\"><\/datalist>\n\n            <div class=\"row\">\n              <button id=\"addGhostBtn\">Add ghost<\/button>\n              <button id=\"fitWorldBtn\" class=\"secondary\">Reset world<\/button>\n            <\/div>\n\n            <div class=\"row\">\n              <button id=\"clearGhostBtn\" class=\"secondary\">Clear all<\/button>\n              <button id=\"focusSelectedBtn\" class=\"secondary\">Focus selected<\/button>\n            <\/div>\n\n            <div class=\"stack\">\n              <div class=\"section-head\" style=\"margin-bottom:0\">\n                <label for=\"opacityRange\" class=\"small muted\">Selected ghost opacity<\/label>\n                <span class=\"tiny muted\" id=\"opacityValue\">35%<\/span>\n              <\/div>\n              <input id=\"opacityRange\" type=\"range\" min=\"0.1\" max=\"0.9\" step=\"0.05\" value=\"0.35\" \/>\n            <\/div>\n\n            <div class=\"status\" id=\"statusBox\">Loading country boundaries and metadata\u2026<\/div>\n          <\/div>\n        <\/section>\n\n        <section class=\"box\">\n          <div class=\"section-head\">\n            <h2>Active ghosts<\/h2>\n            <span class=\"tiny muted\">Click one to select<\/span>\n          <\/div>\n          <div id=\"ghostList\" class=\"ghost-list\"><\/div>\n        <\/section>\n\n        <section class=\"box\">\n          <div class=\"section-head\">\n            <h2>How it works<\/h2>\n          <\/div>\n          <div class=\"helper\">\n            <span class=\"pill\"><span class=\"dot\" style=\"background:#60a5fa\"><\/span>Base countries<\/span>\n            <span class=\"pill\"><span class=\"dot\" style=\"background:#22c55e\"><\/span>Selected base<\/span>\n            <span class=\"pill\"><span class=\"dot\" style=\"background:#8b5cf6\"><\/span>Ghost overlays<\/span>\n          <\/div>\n          <p class=\"small\" style=\"margin-top:10px\">\n            Mercator scale compensation uses <span class=\"mono\">cos(\u03c6\u2080) \/ cos(\u03c6\u2081)<\/span>, where\n            <span class=\"mono\">\u03c6\u2080<\/span> is the country\u2019s original centroid latitude and\n            <span class=\"mono\">\u03c6\u2081<\/span> is the ghost\u2019s current latitude.\n          <\/p>\n          <p class=\"footer-note\" style=\"margin-top:10px\">\n            Live browser sources: Natural Earth country boundaries via geo-countries, REST Countries for area and population, OpenStreetMap tiles, Leaflet, and Turf.js.\n          <\/p>\n        <\/section>\n      <\/div>\n    <\/aside>\n\n    <main class=\"map-wrap\">\n      <div id=\"map\"><\/div>\n      <div class=\"map-overlay\">\n        <div class=\"map-chip\" id=\"floatingReadout\">\n          <div><strong>No ghost selected.<\/strong><\/div>\n          <div class=\"small\">Add a country and drag the outline around the map.<\/div>\n        <\/div>\n\n        <div class=\"map-toolbar\">\n          <button id=\"removeSelectedBtn\" class=\"secondary\">Remove selected<\/button>\n        <\/div>\n      <\/div>\n    <\/main>\n\n    <aside class=\"panel right\">\n      <div class=\"inner\">\n        <section class=\"card\">\n          <div class=\"section-head\">\n            <h2>Selected ghost<\/h2>\n            <span class=\"badge\" id=\"selectedGhostBadge\">None<\/span>\n          <\/div>\n\n          <div id=\"selectedGhostEmpty\">\n            <h3>Nothing selected<\/h3>\n            <p class=\"small\">Add one or more ghosts, then select one from the map or the list on the left.<\/p>\n          <\/div>\n\n          <div id=\"selectedGhostBox\" class=\"hidden\">\n            <h3 id=\"ghostCountryName\">Ghost Country<\/h3>\n            <p class=\"small\" id=\"ghostCountrySub\">Selected country<\/p>\n\n            <div class=\"stat-grid\">\n              <div class=\"kpi\">\n                <div class=\"label\">Area<\/div>\n                <div class=\"value\" id=\"ghostArea\">\u2014<\/div>\n                <div class=\"sub\" id=\"ghostAreaPct\">\u2014<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Population<\/div>\n                <div class=\"value\" id=\"ghostPop\">\u2014<\/div>\n                <div class=\"sub\" id=\"ghostPopPct\">\u2014<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Density<\/div>\n                <div class=\"value\" id=\"ghostDensity\">\u2014<\/div>\n                <div class=\"sub\" id=\"ghostDensityPct\">\u2014<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Scale factor<\/div>\n                <div class=\"value\" id=\"ghostScale\">\u2014<\/div>\n                <div class=\"sub\" id=\"ghostScaleSub\">Mercator corrected<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/section>\n\n        <section class=\"card\">\n          <div class=\"section-head\">\n            <h2>Overlap comparison<\/h2>\n            <span class=\"badge\" id=\"comparisonBadge\">Waiting<\/span>\n          <\/div>\n\n          <div id=\"emptyState\">\n            <h3>No overlap yet<\/h3>\n            <p class=\"small\">Move the selected ghost on top of another country to compare area, population, density, and footprint percentages.<\/p>\n          <\/div>\n\n          <div id=\"comparisonBox\" class=\"hidden\">\n            <h3 id=\"targetCountryName\">Target Country<\/h3>\n            <p class=\"small\" id=\"targetCountrySub\">Country under the ghost<\/p>\n\n            <div class=\"stat-grid\">\n              <div class=\"kpi\">\n                <div class=\"label\">Area<\/div>\n                <div class=\"value\" id=\"targetArea\">\u2014<\/div>\n                <div class=\"sub\" id=\"targetAreaPct\">Baseline 100%<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Population<\/div>\n                <div class=\"value\" id=\"targetPop\">\u2014<\/div>\n                <div class=\"sub\" id=\"targetPopPct\">Baseline 100%<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Density<\/div>\n                <div class=\"value\" id=\"targetDensity\">\u2014<\/div>\n                <div class=\"sub\" id=\"targetDensityPct\">Baseline 100%<\/div>\n              <\/div>\n              <div class=\"kpi\">\n                <div class=\"label\">Footprint overlap<\/div>\n                <div class=\"value\" id=\"overlapArea\">\u2014<\/div>\n                <div class=\"sub\" id=\"overlapPct\">\u2014<\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"comparison-list\" id=\"comparisonLines\"><\/div>\n          <\/div>\n        <\/section>\n      <\/div>\n    <\/aside>\n  <\/div>\n\n  <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-228","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":0,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages\/228\/revisions"}],"wp:attachment":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/media?parent=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}