Create an Interactive Map App Using MapLibre

The AerisWeather JavaScript SDK is a powerful tool that allows developers to create custom interactive weather map applications using many third-party mapping libraries, the newest of which is MapLibre. This post will illustrate how you can create an Interactive Map App using MapLibre and the AerisWeather JavaScript SDK.

What is MapLibre?

MapLibre is an open-source fork of Mapbox, which is already supported in the AerisWeather JavaScript SDK along with other third-party mapping libraries such as Leaflet and Google Maps.

What You’ll Need

To follow along with this tutorial, you’ll need the following:

• An AerisWeather API subscription or free trial
  • Don’t have an account yet? Start your free trial here.
• Working knowledge of HTML, CSS, and JavaScript

Creating Feature-Rich Map Applications With MapLibre

Luckily, it’s easy to create an Interactive Map App using MapLibre. Simply pass ‘maplibre’ as your strategy property in the map config:

map: {
    strategy: 'maplibre',
    style: 'https://demotiles.maplibre.org/style.json',
    zoom : 4,
    layers : 'radar'
},

Notice we are providing a style value to the config as well; this one can be found in the MapLibre example docs. A style property is required to use MapLibre with the AerisWeather JavaScript SDK Interactive Map App.

Updating Basemap Style

If you’d like to change your basemap from MapLibre’s default, you can accomplish this with a basemap tile server. Here is an example of using the Maptiler API instead:

style: https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_HERE

Final Thoughts

Ready to build custom interactive weather maps? Sign up for a free 30-day trial and get started today. For more information on the AerisWeather Javascript SDK and the many features it provides, check out our documentation. MapLibre is also available as a base map in our Interactive Map App Wizard. Happy Coding!

Share this post: