{"id":6220,"date":"2026-01-12T10:29:33","date_gmt":"2026-01-12T10:29:33","guid":{"rendered":"https:\/\/mintys.adlogiqdemos.co.za\/?page_id=6220"},"modified":"2026-01-13T11:27:54","modified_gmt":"2026-01-13T11:27:54","slug":"branch-locator","status":"publish","type":"page","link":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/branch-locator\/","title":{"rendered":"branch locator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6220\" class=\"elementor elementor-6220\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a73302 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"1a73302\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f6b9310\" data-id=\"f6b9310\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea6e299 elementor-widget elementor-widget-heading\" data-id=\"ea6e299\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">FIND YOUR CLOSEST MINTY'S\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-54d39c0 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"54d39c0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9893408\" data-id=\"9893408\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ee06cf7 elementor-widget elementor-widget-html\" data-id=\"ee06cf7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\r\n\r\n<style>\r\n    \/* 1. CONTAINER - Black Border *\/\r\n    #store-locator-container {\r\n        display: flex;\r\n        flex-wrap: wrap; \r\n        height: 650px; \r\n        border: 2px solid #000000;\r\n        border-radius: 0px; \r\n        overflow: hidden;\r\n        font-family: sans-serif;\r\n        background-color: #ffffff;\r\n    }\r\n\r\n    \/* 2. SIDE PANEL (LEFT) *\/\r\n    #branch-list-panel {\r\n        width: 35%;\r\n        height: 100%;\r\n        overflow-y: auto;\r\n        background: #ffffff;\r\n        border-right: 2px solid #000000;\r\n    }\r\n\r\n    \/* 3. LIST ITEM STYLING *\/\r\n    .branch-item {\r\n        padding: 20px;\r\n        border-bottom: 1px solid #eeeeee;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        background: #ffffff;\r\n        color: #000000;\r\n    }\r\n\r\n    \/* Hover Effect - Red Accent *\/\r\n    .branch-item:hover {\r\n        background: #f9f9f9;\r\n        border-left: 6px solid #d00000;\r\n        padding-left: 14px;\r\n    }\r\n\r\n    .branch-item h4 {\r\n        margin: 0 0 5px 0;\r\n        font-size: 15px;\r\n        font-weight: 800;\r\n        text-transform: uppercase;\r\n        color: #000000;\r\n    }\r\n\r\n    .branch-item p {\r\n        margin: 0 0 8px 0;\r\n        font-size: 13px;\r\n        color: #555555;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    \/* Contact Links (Phone\/Email) *\/\r\n    .contact-link {\r\n        display: block;\r\n        font-size: 12px;\r\n        color: #333;\r\n        text-decoration: none;\r\n        margin-bottom: 3px;\r\n        font-weight: 500;\r\n    }\r\n    .contact-link:hover {\r\n        color: #d00000;\r\n        text-decoration: underline;\r\n    }\r\n\r\n    \/* Distance Text - Red *\/\r\n    .distance-tag {\r\n        font-weight: 800;\r\n        color: #d00000;\r\n        font-size: 11px;\r\n        margin-top: 10px;\r\n        display: block;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    \/* 4. MAP (RIGHT) *\/\r\n    #my-branch-map { \r\n        width: 65%; \r\n        height: 100%;\r\n        z-index: 1;\r\n    }\r\n\r\n    \/* 5. TURN DEFAULT PINS RED *\/\r\n    img.leaflet-marker-icon {\r\n        filter: hue-rotate(140deg) brightness(0.9) saturate(1.5);\r\n    }\r\n\r\n    \/* Custom Scrollbar *\/\r\n    #branch-list-panel::-webkit-scrollbar { width: 8px; }\r\n    #branch-list-panel::-webkit-scrollbar-track { background: #f1f1f1; }\r\n    #branch-list-panel::-webkit-scrollbar-thumb { background: #d00000; }\r\n\r\n    \/* Mobile Responsive Logic *\/\r\n    @media (max-width: 768px) {\r\n        \/* Stack the list and map on top of each other *\/\r\n        #branch-list-panel, #my-branch-map {\r\n            width: 100%;\r\n            height: 50%;\r\n        }\r\n        \/* Remove the right border and add a bottom border for the list *\/\r\n        #branch-list-panel {\r\n            border-right: none;\r\n            border-bottom: 2px solid #000000;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"store-locator-container\">\r\n    <div id=\"branch-list-panel\">\r\n        <div style=\"padding:20px; font-style:italic; color:#888;\">Locating you...<\/div>\r\n    <\/div>\r\n    <div id=\"my-branch-map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        \r\n        \/\/ --- 1. DATA: YOUR MINTYS BRANCHES ---\r\n        var branches = [\r\n            {\r\n                name: \"Mintys Amalgam JHB\",\r\n                lat: -26.213611,\r\n                lng: 27.999928,\r\n                address: \"Cnr Main Reef & Production road, Amalgam\",\r\n                phone: \"011 661 4338\",\r\n                email: \"amalgam@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Tyres Greenstone\",\r\n                lat: -26.1171,\r\n                lng: 28.1317,\r\n                address: \"Shop 14B, Stonehill Crossing, 41 Greenstone Place, Edenvale\",\r\n                phone: \"010 065 1786\",\r\n                email: \"greenstone@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Bedfordview\",\r\n                lat: -26.168583,\r\n                lng: 28.165885,\r\n                address: \"Cnr North Reef and A G De Witt roads\",\r\n                phone: \"011 455 6076\",\r\n                email: \"bedfordview@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Tyres Cresta\",\r\n                lat: -26.1309, \r\n                lng: 27.9723,\r\n                address: \"277 Beyers Naude Dr, Cresta\",\r\n                phone: \"011 431 1245\",\r\n                email: \"cresta@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Crown Mines\",\r\n                lat: -26.213726,\r\n                lng: 27.999958,\r\n                address: \"Cnr Main Reef & Production road, Amalgam\",\r\n                phone: \"011 661 4338\",\r\n                email: \"amalgam@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Gordon Road\",\r\n                lat: -26.166339,\r\n                lng: 27.939081,\r\n                address: \"Cnr Hendrik Potgieter and Gordon Road, Clearview Motor Village\",\r\n                phone: \"011 472 0235\",\r\n                email: \"gordon@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Greenside\",\r\n                lat: -26.145999,\r\n                lng: 28.011487,\r\n                address: \"120 Greenway Road, Greenside\",\r\n                phone: \"011 486 0319\",\r\n                email: \"greenside@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Tyres Glen (JHB South)\",\r\n                lat: -26.268038,\r\n                lng: 28.056651,\r\n                address: \"5 Boundary lane (near The Glen), Oakdene\",\r\n                phone: \"011 435 0115\",\r\n                email: \"glen@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Midrand\",\r\n                lat: -25.981764,\r\n                lng: 28.132987,\r\n                address: \"Cnr New & Old Pretoria Road, Midrand\",\r\n                phone: \"011 312 1577\",\r\n                email: \"midrand@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Newtown\",\r\n                lat: -26.202757,\r\n                lng: 28.027358,\r\n                address: \"80 Bree Street, Newtown\",\r\n                phone: \"011 836 7255\",\r\n                email: \"newtown@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Rosebank\",\r\n                lat: -26.145748,\r\n                lng: 28.035956,\r\n                address: \"136 Jan Smuts road, Rosebank\",\r\n                phone: \"011 442 4665\",\r\n                email: \"rosebank@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Randburg\",\r\n                lat: -26.087559,\r\n                lng: 28.007516,\r\n                address: \"188 Bram Fisher road, Randburg\",\r\n                phone: \"011 886 2959\",\r\n                email: \"randburg@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Sandton\",\r\n                lat: -26.103415,\r\n                lng: 28.061164,\r\n                address: \"Cnr Rivonia & Linden road, Sandton\",\r\n                phone: \"011 783 4826\",\r\n                email: \"sandton@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Pretoria\",\r\n                lat: -25.749183,\r\n                lng: 28.185615,\r\n                address: \"Cnr Bosman & Visagie road, Pretoria\",\r\n                phone: \"012 323 5341\",\r\n                email: \"pretoria@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Umhlanga, Durban\",\r\n                lat: -29.720328,\r\n                lng: 31.062559,\r\n                address: \"15 Meridian Drive, Umhlanga Ridge\",\r\n                phone: \"031 566 5063\",\r\n                email: \"umhlanga@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Vereeniging\",\r\n                lat: -26.693134,\r\n                lng: 27.850162,\r\n                address: \"26 De Villiers street, Vereeniging\",\r\n                phone: \"016 422 4178\",\r\n                email: \"vereeniging@mintys.com\"\r\n            },\r\n            {\r\n                name: \"Mintys Steeledale\",\r\n                lat: -26.248047,\r\n                lng: 28.095016,\r\n                address: \"Steeledale, Linroy, South Hills, JHB\",\r\n                phone: \"010 786 1255\",\r\n                email: \"steeledale@mintys.com\"\r\n            }\r\n        ];\r\n\r\n        \/\/ --- 2. SETUP MAP ---\r\n        \/\/ scrollWheelZoom: false ensures the map doesn't 'trap' the mouse when scrolling down the page\r\n        var map = L.map('my-branch-map', { scrollWheelZoom: false }).setView([-26.20, 28.04], 9);\r\n        \r\n        L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n            maxZoom: 19,\r\n            attribution: '\u00a9 OpenStreetMap'\r\n        }).addTo(map);\r\n\r\n        \/\/ --- 3. CALCULATE DISTANCE ---\r\n        function getDistance(lat1, lon1, lat2, lon2) {\r\n            var R = 6371; \r\n            var dLat = deg2rad(lat2 - lat1);\r\n            var dLon = deg2rad(lon2 - lon1);\r\n            var a = Math.sin(dLat\/2) * Math.sin(dLat\/2) +\r\n                    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon\/2) * Math.sin(dLon\/2); \r\n            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); \r\n            return R * c; \r\n        }\r\n        function deg2rad(deg) { return deg * (Math.PI\/180); }\r\n\r\n        \/\/ --- 4. RENDER LIST ---\r\n        function renderList(userLat, userLng) {\r\n            var listPanel = document.getElementById('branch-list-panel');\r\n            listPanel.innerHTML = \"\"; \r\n\r\n            if (userLat && userLng) {\r\n                branches.forEach(function(branch) {\r\n                    branch.distance = getDistance(userLat, userLng, branch.lat, branch.lng);\r\n                });\r\n                branches.sort(function(a, b) { return a.distance - b.distance; });\r\n            }\r\n\r\n            \/\/ Clean map\r\n             map.eachLayer((layer) => {\r\n                 if(layer instanceof L.Marker) { map.removeLayer(layer); }\r\n            });\r\n\r\n            branches.forEach(function(branch) {\r\n                var distText = branch.distance ? branch.distance.toFixed(1) + \" KM AWAY\" : \"\";\r\n                \r\n                \/\/ Add to Sidebar\r\n                var item = document.createElement('div');\r\n                item.className = 'branch-item';\r\n                item.innerHTML = `\r\n                    <h4>${branch.name}<\/h4>\r\n                    <p>${branch.address}<\/p>\r\n                    <a href=\"tel:${branch.phone}\" class=\"contact-link\">\ud83d\udcde ${branch.phone}<\/a>\r\n                    <a href=\"mailto:${branch.email}\" class=\"contact-link\">\u2709\ufe0f ${branch.email}<\/a>\r\n                    <span class=\"distance-tag\">${distText}<\/span>\r\n                `;\r\n                \r\n                \/\/ Click Event\r\n                item.addEventListener('click', function() {\r\n                    map.flyTo([branch.lat, branch.lng], 15);\r\n                    setTimeout(function(){\r\n                         L.popup()\r\n                        .setLatLng([branch.lat, branch.lng])\r\n                        .setContent(`\r\n                            <div style=\"font-family:sans-serif; text-align:center; min-width:200px;\">\r\n                                <strong style=\"color:#000; text-transform:uppercase;\">${branch.name}<\/strong><br>\r\n                                <span style=\"font-size:12px; color:#555;\">${branch.address}<\/span><br>\r\n                                <hr style=\"margin:5px 0; border:0; border-top:1px solid #eee;\">\r\n                                <a href=\"tel:${branch.phone}\" style=\"color:#333; text-decoration:none; font-size:12px; display:block;\">\ud83d\udcde ${branch.phone}<\/a>\r\n                                <a href=\"mailto:${branch.email}\" style=\"color:#333; text-decoration:none; font-size:12px; display:block; margin-bottom:8px;\">\u2709\ufe0f ${branch.email}<\/a>\r\n                                <a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${branch.lat},${branch.lng}\" target=\"_blank\" style=\"background:#d00000; color:#fff; padding:6px 10px; text-decoration:none; border-radius:3px; font-size:11px; display:inline-block;\">GET DIRECTIONS<\/a>\r\n                            <\/div>\r\n                        `)\r\n                        .openOn(map);\r\n                    }, 300);\r\n                });\r\n\r\n                listPanel.appendChild(item);\r\n\r\n                \/\/ Add to Map\r\n                var marker = L.marker([branch.lat, branch.lng]).addTo(map);\r\n                marker.bindPopup(`\r\n                    <div style=\"font-family:sans-serif; text-align:center; min-width:200px;\">\r\n                        <strong style=\"color:#000; text-transform:uppercase;\">${branch.name}<\/strong><br>\r\n                        <span style=\"font-size:12px; color:#555;\">${branch.address}<\/span><br>\r\n                        <hr style=\"margin:5px 0; border:0; border-top:1px solid #eee;\">\r\n                        <a href=\"tel:${branch.phone}\" style=\"color:#333; text-decoration:none; font-size:12px; display:block;\">\ud83d\udcde ${branch.phone}<\/a>\r\n                        <a href=\"mailto:${branch.email}\" style=\"color:#333; text-decoration:none; font-size:12px; display:block; margin-bottom:8px;\">\u2709\ufe0f ${branch.email}<\/a>\r\n                        <a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${branch.lat},${branch.lng}\" target=\"_blank\" style=\"background:#d00000; color:#fff; padding:6px 10px; text-decoration:none; border-radius:3px; font-size:11px; display:inline-block;\">GET DIRECTIONS<\/a>\r\n                    <\/div>\r\n                `);\r\n            });\r\n        }\r\n\r\n        \/\/ --- 5. GET USER LOCATION ---\r\n        if (navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(\r\n                function(position) {\r\n                    renderList(position.coords.latitude, position.coords.longitude);\r\n                },\r\n                function(error) {\r\n                    renderList(null, null);\r\n                }\r\n            );\r\n        } else {\r\n            renderList(null, null);\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FIND YOUR CLOSEST MINTY&#8217;S Locating you&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-6220","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/pages\/6220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=6220"}],"version-history":[{"count":25,"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/pages\/6220\/revisions"}],"predecessor-version":[{"id":6354,"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/pages\/6220\/revisions\/6354"}],"wp:attachment":[{"href":"https:\/\/mintys.adlogiqdemos.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=6220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}