{"id":7842,"date":"2025-03-24T13:43:30","date_gmt":"2025-03-24T13:43:30","guid":{"rendered":"https:\/\/spartstudio.co\/?page_id=7842"},"modified":"2025-03-24T15:14:44","modified_gmt":"2025-03-24T15:14:44","slug":"conty","status":"publish","type":"page","link":"https:\/\/spartstudio.co\/ar\/conty\/","title":{"rendered":"Elementor Page #7842"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"7842\" class=\"elementor elementor-7842\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c77a92a e-con-full e-flex e-con e-parent\" data-id=\"c77a92a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c95693 elementor-widget elementor-widget-html\" data-id=\"9c95693\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"globeViz\" style=\"width: 100%; height: auto;\"><\/div>\n\n<script>\n  const markerSvg = `<svg viewBox=\"-4 0 36 36\">\n    <path fill=\"currentColor\" d=\"M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z\"><\/path>\n    <circle fill=\"black\" cx=\"14\" cy=\"14\" r=\"7\"><\/circle>\n  <\/svg>`;\n\n  const riyadhLat = 24.7136;\n  const riyadhLng = 46.6753;\n\n  \/\/ Destination cities with coordinates and individual arc altitudes\n  const destinations = [\n    { name: \"Kuwait\", lat: 29.3759, lng: 47.9774, altitude: 0.05 },\n    { name: \"Doha\", lat: 25.276987, lng: 51.520008, altitude: 0.05 },\n    { name: \"Cairo\", lat: 30.0444, lng: 31.2357, altitude: 0.07 },\n    { name: \"Dubai\", lat: 25.2048, lng: 55.2708, altitude: 0.06 },\n    { name: \"California\", lat: 36.7783, lng: -119.4179, altitude: 0.2 },\n    { name: \"New York\", lat: 40.7128, lng: -74.0060, altitude: 0.18 },\n    { name: \"S\u00e3o Paulo\", lat: -23.5505, lng: -46.6333, altitude: 0.22 },\n    { name: \"Buenos Aires\", lat: -34.6037, lng: -58.3816, altitude: 0.24 },\n    { name: \"Warsaw\", lat: 52.2297, lng: 21.0122, altitude: 0.11 },\n    { name: \"Lisbon\", lat: 38.7223, lng: -9.1393, altitude: 0.14 },\n    { name: \"Jakarta\", lat: -6.2088, lng: 106.8456, altitude: 0.18 },\n    { name: \"Manila\", lat: 14.5995, lng: 120.9842, altitude: 0.2 },\n    { name: \"Seoul\", lat: 37.5665, lng: 126.9780, altitude: 0.17 },\n    { name: \"Amman\", lat: 31.9539, lng: 35.9106, altitude: 0.17 },\n    { name: \"Toronto\", lat: 43.651070, lng: -79.347015, altitude: 0.19 }\n  ];\n\n  \/\/ Create arcs with altitude per city\n  const arcs = destinations.map(city => ({\n    startLat: city.lat,\n  startLng: city.lng,\n  endLat: riyadhLat,\n  endLng: riyadhLng,\n  color: '#FF4F00',\n    altitude: city.altitude\n  }));\n\n  \/\/ Marker data for Riyadh and destinations\n  const gData = [\n    { lat: riyadhLat, lng: riyadhLng, size: 8, color: '#FF4F00' },\n    ...destinations.map(city => ({\n      lat: city.lat,\n      lng: city.lng,\n      size: 8,\n      color: '#FF4F00'\n    }))\n  ];\n\n  const globe = new Globe(document.getElementById('globeViz'))\n    .globeImageUrl('\/\/cdn.jsdelivr.net\/npm\/three-globe\/example\/img\/earth-night.jpg')\n    .arcsData(arcs)\n    .arcColor('color')\n    .arcDashLength(0.3)          \/\/ Controls dash segment size\n    .arcDashGap(1)               \/\/ Space between dashes to simulate end\n    .arcDashInitialGap(0)\n    .arcDashAnimateTime(4000)    \/\/ Animation duration\n    .arcAltitude('altitude');    \/\/ Altitude per city\n\n  \/\/ Add HTML markers\n  globe.htmlElementsData(gData)\n    .htmlElement(d => {\n      const el = document.createElement('div');\n      el.innerHTML = markerSvg;\n      el.style.color = d.color;\n      el.style.width = `${d.size}px`;\n      el.style.transition = 'opacity 250ms';\n      el.style.pointerEvents = 'auto';\n      el.style.cursor = 'pointer';\n      el.onclick = () => console.info(d);\n      return el;\n    })\n    .htmlElementVisibilityModifier((el, isVisible) => {\n      el.style.opacity = isVisible ? 1 : 0;\n    });\n\n  \/\/ Center globe on Riyadh initially\n  globe.controls().autoRotate = false;\n  globe.controls().enableZoom = false;\n  globe.pointOfView({ lat: riyadhLat, lng: riyadhLng, altitude: 2.5 }, 2000);\n\n  \/\/ Optional: remove globe glow\n  globe.onGlobeReady(() => {\n    const globeMesh = globe.globeMaterial();\n    globeMesh.emissive = new THREE.Color(0x000000);\n    globeMesh.emissiveIntensity = 0;\n  });\n  \n<\/script>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","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-7842","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/pages\/7842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/comments?post=7842"}],"version-history":[{"count":122,"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/pages\/7842\/revisions"}],"predecessor-version":[{"id":7980,"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/pages\/7842\/revisions\/7980"}],"wp:attachment":[{"href":"https:\/\/spartstudio.co\/ar\/wp-json\/wp\/v2\/media?parent=7842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}