Quick start

Step 1. Get an API key

In Mappable Account, log in or create a new account. The main page will display a key that will work for any Mappable service.

Note

The key is activated within 15 minutes after you receive it.

Step 2. Connect the API

Create an HTML page and, inside <head>, add the <script> tag that 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>

Replace YOUR_API_KEY with the key you obtained in step 1.

More about connecting the API

Step 3. Create a container

Add a block-level element, such as <div>, inside <body>. You need to set a non-zero size to the element, the map will fill it completely.

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

Note

Setting id="map" to the container, as shown in the example, is optional.

In the example, we used id to initialize the map inside that container in the next step. However, you can do this without id if you pass a link to the HTMLElement of the container in the next step. Choose whichever method you like best.

Step 4. Initialize a map

Add the following JS code to the page in any way you like.

initMap();

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

    const {MMap, MMapDefaultSchemeLayer} = mappable;

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

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

                // Scale level
                zoom: 10
            }
        }
    );

    // Add a layer for displaying the schematic map
    map.addChild(new MMapDefaultSchemeLayer());
}

Note

The mappable.ready promise guarantees that all components of the core JavaScript API module are loaded and the DOM is built.

To load packages or modules, use the mappable.import method.

More about map initialization parameters

Full text of the example

Load this page in your browser to 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>
Previous
General information
Next
Connecting the API