Quick start: MapLibre GL JS

npm install @updraft/maps [email protected]

<div id="map" style="height: 70vh"></div>
<script type="module" src="./main.js"></script>

// Updraft quick start 1: MapLibre GL JS + the Updraft "pilot eye" vector style + the thermal grid.
// npm install @updraft/maps [email protected]
import { Map as MapLibreMap, NavigationControl, ScaleControl } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import { updraftMapOptions } from '@updraft/maps/maplibre';

// setThermalFilter(map, { month, hourBucket, windSector }) points the style's `thermals` source at
// a breakdown; thermalsUrl(filter) gives its TileJSON address.
export { setThermalFilter } from '@updraft/maps/maplibre';
export { thermalsUrl } from '@updraft/maps';

/**
 * Creates the map. `apiKey` is optional: with a key (scope `tiles`) every request to the Updraft
 * tile server, and only to it, carries the `X-Api-Key` header and counts towards your key's usage;
 * without one the public tile path is used, which is limited per client address.
 * `updraftMapOptions` also keeps the attribution box open ("© Updraft · © OpenStreetMap
 * contributors · © OpenMapTiles · Copernicus DEM" must stay visible).
 * @param {object} options
 * @param {HTMLElement | string} options.container
 * @param {string} [options.apiKey]    key with the `tiles` scope (header, never in the URL)
 * @param {'light' | 'dark'} [options.theme]  published style; default light
 * @param {string} [options.style]     your own style URL instead
 * @param {string} [options.tilesUrl]  Updraft tile server root; default https://maps.updraftmaps.com
 * @param {[number, number]} [options.center] [longitude, latitude]
 * @param {number} [options.zoom]
 * @returns {MapLibreMap}
 */
export function createUpdraftMap(options) {
  const map = new MapLibreMap(updraftMapOptions(options));
  map.addControl(new NavigationControl(), 'top-right');
  map.addControl(new ScaleControl({ unit: 'metric' }), 'bottom-left');
  return map;
}

// Usage:
//   const map = createUpdraftMap({ container: 'map', apiKey: 'upd_…' });
//   map.on('load', () => setThermalFilter(map, { month: 7, hourBucket: 6, windSector: 6 }));

import { setWorkerUrl } from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
import { createUpdraftMap, setThermalFilter } from './updraft-map.js';

// MapLibre 6 loads its worker from a separate file; with a bundler give its address (Vite):
setWorkerUrl(workerUrl);

const map = createUpdraftMap({ container: 'map', apiKey: 'upd_…' }); // the key is optional
map.on('load', () => {
  // July, 12:00–14:00 local time, wind from the west
  setThermalFilter(map, { month: 7, hourBucket: 6, windSector: 6 });
});