{"id":3278,"date":"2026-05-27T19:37:09","date_gmt":"2026-05-27T19:37:09","guid":{"rendered":"https:\/\/trghost.com\/TRGTReeSolutions.com\/?page_id=3278"},"modified":"2026-05-29T20:12:30","modified_gmt":"2026-05-29T20:12:30","slug":"california","status":"publish","type":"page","link":"https:\/\/trghost.com\/TRGTReeSolutions.com\/california\/","title":{"rendered":"California"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3278\" class=\"elementor elementor-3278\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-981a452 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"981a452\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-23610ae\" data-id=\"23610ae\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-4b4604b elementor-widget elementor-widget-uthan_chooseus\" data-id=\"4b4604b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"uthan_chooseus.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n\t\t\n        <section class=\"chooseus-section p_relative \">\n\t\t\n\t\t\t\t\n\t\t\t<div class=\"pattern-layer p_absolute\">\n\t\t\t\t\t\t<\/div>\n            <div class=\"auto-container\">\n                <div class=\"inner-container p_relative d_block bg_white b_radius_5 b_shadow_6\">\n                    <div class=\"shape-layer\">\n\t\t\t\t\t\t                        <div class=\"shape-1 p_absolute\" style=\"background-image: url(https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-content\/uploads\/2021\/12\/shape-5.png);\">\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t                        <div class=\"shape-2 p_absolute\" style=\"background-image: url(https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-content\/uploads\/2021\/12\/shape-6.png);\">\n\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n                    <\/div>\n                    <div class=\"row clearfix\">\n                        <div class=\"col-lg-5 col-md-12 col-sm-12 image-column\">\n                            <figure class=\"image-box p_relative d_block img_hover_3\">\n\t\t\t\t\t\t\t\t   \n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-content\/uploads\/2026\/05\/gardener-using-hedge-trimmer-to-trim-tree-2026-03-17-21-31-54-utc_11zon-scaled.jpg\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n                        <\/div>\n                        <div class=\"col-lg-7 col-md-12 col-sm-12 content-column\">\n                            <div class=\"content_block_2\">\n                                <div class=\"content-box p_relative d_block pt_65 pl_40 pr_70 pb_30\">\n\t\t\t\t\t\t\t\t\t                                    <div class=\"sec-title mb_10\">\n                                        <span class=\"sub-title\">California<\/span>\n                                        <h2>Proudly Serving Your Local Communities<\/h2>\n                                    <\/div>\n\t\t\t\t\t\t\t\t\t                                    <div class=\"text p_relative d_block mb_35\">\n                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library.<\/p>\n                                    <\/div>\n                                    <div class=\"inner-box p_relative d_block\">\n                                        <div class=\"row clearfix\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n                                            <div class=\"col-lg-6 col-md-6 col-sm-12 single-column\">\n                                                <div class=\"single-item p_relative d_block mb_25 pl_55\">\n                                                    <div class=\"icon-box p_absolute d_iblock fs_35\"><i class=\" icon-7\"><\/i><\/div>\n                                                    <h5 class=\"fs_18 lh_30 mb_5 fw_medium\">Tree Care Solutions<\/h5>\n                                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\n                                                <\/div>\n                                            <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n                                            <div class=\"col-lg-6 col-md-6 col-sm-12 single-column\">\n                                                <div class=\"single-item p_relative d_block mb_25 pl_55\">\n                                                    <div class=\"icon-box p_absolute d_iblock fs_35\"><i class=\" icon-8\"><\/i><\/div>\n                                                    <h5 class=\"fs_18 lh_30 mb_5 fw_medium\">Tree Experts<\/h5>\n                                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\n                                                <\/div>\n                                            <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n                                            <div class=\"col-lg-6 col-md-6 col-sm-12 single-column\">\n                                                <div class=\"single-item p_relative d_block mb_25 pl_55\">\n                                                    <div class=\"icon-box p_absolute d_iblock fs_35\"><i class=\" icon-12\"><\/i><\/div>\n                                                    <h5 class=\"fs_18 lh_30 mb_5 fw_medium\">Green Tree Services<\/h5>\n                                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\n                                                <\/div>\n                                            <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n                                            <div class=\"col-lg-6 col-md-6 col-sm-12 single-column\">\n                                                <div class=\"single-item p_relative d_block mb_25 pl_55\">\n                                                    <div class=\"icon-box p_absolute d_iblock fs_35\"><i class=\" icon-9\"><\/i><\/div>\n                                                    <h5 class=\"fs_18 lh_30 mb_5 fw_medium\">Tree Management Solutions<\/h5>\n                                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\n                                                <\/div>\n                                            <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t            \n\t\t\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<div class=\"elementor-element elementor-element-9ac427f e-flex e-con-boxed e-con e-parent\" data-id=\"9ac427f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9eaec5 elementor-widget elementor-widget-html\" data-id=\"b9eaec5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Service Areas - TRG Tree Solutions<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600;700&display=swap');\r\n  \r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n  \r\n  .map-wrapper {\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    font-family: 'Poppins', sans-serif;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n    position: relative;\r\n  }\r\n  \r\n  .map-header {\r\n    background: linear-gradient(135deg, #5c2e00 0%, #964B00 50%, #b35c00 100%);\r\n    padding: 24px 32px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  \r\n  .map-header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    right: -10%;\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\r\n    border-radius: 50%;\r\n  }\r\n  \r\n  .header-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    flex: 1;\r\n  }\r\n  \r\n  .map-header h2 {\r\n    color: #fff;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    letter-spacing: -0.3px;\r\n  }\r\n  \r\n  .map-header p {\r\n    color: rgba(255,255,255,0.85);\r\n    font-size: 13px;\r\n    font-weight: 400;\r\n    margin-top: 2px;\r\n  }\r\n  \r\n  .header-dropdown-wrap {\r\n    position: relative;\r\n    z-index: 10;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  .header-dropdown-wrap label {\r\n    display: block;\r\n    color: rgba(255,255,255,0.7);\r\n    font-size: 10px;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 5px;\r\n  }\r\n  \r\n  .area-dropdown {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    background: rgba(255,255,255,0.15);\r\n    backdrop-filter: blur(6px);\r\n    border: 1.5px solid rgba(255,255,255,0.35);\r\n    border-radius: 10px;\r\n    color: #fff;\r\n    font-family: 'Poppins', sans-serif;\r\n    font-size: 13.5px;\r\n    font-weight: 600;\r\n    padding: 10px 42px 10px 16px;\r\n    cursor: pointer;\r\n    min-width: 200px;\r\n    transition: all 0.25s ease;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n    background-repeat: no-repeat;\r\n    background-position: right 14px center;\r\n  }\r\n  \r\n  .area-dropdown:hover {\r\n    background-color: rgba(255,255,255,0.25);\r\n    border-color: rgba(255,255,255,0.55);\r\n  }\r\n  \r\n  .area-dropdown:focus {\r\n    outline: none;\r\n    background-color: rgba(255,255,255,0.3);\r\n    border-color: #fff;\r\n    box-shadow: 0 0 0 3px rgba(255,255,255,0.15);\r\n  }\r\n  \r\n  .area-dropdown option {\r\n    background: #5c2e00;\r\n    color: #fff;\r\n    font-weight: 500;\r\n    padding: 8px;\r\n  }\r\n  \r\n  .header-icon {\r\n    width: 44px;\r\n    height: 44px;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  #map {\r\n    width: 100%;\r\n    height: 420px;\r\n    background: #f5ebe0;\r\n  }\r\n  \r\n  .city-legend {\r\n    background: #fff;\r\n    padding: 16px 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 28px;\r\n    flex-wrap: wrap;\r\n    border-top: 2px solid #e8f5e9;\r\n  }\r\n  \r\n  .legend-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    cursor: pointer;\r\n    padding: 6px 14px;\r\n    border-radius: 20px;\r\n    transition: all 0.25s ease;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #5c2e00;\r\n    border: 1.5px solid transparent;\r\n  }\r\n  \r\n  .legend-item:hover {\r\n    background: #f5ebe0;\r\n    border-color: #964B00;\r\n  }\r\n  \r\n  .legend-item.active {\r\n    background: #964B00;\r\n    color: #fff;\r\n  }\r\n  \r\n  .legend-dot {\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    background: #964B00;\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  .legend-item.active .legend-dot {\r\n    background: #fff;\r\n  }\r\n  \r\n  \/* Custom popup styling *\/\r\n  .leaflet-popup-content-wrapper {\r\n    border-radius: 14px !important;\r\n    box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;\r\n    padding: 0 !important;\r\n    overflow: hidden;\r\n    border: none !important;\r\n  }\r\n  \r\n  .leaflet-popup-content {\r\n    margin: 0 !important;\r\n    min-width: 220px;\r\n  }\r\n  \r\n  .leaflet-popup-tip {\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;\r\n  }\r\n  \r\n  .popup-card {\r\n    font-family: 'Poppins', sans-serif;\r\n  }\r\n  \r\n  .popup-banner {\r\n    background: linear-gradient(135deg, #5c2e00, #964B00);\r\n    padding: 16px 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n  }\r\n  \r\n  .popup-banner svg {\r\n    flex-shrink: 0;\r\n  }\r\n  \r\n  .popup-city-name {\r\n    color: #fff;\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n  }\r\n  \r\n  .popup-body {\r\n    padding: 14px 20px 16px;\r\n    background: #fff;\r\n  }\r\n  \r\n  .popup-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    background: #f5ebe0;\r\n    color: #5c2e00;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    padding: 4px 10px;\r\n    border-radius: 12px;\r\n    margin-bottom: 8px;\r\n  }\r\n  \r\n  .popup-badge::before {\r\n    content: '\u2713';\r\n    font-weight: 800;\r\n  }\r\n  \r\n  .popup-desc {\r\n    color: #555;\r\n    font-size: 12.5px;\r\n    line-height: 1.5;\r\n  }\r\n  \r\n  .popup-cta {\r\n    display: block;\r\n    margin-top: 12px;\r\n    padding: 9px 0;\r\n    background: linear-gradient(135deg, #5c2e00, #964B00);\r\n    color: #ffffff !important;\r\n    text-align: center;\r\n    border-radius: 8px;\r\n    font-size: 12.5px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: transform 0.2s, box-shadow 0.2s;\r\n    cursor: pointer;\r\n    border: none;\r\n    width: 100%;\r\n    font-family: 'Poppins', sans-serif;\r\n    -webkit-text-fill-color: #ffffff;\r\n  }\r\n  \r\n  .popup-cta:hover {\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(150,75,0,0.35);\r\n  }\r\n  \r\n  \/* Marker pulse *\/\r\n  .leaf-marker {\r\n    position: relative;\r\n    cursor: pointer;\r\n    transition: transform 0.3s ease;\r\n  }\r\n  \r\n  .leaf-marker:hover {\r\n    transform: scale(1.2);\r\n  }\r\n  \r\n  .leaf-pulse {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n    background: rgba(150, 75, 0, 0.25);\r\n    animation: pulse 2s ease-out infinite;\r\n    pointer-events: none;\r\n  }\r\n  \r\n  @keyframes pulse {\r\n    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }\r\n    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }\r\n  }\r\n  \r\n  .leaflet-popup-close-button {\r\n    color: #fff !important;\r\n    font-size: 20px !important;\r\n    top: 6px !important;\r\n    right: 8px !important;\r\n    z-index: 10;\r\n  }\r\n  \r\n  \/* Responsive *\/\r\n  @media (max-width: 600px) {\r\n    #map { height: 400px; }\r\n    .map-header { padding: 16px 20px; flex-wrap: wrap; }\r\n    .map-header h2 { font-size: 18px; }\r\n    .header-dropdown-wrap { width: 100%; }\r\n    .area-dropdown { width: 100%; min-width: unset; }\r\n    .city-legend { gap: 8px; padding: 12px 16px; }\r\n    .legend-item { font-size: 11.5px; padding: 5px 10px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n \r\n<div class=\"map-wrapper\">\r\n  <div class=\"map-header\">\r\n    <div class=\"header-left\">\r\n      <svg class=\"header-icon\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n        <path d=\"M30 8C30 8 18 14 14 26C10 38 18 50 30 50\" fill=\"rgba(255,255,255,0.25)\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M30 8C30 8 42 14 46 26C50 38 42 50 30 50\" fill=\"rgba(255,255,255,0.4)\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M30 16V50\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n        <circle cx=\"38\" cy=\"12\" r=\"2.5\" fill=\"#FFD700\"\/>\r\n        <circle cx=\"44\" cy=\"18\" r=\"1.8\" fill=\"#FFD700\"\/>\r\n        <circle cx=\"41\" cy=\"8\" r=\"1.5\" fill=\"#FFD700\"\/>\r\n      <\/svg>\r\n      <div>\r\n        <h2>Our Service Areas<\/h2>\r\n        <p>Professional tree services across our active states<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"header-dropdown-wrap\">\r\n      <label>Jump to Area<\/label>\r\n      <select class=\"area-dropdown\" id=\"areaDropdown\">\r\n        <option value=\"\">Select a State...<\/option>\r\n        <option value=\"California\">California<\/option>\r\n        <option value=\"Texas\">Texas<\/option>\r\n      <\/select>\r\n    <\/div>\r\n  <\/div>\r\n    \r\n  <div id=\"map\"><\/div>\r\n    \r\n  <div class=\"city-legend\" id=\"legend\"><\/div>\r\n<\/div>\r\n \r\n<script>\r\n\/\/ \u2500\u2500 State Data \u2500\u2500\r\nconst cities = [\r\n  {\r\n    name: \"California\",\r\n    state: \"CA\",\r\n    lat: 36.7783,\r\n    lng: -119.4179,\r\n    zoom: 6,\r\n    desc: \"Providing expert, professional tree solutions throughout the state of California.\",\r\n    boundary: [\r\n      [42.00, -124.40], [42.00, -120.00], [39.00, -120.00], \r\n      [35.00, -114.60], [32.50, -114.80], [32.50, -117.10], \r\n      [34.00, -119.00], [36.00, -121.50], [38.00, -123.00], \r\n      [40.00, -124.40], [42.00, -124.40]\r\n    ]\r\n  },\r\n  {\r\n    name: \"Texas\",\r\n    state: \"TX\",\r\n    lat: 31.9686,\r\n    lng: -99.9018,\r\n    zoom: 6,\r\n    desc: \"Complete professional tree care coverage throughout the great state of Texas.\",\r\n    boundary: [\r\n      [36.50, -103.00], [36.50, -100.00], [34.00, -100.00],\r\n      [33.50, -94.00], [29.00, -94.00], [29.00, -93.50],\r\n      [26.00, -97.00], [26.00, -99.00], [29.50, -103.00],\r\n      [31.80, -106.50], [32.00, -103.00], [36.50, -103.00]\r\n    ]\r\n  }\r\n];\r\n \r\n\/\/ \u2500\u2500 Custom Leaf Icon SVG \u2500\u2500\r\nfunction createLeafSVG(size = 48) {\r\n  return `\r\n<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<g filter=\"url(#shadow)\">\r\n<path d=\"M28 60C28 60 12 42 16 26C20 10 36 8 40 8C40 8 24 18 22 32C20 46 28 60 28 60Z\" fill=\"#5c2e00\"\/>\r\n<path d=\"M40 58C40 58 56 40 52 24C48 8 32 6 28 6C28 6 44 16 46 30C48 44 40 58 40 58Z\" fill=\"#964B00\"\/>\r\n<path d=\"M36 14C36 14 34 30 34 50\" stroke=\"rgba(255,255,255,0.35)\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n<path d=\"M52 10L54 6L56 10L60 12L56 14L54 18L52 14L48 12Z\" fill=\"#FFD700\"\/>\r\n<path d=\"M60 20L61 17.5L62 20L64.5 21L62 22L61 24.5L60 22L57.5 21Z\" fill=\"#FFA500\"\/>\r\n<circle cx=\"56\" cy=\"7\" r=\"1.5\" fill=\"#FFD700\" opacity=\"0.7\"\/>\r\n<\/g>\r\n<defs>\r\n<filter id=\"shadow\" x=\"-4\" y=\"-2\" width=\"88\" height=\"88\" filterUnits=\"userSpaceOnUse\">\r\n<feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"3\" flood-opacity=\"0.2\"\/>\r\n<\/filter>\r\n<\/defs>\r\n<\/svg>`;\r\n}\r\n \r\n\/\/ \u2500\u2500 Initialize Map \u2500\u2500\r\nconst map = L.map('map', {\r\n  center: [37.0, -108.0],\r\n  zoom: 4,\r\n  zoomControl: false,\r\n  scrollWheelZoom: false,\r\n  attributionControl: true\r\n});\r\n \r\nL.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/light_all\/{z}\/{x}\/{y}{r}.png', {\r\n  attribution: '\u00a9 OpenStreetMap \u00a9 CARTO',\r\n  maxZoom: 19\r\n}).addTo(map);\r\n \r\n\/\/ \u2500\u2500 Store layers \u2500\u2500\r\nconst markers = {};\r\nconst polygons = {};\r\nlet activeCity = null;\r\nlet isSwitching = false; \/\/ Flag to prevent loop mismatch between dropdown transitions and popupclose\r\n \r\n\/\/ \u2500\u2500 Create popup HTML \u2500\u2500\r\nfunction popupHTML(city) {\r\n  return `\r\n<div class=\"popup-card\">\r\n<div class=\"popup-banner\">\r\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 80 80\" fill=\"none\">\r\n<path d=\"M28 60C28 60 12 42 16 26C20 10 36 8 40 8C40 8 24 18 22 32C20 46 28 60 28 60Z\" fill=\"rgba(255,255,255,0.35)\"\/>\r\n<path d=\"M40 58C40 58 56 40 52 24C48 8 32 6 28 6C28 6 44 16 46 30C48 44 40 58 40 58Z\" fill=\"rgba(255,255,255,0.65)\"\/>\r\n<path d=\"M52 10L54 6L56 10L60 12L56 14L54 18L52 14L48 12Z\" fill=\"#FFD700\"\/>\r\n<\/svg>\r\n<div class=\"popup-city-name\">${city.name}<\/div>\r\n<\/div>\r\n<div class=\"popup-body\">\r\n<div class=\"popup-badge\">Active Service Area<\/div>\r\n<div class=\"popup-desc\">${city.desc}<\/div>\r\n<button class=\"popup-cta\" style=\"color:#ffffff !important;\" onclick=\"window.open('https:\/\/trghost.com\/TRGTReeSolutions.com\/contact\/','_blank')\">\r\n      Get a Free Quote \u2192\r\n<\/button>\r\n<\/div>\r\n<\/div>`;\r\n}\r\n \r\n\/\/ \u2500\u2500 Add cities\/states to map \u2500\u2500\r\ncities.forEach((city, i) => {\r\n    \r\n  \/\/ Brown polygon (hidden initially)\r\n  const polygon = L.polygon(city.boundary, {\r\n    color: '#5c2e00',\r\n    weight: 2.5,\r\n    fillColor: '#964B00',\r\n    fillOpacity: 0.0,\r\n    opacity: 0,\r\n    dashArray: '6,4'\r\n  }).addTo(map);\r\n  polygons[city.name] = polygon;\r\n    \r\n  \/\/ Custom marker icon\r\n  const leafIcon = L.divIcon({\r\n    html: `<div class=\"leaf-marker\">\r\n             <div class=\"leaf-pulse\"><\/div>\r\n             ${createLeafSVG(48)}\r\n           <\/div>`,\r\n    iconSize: [48, 48],\r\n    iconAnchor: [24, 40],\r\n    popupAnchor: [0, -36],\r\n    className: ''\r\n  });\r\n    \r\n  \/\/ Marker\r\n  const marker = L.marker([city.lat, city.lng], { icon: leafIcon }).addTo(map);\r\n  marker.bindPopup(popupHTML(city), {\r\n    maxWidth: 260,\r\n    closeButton: true,\r\n    autoPan: true,\r\n    autoPanPaddingTopLeft: [40, 80],\r\n    autoPanPaddingBottomRight: [40, 40],\r\n    keepInView: true\r\n  });\r\n  markers[city.name] = marker;\r\n    \r\n  \/\/ \u2500\u2500 Hover handlers \u2500\u2500\r\n  marker.on('mouseover', function () {\r\n    if (activeCity !== city.name) {\r\n      polygon.setStyle({ fillOpacity: 0.15, opacity: 0.5 });\r\n    }\r\n  });\r\n    \r\n  marker.on('mouseout', function () {\r\n    if (activeCity !== city.name) {\r\n      polygon.setStyle({ fillOpacity: 0.0, opacity: 0 });\r\n    }\r\n  });\r\n    \r\n  \/\/ \u2500\u2500 Click handlers \u2500\u2500\r\n  marker.on('click', function () {\r\n    if (activeCity && activeCity !== city.name) {\r\n      polygons[activeCity].setStyle({ fillOpacity: 0.0, opacity: 0 });\r\n      document.querySelectorAll('.legend-item').forEach(el => el.classList.remove('active'));\r\n    }\r\n      \r\n    activeCity = city.name;\r\n    polygon.setStyle({ fillOpacity: 0.25, opacity: 0.8 });\r\n      \r\n    \/\/ Smooth view adjustment\r\n    map.flyTo([city.lat, city.lng], city.zoom, { duration: 1.2 });\r\n      \r\n    \/\/ Update legend UI\r\n    const legendItems = document.querySelectorAll('.legend-item');\r\n    legendItems.forEach(el => {\r\n      el.classList.toggle('active', el.dataset.city === city.name);\r\n    });\r\n      \r\n    \/\/ Sync dropdown UI\r\n    document.getElementById('areaDropdown').value = city.name;\r\n  });\r\n});\r\n \r\n\/\/ \u2500\u2500 Reset map view on popup close \u2500\u2500\r\nmap.on('popupclose', function () {\r\n  \/\/ If we are actively switching viewports via programmatic action, bypass this view reset logic\r\n  if (isSwitching) return;\r\n\r\n  if (activeCity) {\r\n    polygons[activeCity].setStyle({ fillOpacity: 0.0, opacity: 0 });\r\n    document.querySelectorAll('.legend-item').forEach(el => el.classList.remove('active'));\r\n    document.getElementById('areaDropdown').value = '';\r\n    activeCity = null;\r\n     \r\n    \/\/ Return to global view\r\n    const group = new L.featureGroup(Object.values(markers));\r\n    map.fitBounds(group.getBounds().pad(0.35));\r\n  }\r\n});\r\n \r\n\/\/ \u2500\u2500 Build Legend \u2500\u2500\r\nconst legend = document.getElementById('legend');\r\ncities.forEach(city => {\r\n  const item = document.createElement('div');\r\n  item.className = 'legend-item';\r\n  item.dataset.city = city.name;\r\n  item.innerHTML = `<span class=\"legend-dot\"><\/span>${city.name}`;\r\n  item.addEventListener('click', () => {\r\n    selectCity(city.name);\r\n  });\r\n  legend.appendChild(item);\r\n});\r\n \r\n\/\/ \u2500\u2500 Selection Logic \u2500\u2500\r\nfunction selectCity(cityName) {\r\n  isSwitching = true; \/\/ Block popupclose reset triggers\r\n  markers[cityName].fire('click');\r\n  markers[cityName].openPopup();\r\n  document.getElementById('areaDropdown').value = cityName;\r\n  \r\n  \/\/ Clear layout lockout flag after events sequence executes\r\n  setTimeout(() => {\r\n    isSwitching = false;\r\n  }, 100);\r\n}\r\n \r\n\/\/ \u2500\u2500 Dropdown listener \u2500\u2500\r\ndocument.getElementById('areaDropdown').addEventListener('change', function () {\r\n  const val = this.value;\r\n  if (val && markers[val]) {\r\n    selectCity(val);\r\n  } else if (val === \"\") {\r\n    \/\/ Return to standard view if placeholder row is reselected\r\n    if (activeCity) {\r\n      polygons[activeCity].setStyle({ fillOpacity: 0.0, opacity: 0 });\r\n      map.closePopup();\r\n      document.querySelectorAll('.legend-item').forEach(el => el.classList.remove('active'));\r\n      activeCity = null;\r\n      const group = new L.featureGroup(Object.values(markers));\r\n      map.fitBounds(group.getBounds().pad(0.35));\r\n    }\r\n  }\r\n});\r\n \r\n\/\/ \u2500\u2500 Fit both states nicely on load \u2500\u2500\r\nconst group = new L.featureGroup(Object.values(markers));\r\nmap.fitBounds(group.getBounds().pad(0.35));\r\n<\/script>\r\n \r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>California Proudly Serving Your Local Communities Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library. Tree Care Solutions Lorem Ipsum is simply dummy text of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3278","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/pages\/3278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/comments?post=3278"}],"version-history":[{"count":31,"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/pages\/3278\/revisions"}],"predecessor-version":[{"id":3316,"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/pages\/3278\/revisions\/3316"}],"wp:attachment":[{"href":"https:\/\/trghost.com\/TRGTReeSolutions.com\/wp-json\/wp\/v2\/media?parent=3278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}