react-mapsgl
react-mapsgl is a React wrapper for our MapsGL service and SDK, a Javascript SDK that allows you to easily customize and integrate a variety of high-quality, vector-based weather data, imagery, and visualizations into your applications and custom solutions.
Supported Mapping Libraries
MapsGL supports the following third-party mapping libraries:
- Mapbox (direct or via react-mapbox-gl)
- Maplibre
- Google Maps
- Leaflet
Getting Started
yarn add @aerisweather/react-mapsgl
Examples
ES6 with react-mapbox-gl:
import React, { useState } from 'react';
import ReactMapboxGL from 'react-mapbox-gl';
import * as mapsgl from '@aerisweather/mapsgl';
import ReactMapsGL, {
Timeline,
WeatherLayer,
DataInspector,
LegendControl
} from '@aerisweather/react-mapsgl';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@aerisweather/mapsgl/dist/mapsgl.css';
// Mapbox factory
const Map = ReactMapboxGL({
accessToken: `MAPBOX_TOKEN`
});
// MapsGL factory
const MapController = ReactMapsGL({
accessKeys: {
id: `AERIS_CLIENT_ID`,
secret: `AERIS_CLIENT_SECRET`
}
});
interface Props {
center?: { lat: number; lon: number; };
zoom?: number;
}
const MapView = ({
center = { lat: 40, lon: -93 },
zoom = 3
}: Props): React.ReactElement => {
const [map, setMap] = useState<any>();
const [playing, setPlaying] = useState(false);
// store the Mapbox map reference when loaded so it can be provided to the MapsGL controller
const onMapLoad = (mapEl: any) => {
setMap(mapEl);
};
return (
<>
<Map
center={[center.lon, center.lat]}
zoom={[zoom]}
onStyleLoad={onMapLoad}
style='mapbox://styles/mapbox/light-v9'
containerStyle={{
width: '800px',
height: '600px'
}}
>
<MapController strategy="mapbox" map={map}>
<Timeline
start={new Date(Date.now() - (3600 * 12 * 1000))}
duration={6}
isPlaying={playing}
onPlay={() => console.log('playing')}
onStop={() => console.log('stopped')}
/>
<DataInspector event="move" />
<LegendControl />
<WeatherLayer id="temperatures" quality={mapsgl.DataQuality.low} paint={{
sample: {
colorscale: {
interval: 1,
interpolate: false
}
}
}} />
<WeatherLayer id="wind-particles" />
</MapController>
</Map>
</>
);
};
export default MapView;
Custom Layers
The following example adds a custom GeoJSON data source and associated layers to the map, similar to the example from our documentation.
import React, { useState } from 'react';
import ReactMapboxGL from 'react-mapbox-gl';
import * as mapsgl from '@aerisweather/mapsgl';
import ReactMapsGL, {
Source,
Layer
} from '@aerisweather/react-mapsgl';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@aerisweather/mapsgl/dist/mapsgl.css';
// Mapbox factory
const Map = ReactMapboxGL({
accessToken: `MAPBOX_TOKEN`
});
// MapsGL factory
const MapController = ReactMapsGL({
accessKeys: {
id: `AERIS_CLIENT_ID`,
secret: `AERIS_CLIENT_SECRET`
}
});
interface Props {
center?: { lat: number; lon: number; };
zoom?: number;
}
const MapView = ({
center = { lat: 40, lon: -8 },
zoom = 5
}: Props): React.ReactElement => {
const [map, setMap] = useState<any>();
// store the Mapbox map reference when loaded so it can be provided to the MapsGL controller
const onMapLoad = (mapEl: any) => {
setMap(mapEl);
};
return (
<>
<Map
center={[center.lon, center.lat]}
zoom={[zoom]}
onStyleLoad={onMapLoad}
style='mapbox://styles/mapbox/light-v9'
containerStyle={{
width: '800px',
height: '600px'
}}
>
<MapController strategy="mapbox" map={map}>
<Source
id="country-region"
type="geojson"
options={{
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
type: 'Sovereign country',
name: 'Portugal',
continent: 'Europe',
region_un: 'Europe',
subregion: 'Southern Europe',
region_wb: 'Europe & Central Asia'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[-9.034817674180246, 41.88057058365967],
[-8.67194576662672, 42.13468943945496],
[-8.263856980817792, 42.28046865495034],
[-8.013174607769912, 41.790886135417125],
[-7.422512986673795, 41.79207469335983],
[-7.251308966490824, 41.91834605566505],
[-6.668605515967656, 41.883386949219584],
[-6.389087693700915, 41.381815497394655],
[-6.851126674822552, 41.11108266861753],
[-6.864019944679385, 40.33087189387483],
[-7.026413133156595, 40.184524237624245],
[-7.066591559263529, 39.71189158788277],
[-7.498632371439725, 39.62957103124181],
[-7.098036668313128, 39.03007274022378],
[-7.374092169616318, 38.37305858006492],
[-7.029281175148796, 38.07576406508977],
[-7.166507941099865, 37.803894354802225],
[-7.537105475281024, 37.42890432387623],
[-7.453725551778092, 37.09778758396607],
[-7.855613165711985, 36.83826854099627],
[-8.382816127953689, 36.97888011326246],
[-8.898856980820327, 36.86880931248078],
[-8.746101446965554, 37.65134552667661],
[-8.839997524439879, 38.26624339451761],
[-9.287463751655224, 38.3584858261586],
[-9.526570603869715, 38.73742910415491],
[-9.446988898140232, 39.39206614842837],
[-9.048305223008427, 39.75509308527877],
[-8.977353481471681, 40.15930613866581],
[-8.768684047877102, 40.76063894303019],
[-8.79085323733031, 41.18433401139126],
[-8.99078935386757, 41.54345937760364],
[-9.034817674180246, 41.88057058365967]
]
]
}
}]
}
}}
/>
<Layer
id="region-fill"
type="fill"
sourceId="country-region"
paint={{
fill: {
color: '#ff0000',
opacity: 0.5
}
}}
/>
<Layer
id="region-outline"
type="line"
sourceId="country-region"
paint={{
stroke: {
color: '#ff0000',
thickness: 5
}
}}
/>
</MapController>
</Map>
</>
);
};
export default MapView;
Example Project
For basic examples of how to use React MapsGL with the different third-party mapping libraries currently supported, run the project under the /examples directory:
> cd ./examples
> yarn install
> yarn develop
You will need to rename .env.txt to .env at the root of this repo and add the necessary AerisWeather and third-party mapping keys before running yarn develop.
Open the examples/src/index.ts file and swap out the rendered component based on your desired mapping library:
import { createRoot } from 'react-dom/client';
import ReactMapboxMap from './ReactMapboxMap';
// import MapboxMap from './MapboxMap';
// import MaplibreMap from './MaplibreMap';
// import GoogleMap from './GoogleMap';
// import LeafletMap from './LeafletMap';
const container = document.querySelector('#app');
const root = createRoot(container!);
root.render(<ReactMapboxMap />);
Usage
Since React MapsGL is written in Typescript, you can refer to the options interface corresponding to each component that's part of the library within the src/ directory (e.g. MapControllerOptions, DataInspectorControlOptions, LegendControlOptions and TimelineOptions) for the list of supported properties and their requirements.
Also refer to the MapsGL documentation for the complete usage documentation and information regarding working with and using MapsGL.
MapsGL Resources
Use the following MapsGL resources to learn more about the SDK and the wide range of customization options, or to view a variety of demos and examples:
Support
For issues and feature requests related to this react-mapsgl library, please submit a Github issue.
For all MapsGL-specific support, submit a new ticket with any questions, bug reports or feature suggestions you have. You can also reach out to us on Twitter at @AerisWeather.