Weather Portal

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://web.weather.giscloud.ru/vendor/maplibre/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/vendor/maplibre/maplibre-gl.js"></script>
<script src="https://web.weather.giscloud.ru/distance_measure_widget.js"></script>
<script>
  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
  });
  const ruler = 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 and flight profile

Enter a point, forecast time and route to render all three reusable widgets directly on this page.

Flight profile

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. -->

Profile reference

Profile widget parameters

Point widgets use coordinates. The flight widget uses a JSON waypoint array with canonical metres and kilometres per hour.

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.

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.

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-theme="dark"
     data-accent="#fbbf24"
     data-lang="ru"></div>

<script src="https://web.weather.giscloud.ru/weather-widget.js" defer></script>

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.

What to read

{
  "ok": true,
  "requested_time": "2026-07-08T12:00:00Z",
  "sources": [
    {
      "parameter": "tmp",
      "value": 18.4,
      "unit": "[C]",
      "forecasts": [
        { "time": "2026-07-08T15:00:00Z", "value": 19.2, "unit": "[C]" }
      ]
    }
  ]
}

Weather widget for external sites

Flight route

Distance ruler

Aerogram, time section and flight profile

Widget input data

Aerogram

Atmospheric time section

Flight weather profile

Embedding code

Profile widget parameters

Configured weather map

Connect the map in three steps

1. Add the container

2. Configure the view

3. Load the script once

All map widget parameters

Layer identifier examples

City widgets

One snippet for any page

Short forecast cards

How to adapt the look

Theme

Accent color

Width

Point and forecast widget options

Build your own component

Where to send the request

What to send

What to read