.elementor-562323 .elementor-element.elementor-element-6870fd3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:2em;--margin-bottom:2em;--margin-left:0em;--margin-right:0em;}.elementor-562323 .elementor-element.elementor-element-68bb76b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-562323 .elementor-element.elementor-element-4fc3dce .elementor-heading-title{font-family:var( --e-global-typography-d052485-font-family ), Sans-serif;font-size:var( --e-global-typography-d052485-font-size );font-weight:var( --e-global-typography-d052485-font-weight );text-transform:var( --e-global-typography-d052485-text-transform );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-675dd8c{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );color:var( --e-global-color-secondary );}.elementor-562323 .elementor-element.elementor-element-19037a6 .elementor-heading-title{font-family:var( --e-global-typography-d052485-font-family ), Sans-serif;font-size:var( --e-global-typography-d052485-font-size );font-weight:var( --e-global-typography-d052485-font-weight );text-transform:var( --e-global-typography-d052485-text-transform );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-9116f32{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-562323 .elementor-element.elementor-element-83e7f83{z-index:1;}.elementor-562323 .elementor-element.elementor-element-195f22b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-562323 .elementor-element.elementor-element-064d202{--display:flex;}.elementor-562323 .elementor-element.elementor-element-064d202:not(.elementor-motion-effects-element-type-background), .elementor-562323 .elementor-element.elementor-element-064d202 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-a291686 );}:root{--page-title-display:none;}@media(max-width:1366px){.elementor-562323 .elementor-element.elementor-element-4fc3dce .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-675dd8c{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-562323 .elementor-element.elementor-element-19037a6 .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}}@media(max-width:1024px){.elementor-562323 .elementor-element.elementor-element-4fc3dce .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-675dd8c{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-562323 .elementor-element.elementor-element-19037a6 .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-195f22b{--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}}@media(max-width:767px){.elementor-562323 .elementor-element.elementor-element-4fc3dce .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-675dd8c > .elementor-widget-container{margin:0em 0em -1em 0em;}.elementor-562323 .elementor-element.elementor-element-675dd8c{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-562323 .elementor-element.elementor-element-19037a6 .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-195f22b{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-562323 .elementor-element.elementor-element-064d202{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-562323 .elementor-element.elementor-element-68bb76b{--width:40%;}.elementor-562323 .elementor-element.elementor-element-9116f32{--width:60%;}}@media(min-width:2400px){.elementor-562323 .elementor-element.elementor-element-4fc3dce .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}.elementor-562323 .elementor-element.elementor-element-675dd8c{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-562323 .elementor-element.elementor-element-19037a6 .elementor-heading-title{font-size:var( --e-global-typography-d052485-font-size );line-height:var( --e-global-typography-d052485-line-height );letter-spacing:var( --e-global-typography-d052485-letter-spacing );}}/* Start custom CSS for html, class: .elementor-element-83e7f83 */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USA Map with Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/leaflet-geojson-vt"></script>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
        .state-label {
            font-size: 14px;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px black;
            pointer-events: none;
        }
        .faded {
            filter: grayscale(90%) opacity(50%);
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([37.8, -96], 4);
        
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            className: 'faded'
        }).addTo(map);

        var stateAbbreviations = {
            "Alabama": "AL", "Alaska": "AK", "Arizona": "AZ", "Arkansas": "AR", "California": "CA", "Colorado": "CO", "Connecticut": "CT", "Delaware": "DE", "Florida": "FL", "Georgia": "GA", "Hawaii": "HI", "Idaho": "ID", "Illinois": "IL", "Indiana": "IN", "Iowa": "IA", "Kansas": "KS", "Kentucky": "KY", "Louisiana": "LA", "Maine": "ME", "Maryland": "MD", "Massachusetts": "MA", "Michigan": "MI", "Minnesota": "MN", "Mississippi": "MS", "Missouri": "MO", "Montana": "MT", "Nebraska": "NE", "Nevada": "NV", "New Hampshire": "NH", "New Jersey": "NJ", "New Mexico": "NM", "New York": "NY", "North Carolina": "NC", "North Dakota": "ND", "Ohio": "OH", "Oklahoma": "OK", "Oregon": "OR", "Pennsylvania": "PA", "Rhode Island": "RI", "South Carolina": "SC", "South Dakota": "SD", "Tennessee": "TN", "Texas": "TX", "Utah": "UT", "Vermont": "VT", "Virginia": "VA", "Washington": "WA", "West Virginia": "WV", "Wisconsin": "WI", "Wyoming": "WY"
        };

        fetch('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json')
            .then(response => response.json())
            .then(data => {
                L.geoJson(data, {
                    style: function (feature) {
                        return {
                            fillColor: '#4e7089',
                            weight: 2,
                            opacity: 1,
                            color: 'white',
                            fillOpacity: 0.7
                        };
                    },
                    onEachFeature: function (feature, layer) {
                        let stateName = feature.properties.name;
                        let stateAbbr = stateAbbreviations[stateName] || '?';
                        
                        let label = L.divIcon({
                            className: 'state-label',
                            html: stateAbbr,
                            iconSize: null
                        });
                        
                        let center = layer.getBounds().getCenter();
                        L.marker(center, { icon: label, interactive: false }).addTo(map);
                        
                        layer.bindTooltip(stateName, {permanent: false, direction: 'center'});
                        
                        layer.on('click', function () {
                            map.fitBounds(layer.getBounds());
                        });
                    }
                }).addTo(map);
            });

        var locations = [
            { lat: 33.320, lon: -111.880, name: "Chandler, AZ", url: "/office/chandler-arizona/" },
            { lat: 33.379, lon: -111.755, name: "Gilbert, AZ", url: "/office/gilbert-arizona/" },
            { lat: 28.599, lon: -81.356, name: "Winter Park, FL", url: "/office/winter-park-florida/" },
            { lat: 33.900, lon: -84.480, name: "Atlanta, GA", url: "/office/atlanta-georgia/" },
            { lat: 43.466, lon: -112.034, name: "Idaho Falls, ID", url: "/office/idaho-falls-idaho/" },
            { lat: 47.675, lon: -116.781, name: "Coeur d'Alene, ID", url: "/office/coeur-dalene-idaho/" },
            { lat: 43.617, lon: -116.200, name: "Boise, ID", url: "/office/boise-idaho/" },
            { lat: 41.256, lon: -95.937, name: "Omaha, NE", url: "/office/omaha-nebraska/" },
            { lat: 34.221, lon: -77.912, name: "Wilmington, NC", url: "/office/wilmington-north-carolina/" },
            { lat: 39.952, lon: -75.165, name: "Philadelphia, PA", url: "/office/philadelphia-pennsylvania/" },
            { lat: 34.852, lon: -82.394, name: "Charleston, SC", url: "/office/charleston-south-carolina/" },
            { lat: 32.779, lon: -96.802, name: "Dallas, TX", url: "/office/dallas-texas/" },
            { lat: 29.760, lon: -95.369, name: "Houston, TX", url: "/office/houston-texas/" },
            { lat: 30.508, lon: -97.678, name: "Round Rock, TX", url: "/office/round-rock-texas/" },
            { lat: 40.760, lon: -111.891, name: "Salt Lake City, UT", url: "/office/salt-lake-city-utah/" },
            { lat: 37.104, lon: -113.584, name: "St. George, UT", url: "/office/st-george-utah/" },
            { lat: 47.606, lon: -122.332, name: "Seattle, WA", url: "/office/seattle-washington/" },
            { lat: 43.073, lon: -89.401, name: "Madison, WI", url: "/office/madison-wisconsin/" },
            { lat: 44.024, lon: -88.542, name: "Oshkosh, WI", url: "/office/oshkosh-wisconsin/" }
        ];

        locations.forEach(function (location) {
            L.marker([location.lat, location.lon], {
                title: location.name,
                icon: L.icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png',
                    iconSize: [20, 32]
                })
            }).addTo(map).on('click', function () {
                window.location.href = location.url;
            });
        });
    </script>
</body>
</html>/* End custom CSS */