Embed the map

Add the maintained GPUQuant infrastructure map to an article, dashboard or company site. Choose its view, filters, interactions and exact colors in a JavaScript object. Publishers need no GPUQuant account or API key.

Quick start#

Add a container, load the script, then call GPUQuant.embed(selectorOrElement, options). All options are optional. This example fills the container’s width with a 520-pixel-tall map.

<div id="map"></div>
<script src="https://gpuquant.com/embed/v1.js"></script>
<script>
  GPUQuant.embed('#map', {
    height: 520,
    theme: 'dark'
  });
</script>

The call returns the created iframe. You can pass an element instead of a selector and mount several maps in separate containers. Load the script once; call it after each container exists. Calling it again for the same container replaces the iframe it previously created there. Missing containers and invalid selectors throw a TypeError.

Filters and interaction#

Filters choose which data appears. Their lock, their visible controls, point popups and hover are separate settings. A locked map can still open records; disabling popups does not disable hover. The default filters are locked and their controls are hidden.

GPUQuant.embed('#map', {
  filters: {
    gpus: ['h100', 'b200'],
    providers: ['aws', 'gcp'],
    siteTypes: ['datacenter'],
    locked: true
  },
  controls: { filters: true },
  interaction: { popups: true, hover: true }
});

This displays the selected filters read-only while keeping popups and hover available. Use filters.locked: false with controls.filters: true to let readers change them. Use interaction.popups: false to stop clicks selecting sites or regions and opening their panels. Set interaction.hover: false separately to remove hover feedback.

filters.gpus and filters.providers affect published cloud-region prices. Selecting AWS does not restrict the facility layer to buildings operated by AWS. Use filters.siteTypes to choose facility types, or an empty array to hide that layer. An empty GPU or provider array hides region prices while leaving selected facility types available.

Omitted filter arrays include all supported values. An explicit [] includes none. Mixed valid and unknown identifiers keep the valid ones; an entirely invalid, nonempty array falls back to all supported values. Identifiers are case-sensitive.

All defaults#

Pass only the options you want to change. null for the initial center or zoom leaves framing automatic, using the selected destination when one is available. An empty colors object keeps the selected theme’s colors.

{
  theme: 'dark',
  view: {
    projection: 'globe',
    center: null,
    zoom: null,
    minZoom: 0,
    maxZoom: 22
  },
  selection: null,
  filters: {
    gpus: ["h100","b200","h200","a100-80gb"],
    providers: ["aws","azure","gcp","oracle"],
    siteTypes: ["datacenter","fab","equipment","assembly","headquarters","office"],
    priceRange: [0.6, 1.4],
    locked: true
  },
  interaction: {
    pan: true,
    zoom: true,
    rotate: false,
    hover: true,
    popups: true,
    scrollZoom: false
  },
  controls: {
    filters: false,
    legend: true,
    zoom: true,
    fullscreen: true,
    relationships: true
  },
  colors: {},
  width: '100%',
  height: 520,
  borderRadius: 12,
  borderColor: 'transparent',
  title: 'GPUQuant infrastructure map'
}

Option reference#

These options configure the map inside the frame. Unsupported options are ignored; invalid values use the validated defaults.

Use the slug from a record’s URL for a facility or place; use provider/region-code for a region. For example, these are three separate selections:

{ selection: { kind: 'facility', value: 'asml-veldhoven' } }
{ selection: { kind: 'place', value: 'london' } }
{ selection: { kind: 'region', value: 'aws/eu-west-2' } }

A named selection needs an available location or priced shape. An unavailable selection is explained in the map instead of being placed at guessed coordinates. Explicit view.center and view.zoom let you frame a particular area.

The loader also accepts these options for the iframe itself:

Numeric sizes are pixels. Size strings may use px, %, vh, vw or rem, such as '65vh'. Percentage height needs a parent with a defined height. Layout options are separate from the map’s colors.border and are set as iframe attributes or styles in the plain iframe form. Arbitrary CSS, HTML and external basemap URLs are not options.

Exact colors#

Each color accepts #RGB or #RRGGBB. For example, '#abc' is equivalent to '#aabbcc'. Use literal hex colors; CSS variables, color names, RGB functions and alpha hex values are not accepted. Unspecified colors retain the selected theme.

GPUQuant.embed('#map', {
  theme: 'light',
  colors: {
    background: '#f4f1e8',
    land: '#f4f1e8',
    water: '#dae8ef',
    panel: '#ffffff',
    text: '#24303a',
    accent: '#2255cc',
    datacenter: '#7655bb',
    priceLow: '#207a5b',
    priceMid: '#c6a94e',
    priceHigh: '#be4455'
  }
});

The legend uses the same overridden colors as the map. Changing colors does not change price calculations or location precision. Choose colors that keep labels legible and the price scale distinguishable; the map methodology explains what each mark represents.

Plain iframe#

A CMS that allows iframes can use the hosted map without loading the JavaScript loader. Put map options in one config query parameter as URL-encoded JSON:

'https://gpuquant.com/embed/map?config=' +
  encodeURIComponent(JSON.stringify({
    theme: 'light',
    filters: { siteTypes: ['datacenter'], locked: true }
  }))

This is the resulting copyable iframe, with the JSON already encoded:

<iframe
  src="https://gpuquant.com/embed/map?config=%7B%22theme%22%3A%22light%22%2C%22filters%22%3A%7B%22siteTypes%22%3A%5B%22datacenter%22%5D%2C%22locked%22%3Atrue%7D%7D"
  title="GPUQuant infrastructure map"
  width="100%"
  height="520"
  loading="lazy"
  allow="fullscreen"
  style="border: 0; border-radius: 12px;"
></iframe>

For all defaults, use https://gpuquant.com/embed/map as the source. Put theme, view, selection, filters, interaction, controls and colors inside the JSON object. Set width, height, border and title on the iframe itself. Do not append separate ?theme= or ?facility= parameters as configuration.

Updates and credit#

The embed uses the same maintained data as the full map, with an hourly refresh schedule. New data appears on the next frame load after it becomes available; an already-open frame does not continuously poll. The embed needs no publisher login, API key, cookies or storage, and your page’s CSS does not restyle the map inside the frame.

GPUQuant credit and source attribution remain available inside the map. Its GPUQuant, facility, company, place and region links are normal followed links that open a new tab. Open full map carries the current view and filters into the full map. Map interactions do not add entries to the publisher page’s browser history. No extra backlink is injected into your page or required beside the frame.

CMS and troubleshooting#