# Map

## Introduction

FATOS map is a JavaScript library that uses WebGL to rendering maps while interacting with users in a vector tile type.

To use "FATOS Map", you must request an API key and then apply that key to the source. If you want an API key, please go to [https://nostramap-console.fatos.biz/](https://nostramap-console.fatos.biz) and request an API key after sign up.

Please let us know if you have any technical problems using our SDK\
Contact : <sales@fatoscorp.com>

![](https://2018858602-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLBVmWUfyMF2uztccpO%2F-MLH6n6_VG6AtuWHf1I1%2F-MLH7mgHlOqyDjv2tBZ3%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-04%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.22.52.png?alt=media\&token=c0f45739-2ee6-483c-9237-8514a7b4f144)

## Description

The map object represents a map of the screen. It provides methods and properties for programmatically changing the map and generating an event when an user interacts with it. Map instance creates a map by specifying containers and other options

| Name            | Description                                                                                                              | Optional |
| --------------- | ------------------------------------------------------------------------------------------------------------------------ | -------- |
| `zoom`          | The zoom value is the zoom in/out value of the map. Not the required input.                                              | `option` |
| `center`        | Center is coordinate value that will be displayed to the center at the first loading of the map and is a required input. | `must`   |
| `maxZoom`       | Maximum zoom value. Not required value.                                                                                  | `option` |
| `minZoom`       | Minimum zoom value. Not required value.                                                                                  | `option` |
| `key`           | Authentication value for map use. Required input value.                                                                  | `must`   |
| `zoomControl`   | The value of the button to adjust the zoom level value of the map. Not required value.                                   | `option` |
| `draggable`     | Whether the marker on the map can be moved to the desired location. Not required value.                                  | `option` |
| `rotateControl` | This option lets you interact with the rotation of the map by dragging it. Not required value.                           | `option` |
| `tilt`          | The slope of the map. The range from 0 to 60 and the initial value is zero(0).                                           | `option` |

## Example

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FATOS Map</title>
</head>
<body>
<div style="height: 100vh;">
    <div id="app"></div>

</div>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
    let LatLng = {lat: 1.28516, lng: 103.84738}
    let mapInstance = new fatosmap.maps.Map(
        document.getElementById("app"),
        {
            zoom: 14,
            center: LatLng,
            maxZoom: 20,
            minZoom: 2,
            key: 'YOUR_API_KEY'
        }
    )
</script>
</body>
</html>
```
