{"id":20,"date":"2026-04-16T21:03:47","date_gmt":"2026-04-16T21:03:47","guid":{"rendered":"https:\/\/www.semana.tumarcaagencia.com\/?page_id=20"},"modified":"2026-05-18T02:09:38","modified_gmt":"2026-05-18T02:09:38","slug":"location","status":"publish","type":"page","link":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/location\/","title":{"rendered":"Ubicaci\u00f3n"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20\" class=\"elementor elementor-20\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9d6e97 e-con-full e-flex e-con e-parent\" data-id=\"f9d6e97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d0fee41 e-con-full e-flex e-con e-child\" data-id=\"d0fee41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5d6e3c elementor-widget elementor-widget-html\" data-id=\"b5d6e3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Archivos de MapLibre -->\r\n<script src='https:\/\/unpkg.com\/maplibre-gl@latest\/dist\/maplibre-gl.js'><\/script>\r\n<link href='https:\/\/unpkg.com\/maplibre-gl@latest\/dist\/maplibre-gl.css' rel='stylesheet' \/>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d7dc504 elementor-widget elementor-widget-html\" data-id=\"d7dc504\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<script src='https:\/\/unpkg.com\/maplibre-gl@latest\/dist\/maplibre-gl.js'><\/script>\r\n<link href='https:\/\/unpkg.com\/maplibre-gl@latest\/dist\/maplibre-gl.css' rel='stylesheet' \/>\r\n\r\n<style>\r\n  #contenedor-mapa {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 500px;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    font-family: 'Montserrat', sans-serif;\r\n  }\r\n\r\n  #mapa-scoopl {\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  .marker-scoopl {\r\n    background-color: #000000;\r\n    width: 38px;\r\n    height: 38px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    border: 2px solid #ffffff;\r\n    box-shadow: 0px 4px 10px rgba(0,0,0,0.4);\r\n    z-index: 10;\r\n  }\r\n  \r\n  .marker-scoopl i {\r\n    font-size: 18px !important;\r\n    color: #ffffff !important;\r\n  }\r\n\r\n  .maplibregl-popup-content {\r\n    border-radius: 15px !important;\r\n    padding: 20px !important;\r\n    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;\r\n    min-width: 250px;\r\n  }\r\n\r\n  .scoopl-card-title {\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    margin-bottom: 12px;\r\n    display: block;\r\n  }\r\n\r\n  .scoopl-card-info {\r\n    font-size: 13px;\r\n    color: #444;\r\n    margin-bottom: 8px;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 10px;\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .scoopl-card-info i {\r\n    margin-top: 3px;\r\n    color: #000;\r\n    width: 14px;\r\n  }\r\n\r\n  .scoopl-card-buttons {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .btn-card {\r\n    flex: 1;\r\n    padding: 10px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    transition: 0.3s;\r\n    border: 1px solid #000;\r\n  }\r\n\r\n  .btn-order { background: #000; color: #fff; }\r\n  .btn-order:hover { color: #fff; }\r\n  .btn-directions { background: #fff; color: #000; }\r\n\r\n  .maplibregl-popup-close-button {\r\n    padding: 8px !important;\r\n    font-size: 16px !important;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"contenedor-mapa\">\r\n  <div id='mapa-scoopl'><\/div>\r\n<\/div>\r\n\r\n<script>\r\n  var map = new maplibregl.Map({\r\n    container: 'mapa-scoopl',\r\n    style: 'https:\/\/tiles.openfreemap.org\/styles\/bright', \r\n    center: [-72.221924, 7.767036], \r\n    zoom: 15, \r\n    pitch: 60, \r\n    bearing: -17,\r\n    antialias: true\r\n  });\r\n\r\n  var markersData = [];\r\n\r\n  map.on('load', function () {\r\n    const stores = [\r\n      {\r\n        name: \"Barrio Obrero\",\r\n        coords: [-72.221924, 7.767036],\r\n        address: \"Barrio Obrero, San Crist\u00f3bal, Venezuela\",\r\n        phone: \"0422-7190000\"\r\n      },\r\n      {\r\n        name: \"Pueblo nuevo\",\r\n        coords: [-72.226011, 7.783891],\r\n        address: \"Av. Guayana, villa los pinos\",\r\n        phone: \"0422-7190000\"\r\n      }\r\n    ];\r\n\r\n    \/\/ --- 1. CAPA 3D Y ESTILOS ---\r\n    map.getStyle().layers.forEach(function(layer) {\r\n        if (layer.id.includes('poi') || layer.id.includes('landmark')) {\r\n            map.setLayoutProperty(layer.id, 'visibility', 'none');\r\n        }\r\n    });\r\n\r\n    map.addLayer({\r\n        'id': '3d-buildings',\r\n        'source': 'openmaptiles',\r\n        'source-layer': 'building',\r\n        'type': 'fill-extrusion',\r\n        'minzoom': 15,\r\n        'paint': {\r\n            'fill-extrusion-color': '#e0e0e0',\r\n            'fill-extrusion-height': ['get', 'render_height'],\r\n            'fill-extrusion-base': ['get', 'render_min_height'],\r\n            'fill-extrusion-opacity': 0.8\r\n        }\r\n    });\r\n\r\n    \/\/ --- 2. PREPARAR CAPA DE RUTA (AL FINAL PARA QUE EST\u00c9 ENCIMA) ---\r\n    map.addSource('ruta-azul', {\r\n        'type': 'geojson',\r\n        'data': { 'type': 'FeatureCollection', 'features': [] }\r\n    });\r\n\r\n    map.addLayer({\r\n        'id': 'ruta-azul-outline',\r\n        'type': 'line',\r\n        'source': 'ruta-azul',\r\n        'layout': { 'line-join': 'round', 'line-cap': 'round' },\r\n        'paint': {\r\n            'line-color': '#0056b3',\r\n            'line-width': 8,\r\n            'line-opacity': 0.9\r\n        }\r\n    });\r\n\r\n    map.addLayer({\r\n        'id': 'ruta-azul-inner',\r\n        'type': 'line',\r\n        'source': 'ruta-azul',\r\n        'layout': { 'line-join': 'round', 'line-cap': 'round' },\r\n        'paint': {\r\n            'line-color': '#00aaff',\r\n            'line-width': 5,\r\n            'line-opacity': 1\r\n        }\r\n    });\r\n\r\n    \/\/ --- 3. GEOLOCALIZACI\u00d3N Y L\u00d3GICA DE RUTA ---\r\n    const geolocate = new maplibregl.GeolocateControl({\r\n        positionOptions: { enableHighAccuracy: true },\r\n        trackUserLocation: true,\r\n        showUserLocation: true\r\n    });\r\n    \r\n    map.addControl(geolocate, 'top-right');\r\n\r\n    geolocate.on('geolocate', function(e) {\r\n        const userLon = e.coords.longitude;\r\n        const userLat = e.coords.latitude;\r\n\r\n        let nearestStore = stores[0];\r\n        let minDistance = Infinity;\r\n        \r\n        stores.forEach(store => {\r\n            const d = Math.pow(store.coords[0] - userLon, 2) + Math.pow(store.coords[1] - userLat, 2);\r\n            if (d < minDistance) {\r\n                minDistance = d;\r\n                nearestStore = store;\r\n            }\r\n        });\r\n\r\n        \/\/ Llamada a API de rutas OSRM\r\n        const url = `https:\/\/router.project-osrm.org\/route\/v1\/driving\/${userLon},${userLat};${nearestStore.coords[0]},${nearestStore.coords[1]}?overview=full&geometries=geojson`;\r\n        \r\n        fetch(url)\r\n            .then(res => res.json())\r\n            .then(data => {\r\n                if (data.routes && data.routes.length > 0) {\r\n                    map.getSource('ruta-azul').setData({\r\n                        'type': 'Feature',\r\n                        'geometry': data.routes[0].geometry\r\n                    });\r\n                }\r\n            })\r\n            .catch(err => console.error(\"Error en ruta:\", err));\r\n    });\r\n\r\n    \/\/ --- 4. MARCADORES ---\r\n    stores.forEach(store => {\r\n      var el = document.createElement('div');\r\n      el.className = 'marker-scoopl';\r\n      el.innerHTML = '<i class=\"fa-solid fa-store\"><\/i>';\r\n\r\n      var popup = new maplibregl.Popup({ offset: 25 }).setHTML(`\r\n        <div class=\"scoopl-popup\">\r\n          <span class=\"scoopl-card-title\">${store.name}<\/span>\r\n          <div class=\"scoopl-card-info\"><i class=\"fa-solid fa-location-dot\"><\/i><span>${store.address}<\/span><\/div>\r\n          <div class=\"scoopl-card-info\"><i class=\"fa-solid fa-phone\"><\/i><span>${store.phone}<\/span><\/div>\r\n          <div class=\"scoopl-card-buttons\">\r\n            <a href=\"https:\/\/www.semana.tumarcaagencia.com\/index.php\/order\/\" class=\"btn-card btn-order\">Orden<\/a>\r\n            <a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${store.coords[1]},${store.coords[0]}\" target=\"_blank\" class=\"btn-card btn-directions\">Direcci\u00f3n<\/a>\r\n          <\/div>\r\n        <\/div>\r\n      `);\r\n\r\n      var marker = new maplibregl.Marker({ element: el, anchor: 'center' })\r\n        .setLngLat(store.coords)\r\n        .setPopup(popup)\r\n        .addTo(map);\r\n\r\n      markersData.push({ marker: marker, element: el, name: store.name.toLowerCase(), coords: store.coords });\r\n    });\r\n\r\n    \/\/ --- 5. B\u00daSQUEDA ---\r\n    const searchInput = document.querySelector('#buscador-tiendas input');\r\n    if (searchInput) {\r\n      searchInput.addEventListener('input', function(e) {\r\n        const query = e.target.value.toLowerCase();\r\n        markersData.forEach(item => {\r\n          item.element.style.display = item.name.includes(query) ? 'flex' : 'none';\r\n        });\r\n      });\r\n      searchInput.addEventListener('keydown', function(e) {\r\n        if (e.key === 'Enter') {\r\n          const match = markersData.find(item => item.name.includes(e.target.value.toLowerCase()));\r\n          if (match) {\r\n            map.flyTo({ center: match.coords, zoom: 17, essential: true });\r\n            match.marker.togglePopup();\r\n          }\r\n        }\r\n      });\r\n    }\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b024fb1 e-con-full e-flex e-con e-child\" data-id=\"b024fb1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdfe9c3 elementor-widget elementor-widget-heading\" data-id=\"cdfe9c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Seleccione una tienda<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26efa0c elementor-widget elementor-widget-search\" data-id=\"26efa0c\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"buscador-tiendas\" data-settings=\"{&quot;submit_trigger&quot;:&quot;key_enter&quot;,&quot;live_results&quot;:&quot;yes&quot;,&quot;pagination_type_options&quot;:&quot;none&quot;,&quot;results_is_dropdown_width&quot;:&quot;search_field&quot;}\" data-widget_type=\"search.default\">\n\t\t\t\t\t\t\t<search class=\"e-search hidden\" role=\"search\">\n\t\t\t<form class=\"e-search-form\" action=\"https:\/\/www.semana.tumarcaagencia.com\" method=\"get\">\n\n\t\t\t\t\n\t\t\t\t<label class=\"e-search-label\" for=\"search-26efa0c\">\n\t\t\t\t\t<span class=\"elementor-screen-only\">\n\t\t\t\t\t\tSearch\t\t\t\t\t<\/span>\n\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-search\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"><\/path><\/svg>\t\t\t\t<\/label>\n\n\t\t\t\t<div class=\"e-search-input-wrapper\">\n\t\t\t\t\t<input id=\"search-26efa0c\" placeholder=\"Buscar ciudad, estado o c\u00f3digo postal\" class=\"e-search-input\" type=\"search\" name=\"s\" value=\"\" autocomplete=\"on\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"false\" aria-controls=\"results-26efa0c\" aria-haspopup=\"listbox\">\n\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-times\" viewBox=\"0 0 352 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"><\/path><\/svg>\t\t\t\t\t\t\t\t\t\t<output id=\"results-26efa0c\" class=\"e-search-results-container hide-loader\" aria-live=\"polite\" aria-atomic=\"true\" aria-label=\"Results for search\" tabindex=\"0\">\n\t\t\t\t\t\t<div class=\"e-search-results\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/output>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<button class=\"e-search-submit elementor-screen-only \" type=\"submit\" aria-label=\"Search\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/button>\n\t\t\t\t<input type=\"hidden\" name=\"e_search_props\" value=\"26efa0c-20\">\n\t\t\t<\/form>\n\t\t<\/search>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6982817 elementor-widget elementor-widget-html\" data-id=\"6982817\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"lista-tiendas\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"scoopl-store-list\" id=\"scoopl-list\">\r\n    \r\n    <div class=\"store-card\" onclick=\"seleccionarTienda(event, -72.221924, 7.767036, 'Barrio Obrero')\">\r\n        <div class=\"store-info\">\r\n            <div class=\"store-header\">\r\n                <i class=\"fa-solid fa-store store-icon\"><\/i>\r\n                <div class=\"store-name-status\">\r\n                    <span class=\"store-name\">Barrio Obrero<\/span>\r\n                    <span class=\"store-status\">Abierto hasta las 10:00 PM<\/span>\r\n                <\/div>\r\n                <i class=\"fa-solid fa-chevron-right arrow-icon\"><\/i>\r\n            <\/div>\r\n            <p class=\"store-address\">San Crist\u00f3bal, Venezuela<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"store-card\" onclick=\"seleccionarTienda(event, -72.223889, 7.810556, 'Las Vegas de T\u00e1riba')\">\r\n        <div class=\"store-info\">\r\n            <div class=\"store-header\">\r\n                <i class=\"fa-solid fa-store store-icon\"><\/i>\r\n                <div class=\"store-name-status\">\r\n                    <span class=\"store-name\">Casa de mi amor (Vic \u2764)<\/span>\r\n                    <span class=\"store-status\">Abierto hasta las 10:00 PM<\/span>\r\n                <\/div>\r\n                <i class=\"fa-solid fa-chevron-right arrow-icon\"><\/i>\r\n            <\/div>\r\n            <p class=\"store-address\">Antituberculoso, San Crist\u00f3bal, Venezuela<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n<style>\r\n    .scoopl-store-list {\r\n        max-height: 450px; \r\n        overflow-y: auto;\r\n        padding-right: 10px;\r\n        font-family: 'Montserrat', sans-serif;\r\n    }\r\n\r\n    .scoopl-store-list::-webkit-scrollbar { width: 4px; }\r\n    .scoopl-store-list::-webkit-scrollbar-track { background: #f1f1f1; }\r\n    .scoopl-store-list::-webkit-scrollbar-thumb { background: #000; border-radius: 10px; }\r\n\r\n    .store-card {\r\n        background: #fff;\r\n        border-bottom: 1px solid #eee;\r\n        padding: 20px 10px;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .store-card:hover { background: #fffafa; }\r\n\r\n    .store-header {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        position: relative;\r\n    }\r\n\r\n    .store-icon { font-size: 18px; color: #000; }\r\n\r\n    .store-name-status {\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n    }\r\n\r\n    .store-name { font-size: 16px; font-weight: 700; color: #000; }\r\n\r\n    .store-status {\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        color: #d06d8a; \r\n        margin-top: 2px;\r\n    }\r\n\r\n    .store-address {\r\n        font-size: 13px;\r\n        color: #666;\r\n        margin: 8px 0 0 33px; \r\n        line-height: 1.4;\r\n    }\r\n\r\n    .arrow-icon { font-size: 12px; color: #ccc; }\r\n<\/style>\r\n\r\n<script>\r\n   function seleccionarTienda(event, lng, lat, name) {\r\n        \/\/ 1. Evitar cualquier redirecci\u00f3n o recarga de la p\u00e1gina\r\n        if (event) {\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n        }\r\n\r\n        \/\/ 2. Efecto visual en el mapa con animaci\u00f3n y zoom suave\r\n        if (typeof map !== 'undefined') {\r\n            map.flyTo({\r\n                center: [lng, lat],\r\n                zoom: 16.5,\r\n                speed: 1.2,   \/\/ Velocidad de la animaci\u00f3n (m\u00e1s bajo = m\u00e1s lento y suave)\r\n                curve: 1.4,   \/\/ Qu\u00e9 tanto se aleja el mapa antes de acercarse al nuevo punto\r\n                essential: true \r\n            });\r\n            \r\n            \/\/ Opcional: Aqu\u00ed puedes agregar c\u00f3digo para abrir el popup del marcador si lo deseas\r\n            console.log(\"Navegando a: \" + name);\r\n        } else {\r\n            console.error(\"El mapa no est\u00e1 cargado o definido.\");\r\n        }\r\n   }\r\n\r\n   \/\/ Mantengo focusStore por compatibilidad\r\n   function focusStore(event, lng, lat, name) {\r\n       seleccionarTienda(event, lng, lat, name);\r\n   }\r\n<\/script>\t\t\t\t<\/div>\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":"<p>Seleccione una tienda Search Barrio Obrero Abierto hasta las 10:00 PM San Crist\u00f3bal, Venezuela Casa de mi amor (Vic \u2764) Abierto hasta las 10:00 PM Antituberculoso, San Crist\u00f3bal, Venezuela<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":239,"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":1906,"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/20\/revisions\/1906"}],"wp:attachment":[{"href":"https:\/\/www.semana.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}