{"id":5996,"date":"2022-12-28T15:41:24","date_gmt":"2022-12-28T12:11:24","guid":{"rendered":"https:\/\/en.geobox.ir\/developers\/?post_type=docs&p=5996"},"modified":"2023-01-19T16:31:44","modified_gmt":"2023-01-19T13:01:44","slug":"quick-installation-2","status":"publish","type":"docs","link":"https:\/\/en.geobox.ir\/developers\/docs\/geobox-api-for-leaflet\/quick-installation-2\/","title":{"rendered":"Quick installation"},"content":{"rendered":"

First, receive a token or API key for your project through the Geobox portal<\/a>. Read managing accounts and access tokens<\/a> for instructions on how to register and obtain token or api key.<\/p>\n

Get from CDN<\/h3>\n

Add the CSS file to the <head> tag:<\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/api.geobox.ir\/libs\/geobox-leaflet\/geobox-leaflet.min.css\">\r\n\r\n<\/pre>\n
Add the JavaScript file to the beginning of the <body> tag:<\/p>\n
<script type=\"text\/javascript\" src=\"https:\/\/api.geobox.ir\/libs\/geobox-js\/geobox.min.js\"><\/script>\r\n<script type=\"text\/javascript\"\u00a0src=\"https:\/\/api.geobox.ir\/libs\/geobox-leaflet\/geobox-leaflet.min.js\"><\/script><\/pre>\n
Get the JavaScript library<\/h3>\n
First, download the JavaScript library from the download page<\/a>, and then follow the steps:<\/p>\n
Add the CSS file to the <head> tag:<\/p>\n
<link rel=\"stylesheet\" href=\".\/css\/geobox-leaflet.min.css\">\r\n\r\n<\/pre>\n
Add the JavaScript file to the beginning of the <body> tag:<\/p>\n
<script type=\"text\/javascript\" src=\".\/js\/geobox.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\".\/js\/geobox-leaflet.min.js\"><\/script><\/pre>\n
The structure of the example is as follows:<\/p>\n
root\r\n\u251c\u2500\u2500 css\r\n\u2502 \u251c\u2500\u2500 geobox-leaflet.min.css\r\n\u251c\u2500\u2500 js\r\n\u2502 \u251c\u2500\u2500 geobox.min.js\r\n\u2502 \u251c\u2500\u2500 geobox-leaflet.min.js\r\n\u2514\u2500\u2500 index.html<\/pre>\n
After creating the mentioned structure, you have access to the \u00abGL\u00bb object, which includes methods and properties.(It should be noted that you can directly access the leaflet library by using the L variable.)<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/api.geobox.ir\/libs\/geobox-leaflet\/geobox-leaflet.min.css\">\r\n<\/head>\r\n<body>\r\n    <div id=\"map\"><\/div>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/api.geobox.ir\/libs\/geobox-js\/geobox.min.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/api.geobox.ir\/libs\/geobox-leaflet\/geobox-leaflet.min.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
#map{\r\n   width:100vw;\r\n   height:100vh;\r\n}\r\nbody{\r\n   margin:0;\r\n   padding:0;\r\n}<\/pre>\n
const server = new Geobox.Server({origin:'https:\/\/api.geobox.ir'}); \r\nserver.accessToken = \"<your access token here>\"; \r\nconst map = new GL.Map('map');<\/pre>\n
\nSee the Pen Contact Form \u2013 Pen a Day 20<\/a> by geobox (@geobox-gl-demo<\/a>) on CodePen<\/a>.1<\/p>\n