{"id":2248,"date":"2025-04-09T17:14:19","date_gmt":"2025-04-09T15:14:19","guid":{"rendered":"https:\/\/ultramagic.test.creagia.com\/subsidiaries-dealers\/"},"modified":"2025-05-05T10:28:27","modified_gmt":"2025-05-05T08:28:27","slug":"subsidiaries-dealers","status":"publish","type":"page","link":"https:\/\/ultramagic.test.creagia.com\/en\/subsidiaries-dealers\/","title":{"rendered":"Subsidiaries-Dealers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2248\" class=\"elementor elementor-2248 elementor-1321\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50930cc e-con-full e-flex e-con e-parent\" data-id=\"50930cc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10016a6 elementor-widget elementor-widget-ultramagic-map\" data-id=\"10016a6\" data-element_type=\"widget\" data-widget_type=\"ultramagic-map.default\">\n\t\t\t\t\t<div id=\"map\" style=\"height: 800px; width: 100%;\"><\/div>\n\n<script defer>\n  \/* -----------------------------------------\n   *  C\u00f3digos ISO-3 (id del GeoJSON) a resaltar\n   * ----------------------------------------- *\/\n  const countriesToHighlight = [\"ESP\",\"FRA\"];\n\n  let lastClickedCountry = null;   \/\/ \u00daltimo pa\u00eds seleccionado\n\n  function initMap () {\n\n    \/* -------------  variables  ------------- *\/\n    const headquartersData = [{\"post_title\":\"Ultramagic America Factory\",\"post_content\":\"\\u003Cul\\u003E\\r\\n \\t\\u003Cli\\u003EBlvd. San Juan Bosco #4751-D\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003ECol. Lomas del Mirador \\u2013 CP.37358\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003ELe\\u00f3n, Guanajuato \\u2013 M\\u00e9xico\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E(+52) 477-779-6530 \\\/ 6529\\u003C\\\/li\\u003E\\r\\n\\u003C\\\/ul\\u003E\",\"thumbnail\":\"https:\\\/\\\/ultramagic.test.creagia.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/america_hq.png\",\"_hq_lat\":\"21.162041\",\"_hq_lng\":\"-101.733430\"},{\"post_title\":\"Ultramagic Factory\",\"post_content\":\"\\u003Cul\\u003E\\r\\n \\t\\u003Cli\\u003EAer\\u00f2drom Gral. Vives, Apt. 4\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E08700 Igualada, Barcelona, Spain.\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E+34 938 042 202\\u003C\\\/li\\u003E\\r\\n\\u003C\\\/ul\\u003E\",\"thumbnail\":\"https:\\\/\\\/ultramagic.test.creagia.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/hq.png\",\"_hq_lat\":\"41.585907\",\"_hq_lng\":\"1.653920\"}];         \/\/ posts HQ\n    const dealersByCountry = {\"ESP\":[{\"post_title\":\"Josep Mart\\u00ednez\",\"post_content\":\"\\u003Cul\\u003E\\r\\n \\t\\u003Cli\\u003EAvgda Barcelona 1\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E08700 Igualada\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E666-666-666\\u003C\\\/li\\u003E\\r\\n\\u003C\\\/ul\\u003E\",\"thumbnail\":\"https:\\\/\\\/ultramagic.test.creagia.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/america_hq.png\",\"_dealer_country\":\"ESP\"}],\"FRA\":[{\"post_title\":\"Corentin Ragot\",\"post_content\":\"\\u003Cul\\u003E\\r\\n \\t\\u003Cli\\u003E4 rue du magasin, 28320 Bailleau Armenonville, France\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003E+33237310196\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003Ecorentin@air-pegasus.com\\u003C\\\/li\\u003E\\r\\n\\u003C\\\/ul\\u003E\",\"thumbnail\":false,\"_dealer_country\":\"FRA\"},{\"post_title\":\"Federico Miceli\",\"post_content\":\"\\u003Cul\\u003E\\r\\n \\t\\u003Cli\\u003E7 rue de l\\u2019Artouillat, 41120\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003ELes Montils, France +33650431583\\u003C\\\/li\\u003E\\r\\n \\t\\u003Cli\\u003Efd.miceli@aerocom.fr\\u003C\\\/li\\u003E\\r\\n\\u003C\\\/ul\\u003E\",\"thumbnail\":false,\"_dealer_country\":\"FRA\"}]};              \/\/ posts Dealers\n    const map              = paintsInitialMap();           \/\/ mapa base\n    const markerIcon       = createsMarkerIcon();          \/\/ icono HQ\n    let   activeInfoWindow = null;                         \/\/ ventana activa\n\n    \/* --------  marcadores de headquarters  -------- *\/\n    headquartersData.forEach(hq => {\n      const marker = new google.maps.Marker({\n        position : { lat:+hq._hq_lat, lng:+hq._hq_lng },\n        map, icon : markerIcon, title: hq.post_title,\n      });\n\n      marker.addListener('click', () => {\n        map.data.revertStyle();        \/\/ des-selecciona pa\u00eds\n        lastClickedCountry = null;\n\n        if (activeInfoWindow) activeInfoWindow.close();\n\n        const html = `\n          <div class=\"post_info\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"${hq.thumbnail}\" alt=\"${hq.post_title}\">\n            <h3 class=\"post_title\">${hq.post_title}<\/h3>\n            <div class=\"post_content\">${hq.post_content}<\/div>\n          <\/div>`;\n\n        activeInfoWindow = new google.maps.InfoWindow({ content: html });\n        activeInfoWindow.open(map, marker);\n      });\n    });\n\n    \/* --------  interacci\u00f3n con pa\u00edses  -------- *\/\n    const countryInfoWindow = new google.maps.InfoWindow();\n\n    map.data.addListener('click', event => {\n      const code = event.feature.getId();                   \/\/ ISO-3\n\n      \/\/ Solo pa\u00edses de la lista\n      if ( !countriesToHighlight.includes(code) ) return;\n\n      if (activeInfoWindow) activeInfoWindow.close();\n\n      map.data.revertStyle();                               \/\/ reset estilos\n      map.data.overrideStyle(event.feature, { fillColor:'#f87548' });\n      lastClickedCountry = code;\n\n      const dealers = dealersByCountry[code] || [];\n\n      let html = setCountryInfoWindowHtml(dealers);\n\n      countryInfoWindow.setContent(html);\n      countryInfoWindow.setPosition(event.latLng);\n      countryInfoWindow.open(map);\n      activeInfoWindow = countryInfoWindow;\n    });\n  }\n\n  window.initMap = initMap;\n\n  \/* ===============  funciones auxiliares  =============== *\/\n\n  function paintsInitialMap () {\n\n    const map = new google.maps.Map(document.getElementById('map'), {\n      zoom: 2.5,\n      center: { lat:20, lng:0 },\n      styles: [\n        { elementType:'geometry', stylers:[{ color:'#f7eccc' }]},\n        { elementType:'labels',   stylers:[{ visibility:'off' }]},\n        { featureType:'water', elementType:'geometry.fill',\n          stylers:[{ color:'#c1e7c8' }]}\n      ],\n      mapTypeControl:false\n    });\n\n    \/*  GeoJSON local  *\/\n    const geo = `${window.location.origin}\/wp-content\/themes\/sage\/resources\/json\/countries.geo.json`;\n    map.data.loadGeoJson(geo);\n\n    \/*  color de relleno din\u00e1mico  *\/\n    map.data.setStyle(feature => {\n      const code = feature.getId();\n      let fill   = '#f7eccc';\n\n      if (countriesToHighlight.includes(code)) {\n        fill = (code === lastClickedCountry) ? '#f87548' : '#fcb595';\n      }\n      return { fillColor: fill, strokeColor:'#c1e7c8', strokeWeight:0.5 };\n    });\n\n    return map;\n  }\n\n  function createsMarkerIcon () {\n    return {\n      path: google.maps.SymbolPath.CIRCLE,\n      scale: 10,\n      fillColor:'#fda209',\n      fillOpacity:1,\n      strokeColor:'#ffffff',\n      strokeWeight:2,\n    };\n  }\n\n  function setCountryInfoWindowHtml(dealers){\n    let html = '<div class=\"post_info dealer\">';\n\n    if (dealers.length) {\n      dealers.forEach(d => {\n        html += `\n        <h4 class=\"post_title\">${d.post_title}<\/h4>\n        <div class=\"post_content\">${d.post_content}<\/div>\n      `;\n      });\n    } else {\n      html += '<p class=\"post_content\">No hi ha distribu\u00efdors registrats.<\/p>';\n    }\n    html += '<\/div>';\n\n    return html;\n  }\n<\/script>\n\n<script\n  src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCTYFl0n_7DPNTrHIFOAHZaj5nJggKUGoU&callback=initMap\"\n  defer>\n<\/script>\n\n<style>\n  .post_info{font-family:Montserrat,sans-serif;padding:10px}\n  .post_info .thumbnail{width:100%;max-width:350px;margin-bottom:20px}\n  .post_info .post_title{font-size:18px;font-weight:700;margin-bottom:10px}\n  .post_info .post_content{font-size:15px;font-weight:400}\n  .post_info.dealer .post_title:not(:first-child) {margin-top: 20px}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","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-2248","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/pages\/2248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/comments?post=2248"}],"version-history":[{"count":1,"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/pages\/2248\/revisions"}],"predecessor-version":[{"id":2250,"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/pages\/2248\/revisions\/2250"}],"wp:attachment":[{"href":"https:\/\/ultramagic.test.creagia.com\/en\/wp-json\/wp\/v2\/media?parent=2248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}