MapsGL - Examples
The code for all of the MapsGL examples below can be found in the public Github repository where you can find instructions on how to run the examples locally.
Getting Started
Map library integrations and core weather layer setup.
Using MapsGL with Mapbox GLUse MapsGL with a Mapbox GL map.Using MapsGL with MaplibreUse MapsGL with a Maplibre map.Using MapsGL with Google MapsUse MapsGL with a Google Maps map.Using MapsGL with LeafletUse MapsGL with a Leaflet map.Using MapsGL with Mapbox GL globe projectionUse MapsGL with a Mapbox globe.Using MapsGL with Maplibre globe projectionUse MapsGL with a Maplibre globe.Compare forecast model temperaturesToggle one or more forecast models for temperatures over the United States.Controlling layer orderingStack weather layers with slots and pin an underlay band below Mapbox style layers.Adding a day/night overlayShade the map with twilight and night, then adjust overlay opacity.
Styling Weather Layers
Recoloring and reshaping the continuous fields the built-in weather layers draw: color scales, draw ranges, particle motion, and custom shaders.
Customizing radar color scaleApply a custom color scale to the precipitation type radar layer.Customizing temperature colorsApply a custom color scale to the temperature layer.Adjusting temperature draw range in real timeAdjust the colorized draw range for encoded raster data in real time.Create a freeze layerUse a custom color scale to highlight frost/freeze temperatures.Create a wind speed categories layerUse a custom color scale for wind speed to show categorical winds.Customizing wind particlesUse a custom color scale and particle settings with the wind particles layer.Adjusting particle draw range in real timeAdjust the particle draw range for encoded raster data in real time.Custom earthquake symbols using a shaderUse a custom WebGL fragment shader to apply unique and animated visual effects to earthquake data.Custom fire symbols using a shaderUse a custom WebGL fragment shader to apply a realistic fire effect to wildfire data.Custom lightning symbols using a shaderUse a custom WebGL fragment shader to create a custom effect for lightning strike data.
Features & Filtering
Vector layers, where both the styling and the choice of what to draw are expressions evaluated against each feature’s own properties.
Custom alert stylesUse custom alert layer styles to show different alert levels.Custom lightning strike stylingCustomize the appearance of lightning strike data based on strike age.Filter weather alerts by categoryFilter weather alerts based on alert category in real-time.
Masking Data
Clip weather or custom layers to built-in land and water masks, or one or more vector layers as a single mask, including toggling the mask at runtime.
Adding a land mask to a raster layerAdd a land mask to a raster tile layer on the map.Toggle a layer mask at runtimeSwitch a temperatures layer between land, water, and no mask without removing the layer.
Animation
Set up timeline animation controlsSet up map timeline animation controls to allow the user to control playback and view the current animation progress.Change timeline rangeUpdate the timeline start and/or end date range in real-time.Preload animated weather dataPreload animation data for active weather layers when the map is initialized so that playback can begin immediately without having to wait for animation data to load.
Legends, Units & Readouts
Reading values back off the map: legends, map units, and labelling points with sampled layer values.
Customizing the heat index legendUpdate the default heat index legend with custom labels.Setting map unitsSet the default units of data displayed on the map.Change map unitsChange units of data displayed on the map in real time.Temperature text labels using GeoJSON placesQuery temperature data for the top 100 cities in the US and display their values on the map.Wind speed text labels using custom GeoJSONQuery wind speed data from custom GeoJSON locations and display their values on the map.
Your Own Data
Sources MapsGL knows nothing about — your own tiles, geometry and imagery — added alongside the weather layers.
Adding a custom raster layerAdd a custom raster tile layer to the map.Adding a custom vector tile layerAdd a custom vector tile layer to the map.Add a custom GeoJSON layerAdd custom static GeoJSON data to the map.Add a Nextzen cities text layerAdd city text labels from a Nextzen vector tile source scaled by population.