Quick start
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.
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());
}
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.