ThinkGeo Cloud JavaScript SDK Quick Start Guide

Create a basic web application with CloudClient.js

In this walkthrough, you will learn how to create a basic web application with CloudClient.js. You should have some familiarity with HTML/CSS and JavaScript, but the source code is provided. Any operating system or text editor will work, but you will need an internet connection while you are working (Take GeoCoding Service as example).

Step 1: Create an API Key

CloudClient.js requires an API key for access to ThinkGeo Cloud services, it can be created following the “Client Keys Guide”. For help, see the API Reference.

Step 2: Create an index page

To get started making your application with Cloud Service, you need to use a text editor to update the HTML.

Start your text editor with a blank document “index.html” and copy and paste the following HTML.

     <!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8">
       </head>
       <body>
       </body>
     </html>

In the <head> tag, add a title, such as <title>My Cloud Service Sample</title>.
In the <body> tag, add a DIV to show the response from Cloud Services.

After all the above, the HTML document should look as below:

   <code javascript>
   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
       <title>My Cloud Service Sample</title>
     </head>
     <body>
       <div id="response"></div>
     </body>
   </html>
   </code>

Step 3: Add references JavaScript files

To get started using CloudClient.js, you need to link to the JS files in the '' section. Both NPM or CDN provides the minified version, which is a compressed file that improves performance.

CDN

Load from CDN in your project:

<!-- latest minified version of thinkgeocloudclient.js -->
<script src="https://cdn.thinkgeo.com/cloudclient-js/1.0.0/thinkgeocloudclient.js"></script>

NPM

Install the package:

    npm i thinkgeocloudclient-js

Include it to your page:

    <!-- latest minified version of thinkgeocloudclient.js -->
    <script src="path/to/dist/thinkgeocloudclient.js"></script>

Step 4: At the bottom of your page, add a JavaScript section to consume the services.

    let reverseGeocodingClient = new tg.ReverseGeocodingClient('Your-Cloud-Service-Api-Key');
 
    // Find the ThinkGeo office address by coordinate
    reverseGeocodingClient.searchPlaceByPoint(33.128367, -96.809847, function (status, response) {
 
       if (response.data.bestMatchLocation) {
          let address = response.data.bestMatchLocation.data.address;
 
          document.getElementById('response').innerHTML = address;
       }
    })

More Client Class

After include ThinkGeoCloudClient.js, you can find there is a namespace tg short for ThinkGeo. Currently, there are 6 Client Classes in tg:

Class	Description
tg.ElevationClient	A class provides the methods to access the Elevation APIs.
tg.MapsClient	A class provides the methods to access the Maps APIs.
tg.ProjectionClient	A class that provides the methods to access the GIS Server Projection APIs.
tg.GeocodingClient	A class provides the methods to access the Geocoding APIs.
tg.ReverseGeocodingClient	A class provides the methods to access the ReverseGeocoding APIs.
tg.RoutingClient	A class provides the methods to access the Routing APIs.
tg.ColorClient	A class provides the methods to access the ColorUtilities APIs.

Here is an online sample.

Sidebar

Table of Contents

ThinkGeo Cloud JavaScript SDK Quick Start Guide

Create a basic web application with CloudClient.js

More Client Class

User Tools

Site Tools

Sidebar

Table of Contents

ThinkGeo Cloud JavaScript SDK Quick Start Guide

Create a basic web application with CloudClient.js

More Client Class

Page Tools