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-leaflet/geobox-leaflet.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-leaflet/geobox-leaflet.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-leaflet.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-leaflet.min.js"></script>
The structure of the example is as follows:
root ├── css │ ├── geobox-leaflet.min.css ├── js │ ├── geobox.min.js │ ├── geobox-leaflet.min.js └── index.html
After creating the mentioned structure, you have access to the «GL» object, which includes methods and properties.(It should be noted that you can directly access the leaflet library by using the L variable.)
<!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-leaflet/geobox-leaflet.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-leaflet/geobox-leaflet.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 GL.Map('map');
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.