First, receive a token or API key for your project through the Geobox portal. Read managing accounts and access tokens for instructions on how to register and obtain token or api key.
Get from CDN
Add the CSS file to the <head> tag:
<link rel="stylesheet" href="https://api.geobox.ir/libs/geobox-gl/geobox-gl.min.css">
Add the JavaScript file to the beginning of the <body> tag:
<script type="text/javascript" src="https://api.geobox.ir/libs/geobox-js/geobox.min.js"></script> <script type="text/javascript" src="https://api.geobox.ir/libs/geobox-gl/geobox-gl.min.js"></script>
Get the JavaScript library
First, download the JavaScript library from the download page, and then follow the steps:
Add the CSS file to the <head> tag:
<link rel="stylesheet" href="./css/geobox-gl.min.css">
Add the JavaScript file to the beginning of the <body> tag:
<script type="text/javascript" src="./js/geobox.min.js"></script> <script type="text/javascript" src="./js/geobox-gl.min.js"></script>
The structure of the example is as follows:
root ├── css │ ├── geobox-gl.min.css ├── js │ ├── geobox.min.js │ ├── geobox-gl.min.js └── index.html
Finally, by creating the mentioned structure and the following code, after running the project, the following output will be displayed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://api.geobox.ir/libs/geobox-gl/geobox-gl.min.css">
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://api.geobox.ir/libs/geobox-js/geobox.min.js"></script>
<script type="text/javascript" src="https://api.geobox.ir/libs/geobox-gl/geobox-gl.min.js"></script>
</body>
</html>
#map{
width:100vw;
height:100vh;
}
body{
margin:0;
padding:0;
}
const server = new Geobox.Server({origin:'https://api.geobox.ir'});
server.accessToken = "<your access token here>";
const map = new geoboxgl.Map('map', server, <userId here>);
See the Pen Contact Form – Pen a Day 20 by geobox (@geobox-gl-demo) on CodePen.1
The above map is a blank map that tools, maps, and published layers can be displayed on it.