Skip to content

Overview

Note

The maps API is still experimental. If you encounter any issues or have any feedback, please let us know.

Display the map of the world using vector tiles on the web or mobile applications.

Getting Started

Before you can start using the maps, you need an API key. If this key is going to be exposed in a client-side application, you should use a different key than the one you use for server-side applications and ensure that you restrict the key to allowed domains.

Below is an example of how to set up the map using Maplibre GL.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maplibre</title>
    <!-- Maplibre -->
    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
</head>

<body style="margin: 0; padding: 0;">
    <div id="map" style="height: 100vh; background-color: pink"></div>    
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://apis.influxlab.io/maps/map/v1/styles/streets', // stylesheet location
            center: [-0.128237, 51.518415], // starting position [lng, lat]
            zoom: 10 // starting zoom
        });
    </script>
</body>

</html>

Because the API requests require an API key through the Authorization header, you need to use a transformRequest function to add the key to the requests. Replace YOUR_API_KEY with your actual key.

    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://apis.influxlab.io/maps/map/v1/styles/streets', // stylesheet location
            center: [-0.128237, 51.518415], // starting position [lng, lat]
            zoom: 10, // starting zoom
            transformRequest: ( url, resourceType ) =>
            {
                if ( url.startsWith ('https://apis.influxlab.io/maps/map/' ) )
                {
                    return {
                        url,
                        headers: { Authorization: 'Bearer YOUR_API_KEY' }
                    }
                }

                return { url };
            }
        });
    </script>

Styles

Styles are used to define the appearance of the map. They are defined in JSON format and can be hosted on a server or loaded directly from an URL. Styles contain information about the layers, sources and other visual properties of the map.

Two styles are currently available:

Style Description
streets streets Vector tiles with a light background and a focus on streets.
satellite satellite A style that shows satellite imagery.