Quick Start Guide for JavaScript Maps SDK

Prerequisites

The following are prerequisites for this guide.

Knowledge of JavaScript^® and HTML
A valid API key. Authentication of the key is discussed in About API Key
The JavaScript Maps SDK package needs to be obtained from https://git.location.studio/location.studio/JSSDK/tree/master

About API Key

The API key is used to track API requests of the project for usage and billing. API key often acts as a unique identifier and a secret token for authentication. The API key can be requested by filling details and submitting the form at https://locationstudio.zendesk.com/hc/en-us/requests/new?ticket_form_id=360001758513.

Quick Start Steps

Use the following quick start steps to start using the JavaScript Maps SDK.

Getting the SDK

To obtain the JavaScript Maps SDK:

Go to https://git.location.studio/location.studio/JSSDK/tree/master.
Register or sign in to your existing Comtech Location Studio^® Git account.
If you created a new account, access it by clicking the Confirm your account link in the email sent to the registered email ID.
On the home page, click on the download icon to obtain the JavaScript SDK zip package. As an alternative, you can clone the repository to your local system using the following command.

git clone https://git.location.studio/location.studio/JSSDK.git

After you have downloaded and extracted the zip package or cloned the repository, follow the steps described in the next sections to begin using the SDK.

Getting Started

Loading the API Code Libraries through Creating a Basic Map show how to add a basic map to a sample JavaScript application.

Loading the API Code Libraries

The first step for the JavaScript Maps SDK application is to load the necessary code libraries or modules. You will load the modules by adding the following <script> elements.

An application can be created by including all dependencies on the main page, referred to as index.html, in this guide. It includes gssmaps.min.js, as shown in the following code snippet.

<script type="text/javascript" src="/gssmaps.min.js"></script>

Initializing the Map

The map application in the following scenario displays an interactive map centered on a predefined location at a fixed zoom level. The following example shows initialization of the map. Complete source code for initializing a map is given in Complete HTML Example.

Instantiate the Map object, specifying:

The map container element
The map style to use
The zoom level setting, at which map is displayed
The geographic coordinates of the point, on which to center the map

As an example, the following JavaScript code sets up a Map object with default mapStyle, zoom level 6, and the map center as a location near Denver, given by latitude 40.6101, and longitude -110.3421:

<script>
	    var options = { center: [40.6101, -110.3421],
	    zoom: 6,
	 	mapStyle:"default"};
    	var gssMap = new gssmaps.GSSMap('PUT_YOUR_API_KEY_HERE', 'map', options);
</script>

Creating a Basic Map

Use the following code snippet to create a basic map container for displaying tiles.

var gssMap = new gssmaps.GSSMap('<PUT_YOUR_API_KEY_HERE>', 'map');

The figure shows a basic map.

Figure 1. Basic Map

Complete HTML Example

Following is the complete source code that implements the scenario in Initializing the Map.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript Maps SDK Demo</title>
  </head>
  <body>
    <style>
	html, body {
		width: 100%;
		height: 95%;
	}
    #map {
		width: 95%;
		height: 90%;
		margin-left:auto;
		margin-right:auto;
	}
	.center{
		text-align:center;

	}
    </style>
    <h1 class="center">JavaScript Maps SDK Example</h1>
    <div id="map"></div>

    <script type="text/javascript" src="/gssmaps.min.js"></script>
    <script>
	    var options = { center: [40.6101, -110.3421],
	 				    zoom: 6,
	 				    mapStyle:"default"};
    	var gssMap = new gssmaps.GSSMap('PUT_YOUR_API_KEY_HERE', 'map', options);
     </script>
  </body>
</html>

JavaScript SDK