JavaScript API

Quick start

  1. Get an API key
  2. Connect the API
  3. Create a container
  4. Create a map

Step 1. Get an API key

Go to the Mappable Account and register a new account or log in to an existing. The main page will display a key that is suitable for any Mappable service.

Note

Key activation takes up to 15 minutes.

Step 2. Connect the API

Create an HTML page and add the <script> tag inside the <head>. It will load the 'JS API' to the page.

<head>
  ...
  <script src="https://js.api.mappable.world/v3/?apikey=YOUR_API_KEY&lang=en_US"></script>
  ...
</head>

Instead of YOUR_API_KEY, substitute the key obtained in step 1.

More about connecting the API

Step 3. Create a container

Inside the <body> add a block-type element, for example <div>. It is important to create a nonzero-sized visible container, the map will fill it completely.

<body>
  ...
  <div id="map" style="width: 600px; height: 400px"></div>
  ...
</body>

Note

It is not necessary to set the container id="map", as shown in the example.

In the example, we used id to initialize the map inside this container in the next step. But you can do this without the id if you pass a link to the HTMLElement of the container in the next step. Do as is convenient for you.

Step 4. Create a map

In any way convenient for you, connect the following js code to the page.

initMap();

async function initMap() {
    // The `mappable.ready` promise will be resolved when all the API components are loaded
    await mappable.ready;

    const {MMap, MMapDefaultSchemeLayer} = mappable;

    // Map creation
    const map = new MMap(
        // Pass the link to the HTMLElement of the container
        document.getElementById('map'),

        // Pass the initialization parameters
        {
            location: {
                // The map center coordinates
                center: [25.229762, 55.289311],

                // Zoom level
                zoom: 10
            }
        }
    );

    // Add a layer to display the schematic map
    map.addChild(new MMapDefaultSchemeLayer());
}

More about creating a map

Full text of the example

Load this page in the browser and you will see the map.

<!DOCTYPE html>
<html>
  <head>
    <title>Quick start. Placing an interactive map on the web page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://js.api.mappable.world/v3/?apikey=YOUR_API_KEY&lang=en_US"></script>
    <script>
        initMap();

        async function initMap() {
            await mappable.ready;

            const {MMap, MMapDefaultSchemeLayer} = mappable;

            const map = new MMap(
                document.getElementById('map'),
                {
                    location: {
                        center: [25.229762, 55.289311],
                        zoom: 10
                    }
                }
            );

            map.addChild(new MMapDefaultSchemeLayer());
        }
    </script>
  </head>

  <body>
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

Note

The promise maps 3.ready ensures that all components of the main module Javascript API are loaded and the DOM is built.

To download packages or modules use the mappable.import method.

In this article: