Aerogram
aerogramEmbeddable weather
Weather widget catalog
Choose a widget, configure its demo and copy the embedding code for your website.
Embeddable weather
Weather widget for external sites
A compact point-weather card that can be installed on partner pages with one script tag and coordinates.
Live preview
liveJSShadow DOM
APIPOST /api/weather/query
CORSExternal sites
Themedark / light
Route editor widget
Flight route
Add and edit orthodrome waypoints in the table or directly on the map.
<link rel="stylesheet" href="https://web.weather.giscloud.ru/flight_route.css">
<div id="route-editor"></div>
<script src="https://web.weather.giscloud.ru/flight_route_widget.js"></script>
<script>
const route = WeatherFlightRouteWidget.mount({
root: document.getElementById('route-editor'),
waypoints: [
{ lat: 55.751244, lon: 37.618423 },
{ lat: 56.858721, lon: 35.917596, altitudeM: 3050, speedKmh: 226 },
{ lat: 59.934280, lon: 30.335099 }
]
});
</script>Map measurement widget
Distance ruler
Measure segment and cumulative great-circle distances in kilometres or nautical miles.
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.6.0/dist/maplibre-gl.css">
<link rel="stylesheet" href="https://web.weather.giscloud.ru/distance_measure.css">
<div id="distance-map" style="height: 420px"></div>
<div id="distance-ruler" class="widget-distance-measure-panel"></div>
<script src="https://web.weather.giscloud.ru/distance_measure_widget.js"></script>
<script type="module">
import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.6.0/dist/maplibre-gl.mjs';
const map = new maplibregl.Map({
container: 'distance-map',
style: {
version: 8,
sources: { osm: {
type: 'raster',
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256
} },
layers: [{ id: 'osm', type: 'raster', source: 'osm' }]
},
center: [37.618423, 55.751244],
zoom: 5,
zoomLevelsToOverscale: undefined
});
const ruler = window.WeatherDistanceMeasureWidget.mount({
root: document.getElementById('distance-ruler'),
points: [
{ lat: 55.751244, lon: 37.618423 },
{ lat: 56.858721, lon: 35.917596 },
{ lat: 59.934280, lon: 30.335099 }
]
});
ruler.attachMap(map, { primary: true, bindClick: true });
</script>Aviation profile widgets
Aerogram, time section, flight profile and wind by pressure level
Enter a point, forecast time and route to preview the selected aviation widget.
Atmospheric time section
time-sectionShow profile widgets
Flight weather profile
flight-profileShow profile widgets
Wind by pressure level
isobaric-windShow profile widgets
Weather at a point
point-inspectorShow profile widgets
Embedding code
The page generates the same data attributes that can be copied to an external site.
<!-- Configure the fields above and show the widgets to generate embedding code. -->Embed the point weather inspector
Use data-mode="point-inspector", data-lat and data-lon. Optional: data-source="noaa" or "roshydro", data-time (ISO 8601 UTC or Unix seconds), data-level (hPa; 0 = surface), data-lang, data-width and data-height. Recommended size: 1100 × 850 px. The inspector has model, time and level controls and loads published weather layers independently of the host map. Nearby reports: up to 5 per source within 100 km. Forecast tables and charts, aerogram, time section, solar times and OPMET details open inside the frame. Missing sources are shown explicitly. The inspector uses the light portal theme. Direct iframe URL: /profile-widget?mode=point-inspector&lat=55.75&lon=37.62&lang=en. The portal and weather APIs must be accessible to the viewer; embedding does not bypass authorization.
The widget requests the selected model’s published point fields and legacy CKS fields, plus nearby reports. Derived raster diagnostics without point-API support are excluded. The atmospheric profile uses Weather Data Hub; individual sources may be missing for the selected time, level or location. Map-only geometry highlighting is not included.
<div data-weather-portal-widget data-mode="point-inspector" data-lat="55.75" data-lon="37.62" data-lang="ru" data-width="1100" data-height="850"></div><script src="https://web.weather.giscloud.ru/weather-widget.js" defer></script>Profile reference
Profile widget parameters
Point widgets use coordinates. The flight widget uses a JSON waypoint array with canonical metres and kilometres per hour.
AttributeDefaultAllowed valuesPurpose
data-moderequiredaerogram, time-section, flight-profile, isobaric-wind, point-inspectorSelects one of the aviation profile renderers.data-lat / data-lonMoscowlatitude -90...90, longitude -180...180Point used by point profiles and the wind-by-pressure-level widget.data-sourcenoaanoaa, roshydroForecast profile provider.data-timelatest suitable timeUnix seconds or UTC date-timeRequested valid time for point profiles.data-max-height-m140006000...20000Upper altitude of the time and flight profile charts.data-precipitationfalsetrue, falseAdds the optional NOAA PRATE surface-intensity bars to the time-section widget when data is available.data-waypointsrequired for flight-profileJSON array, up to 32 pointsRoute points with lat, lon, optional altitudeM and speedKmh.data-departure-timecurrent UTCUTC date-timeFlight departure time used to calculate ETA for every route sample.data-performance-modeaircraftaircraft, manualUses phase-based aircraft performance or legacy waypoint interpolation.data-aircraft-profilelight-pistonlight-piston, helicopter, turboprop, regional-jet, narrowbody-jetApproximate planning category used by the phase trajectory.data-route-relative-windfalsetrue, falseStarts the flight chart with wind arrows relative to route course.data-themelightlight, darkControls the widget frame and SVG chart theme.data-width / data-height1120 / 920width 320...1280, height 360...960Maximum frame width and fixed iframe height in pixels.Map widget
Configured weather map
Embed an interactive map or globe with a fixed center, zoom, basemap, time, level, and an explicit set of Martin weather layers.
<div data-weather-portal-widget
data-mode="map"
data-lat="55.751244"
data-lon="37.618423"
data-title="Aviation weather"
data-projection="globe"
data-zoom="2"
data-base-style="osm-dark"
data-background="transparent"
data-layers="image_tmp_noaa,noaa_wind_points,metars_noaa,aircraft_reports_noaa"
data-level="SFC"
data-rotation="true"
data-rotation-speed="0.2"
data-sun="true"
data-interactive="true"
data-width="1100"
data-height="480"></div>
<script src="https://web.weather.giscloud.ru/weather-widget.js" defer></script>Map installation
Connect the map in three steps
Add the container where the map should appear, configure it with data attributes, and load the portal script once after all widget containers.
1. Add the container
Create an element with data-weather-portal-widget and set data-mode="map". The script replaces it with an isolated map iframe.
2. Configure the view
Set coordinates, projection, zoom, weather layers, time, and level directly on the container. Omitted values use the defaults listed below.
3. Load the script once
Add weather-widget.js with defer after the containers. One script initializes every weather widget on the page.
Map reference
All map widget parameters
Only data-mode="map" is required. Invalid values are replaced by a safe default or clamped to the supported range.
AttributeDefaultAllowed valuesPurpose
data-moderequiredmapSelects the map widget instead of the current-weather or forecast card.data-lat55.751244-90 ... 90Initial center latitude in decimal degrees.data-lon37.618423-180 ... 180Initial center longitude in decimal degrees.data-titleAviation weather maptext, up to 80 charactersAccessible iframe and map title.data-langenen, ru, de, fr, zhLanguage used by the embedded map status messages.data-projectionglobeglobe, mercatorRenders a 3D globe or a flat Web Mercator map.data-zoom2 globe / 4 mercator0 ... 16Initial MapLibre zoom. Values outside the range are clamped.data-styleweather/weather2weather/weather2, weather/weather, basemap/countries, basemap/osmMartin style used for the weather overlay.data-base-styleosm-lightosm-light, osm-dark, roskadaster-raster, roskadaster-vector, roskadaster-satellite, relief, satellite, customIndependent basemap profile under the weather overlay.data-backgroundtransparent globe / #ffffff mercatortransparent or #RRGGBBCanvas background. Transparent is intended for globe embeds.data-layersimage_tmp_noaa, noaa_wind_points, metars_noaa, aircraft_reports_noaacomma-separated Martin IDs, up to 24Visible Martin filter, style-layer, or source identifiers.data-timesource default timeUnix seconds or UTC date-timeRequests weather data for a selected forecast or observation time.data-levelsource default levelSFC, 10mb ... 1000mb, 1100 ... 1104Vertical level. Available pressure levels depend on source metadata; 1100-1104 are Martin special levels.data-interactivetruetrue/false, 1/0, yes/no, on/offEnables pointer drag and mouse-wheel zoom.data-rotationtrue globe / false mercatortrue/false, 1/0, yes/no, on/offEnables automatic globe rotation. User interaction pauses it temporarily.data-rotation-speed0.350 ... 3 degrees/secondControls automatic globe rotation speed; 0 keeps rotation enabled but stationary.data-sunfalsetrue/false, 1/0, yes/no, on/offShows the current subsolar point on the globe.data-width960280 ... 1280 pixelsMaximum map frame width. The widget still shrinks with its parent.data-height440240 ... 720 pixelsFixed map frame height.data-themedarkdark, lightControls the outer frame colors when the map background is opaque.data-accent#7dd3fc dark / #126d8a light#RRGGBBFocus color of the outer map frame.Layer identifier examples
Layer identifiers come from the selected Martin style and may change as products are added. The examples below cover the portal data groups currently used by map widgets.
Open Map API catalogNOAA fields
image_tmp_noaa, image_pres_noaa, image_tcdc_noaa, image_prate_noaa, image_rh_noaa, noaa_wind_pointsReports
metars_noaa, aircraft_reports_noaaOPMET
airmet, sigmet, gametCKS BUFR
clouds, jet_stream, fronts, turbulence, tropopause, volcanoExamples
City widgets
The same script can render many independent widgets on one page. Each container has its own coordinates, theme, accent, and title.
All cards load live NOAA GFS air temperature at 2 m. The first card shows Moscow.
Install
One snippet for any page
The script renders inside Shadow DOM, requests point weather from this portal, and keeps host page styles isolated.
<div data-weather-portal-widget
data-lat="55.751244"
data-lon="37.618423"
data-title="Moscow"
data-level="2m"
data-sources="image_tmp_noaa"
data-theme="dark"
data-accent="#fbbf24"
data-lang="ru"></div>
<script src="https://web.weather.giscloud.ru/weather-widget.js" defer></script>Forecast widgets
Short forecast cards
Set forecast mode and choose how many future steps to show. The widget reads forecast arrays from the point weather API response.
All cards load live NOAA GFS forecasts of air temperature at 2 m. The first card shows Moscow.
Styling
How to adapt the look
The widget is isolated from the host page by Shadow DOM, so style changes are passed through data attributes.
Theme
Use data-theme="dark" for map-style panels or data-theme="light" for content pages.
Accent color
Use data-accent="#38bdf8" to match the partner site brand color.
Width
Use data-width="620" for forecast tables or leave it empty for a compact current-weather card.
Configuration
Point and forecast widget options
data-latRequired latitude of the forecast point.data-lonRequired longitude of the forecast point.data-titleOptional visible title in the widget header.data-themeOptional visual theme: dark or light.data-accentOptional accent color in #RRGGBB format.data-widthOptional maximum data-card width in pixels, clamped between 260 and 720.data-langOptional language code: en or ru.data-modeOptional data-card mode: current or forecast. Map mode is documented above.data-forecast-countOptional number of future forecast steps to show.data-timeOptional selected weather time as Unix seconds or a UTC timestamp.data-levelOptional weather level, SFC by default.data-sourcesOptional comma-separated Martin raster source list.Custom widget
Build your own component
If the standard script is not enough, request the same point weather API directly and render your own HTML.
Where to send the request
POST https://web.weather.giscloud.ru/api/weather/query
Content-Type: application/json
{
"schema_version": "weather-query-1",
"point": { "lat": 55.751244, "lon": 37.618423 },
"queries": [{
"id": "current", "kind": "samples",
"source": { "model": "noaa" },
"fields": [{
"id": "temperature", "parameter": "air_temperature",
"level": { "type": "height_agl", "value": 2, "unit": "m" }
}]
}]
}What to send
point.lat, point.lonRequired point coordinates in decimal degrees.queries[].timeTime selection object with an ISO 8601 timestamp and timezone; defaults to the currently valid forecast.queries[].fields[].levelTyped physical level, for example height_agl at 2 m or pressure at 850 hPa.queries[].fieldsRequested fields with identifiers, parameter names and typed levels.queries[].source.cidOptional CKS centre identifier, valid only for CKS data.What to read
const result = payload.results.find(item => item.id === 'current');
const fields = new Map((result.fields || []).map(field => [field.id, field]));
for (const sample of result.samples || []) {
for (const value of sample.values) {
const field = fields.get(value.field_id);
if (value.status === 'available') {
console.log(sample.valid_time, value.value, field.unit);
}
}
}