Merging MapLibreJS and Terrier For Stunning Map Rendering

Written by Steve Gifford

September 25, 2023

We’ve fully integrated Terrier for Web with MapLibreJS. The above image shows Terrier’s radar layer.

MapLibre is our favorite, and our contracting side is doing some work for MapLibre Native. But this is unrelated, and it’s for the web.

Much like the Leaflet integration, this is our complete weather rendering engine ported over to the web but integrated with MapLibreJS.

MapLibre Developer Perspective

Adding Terrier to your MapLibre app is easy. It looks a little something like this.

// Tell Terrier to hook itself into MapLibre
Terrier.startMapLibre(stackName, newMap, (ovl) => {
    // Turn on radar as a layer
    let tempLayer = ovl.startLayer('radar', {
        interpMode: 'linear',
        opacity: 0.5,
        importFactor: 5.0,
    })
})

As a customer, you provide the stackName there and the MapLibreJS map that you’ve created. We’ll do the rest.

MapLibre is fairly flexible, and you can control where our Terrier layer goes if you need to. Just reach out to ask how.

Integration Process

Integration is fairly easy on our side, as MapLibreJS is a WebGL map. It has a nice Custom Layer interface, and once you figure out the matrix for positioning, it’s easy for another WebGL toolkit like Terrier to work with it. And the vector maps sure do look good!

MapBox Support

Integration with Mapbox’s JS toolkit looks almost exactly the same, for customers who want to use Mapbox instead.