Pan, zoom, and click any marker for facility details. Toggle layers to view coverage zones, facility locations, and route corridors independently. Star markers indicate HQ facilities with pulsing animation. Dot markers show state coverage points across the continental US.

Eight major delivery corridors radiate from Edgewood HQ to key distribution hubs. Routes are color-coded by frequency: cobalt for daily, tufts for weekly, jordy for monthly. Click any route for distance, transit time, and temperature zone data.

ECharts choropleth map showing order density by state. States colored in cobalt gradient -- lighter shades indicate fewer orders, darker shades indicate higher volume. Hover any state for detailed order volume and percentage of total. Top 5 states: NY, NJ, PA, CT, MA.

ECharts map showing temperature zones across the delivery network. Three zones: Cold (0-34F, blue), Cool (35-45F, teal), Ambient (46-70F, light blue). Scatter points on map indicate monitoring stations with simulated real-time temperature readings that update automatically.

Focused view of the Northeast warehouse network with building icons, square footage data, coverage radius overlays (100mi, 200mi, 300mi), connection lines between warehouses, and info panels showing capacity, temperature capabilities, and dock count.

Interactive ECharts horizontal bar chart showing top 20 states. Bars use cobalt-to-jordy gradient. Click any bar for a detail popup. Use sort toggles to view by volume, growth rate, or customer count.

Colored polygon overlays showing delivery timeframes from Edgewood HQ. Same-day (green, ~50mi), next-day (blue, ~200mi), 2-day (teal, ~500mi), and 3-5 day (light blue, nationwide). The concentric zones illustrate the GFS delivery promise from origin.

Enter any US address to find the nearest GFS distribution center, estimated transit time, and delivery zone classification. The calculator uses Haversine distance to determine the optimal routing DC.

All GFS portals using interactive maps must follow these tile layer, marker, and popup standards to maintain visual consistency with the brand system.

<!-- CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- CSS: Blue-tinted tiles -->
<style>
  .leaflet-tile-pane {
    filter: saturate(0.3) hue-rotate(200deg) brightness(1.1);
  }
  .leaflet-popup-content-wrapper {
    border-radius: 4px !important;
    border: 1px solid #D9E1EA !important;
    box-shadow: 0 2px 8px rgba(9,47,100,0.08) !important;
  }
</style>

<!-- Map container -->
<div id="gfs-map" style="width:100%;height:400px;"></div>

<script>
const map = L.map('gfs-map').setView([39.8, -98.5], 4);
L.tileLayer(
  'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
  { attribution: '&copy; CartoDB', subdomains: 'abcd', maxZoom: 19 }
).addTo(map);

// GFS cobalt circle marker
L.circleMarker([40.759, -73.162], {
  radius: 10, fillColor: '#092F64', color: '#fff',
  weight: 2, fillOpacity: 0.9
}).addTo(map).bindPopup('Edgewood HQ');
</script>

Six compact reference maps for quick regional overviews. Simplified state outlines with GFS-branded markers showing facility locations and coverage areas.