ThinkGeo Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== ThinkGeo Cloud JavaScript SDK Quick Start Guide ======

<div msgbox>The ThinkGeo Cloud JavaScript SDK Quickstart Guide will guide you through the process of creating a sample in any web page and will help you become familiar with ThinkGeo Cloud JavaScript SDK.</div>

The purpose of this guide is to help you quickly get started building your own spatially aware web page with ThinkGeo Cloud. Like any new software, there is some learning to be done along the way.

How do we start to learn how to take advantage of the power of ThinkGeo Cloud? The best way is to make a sample application with it.
\\

===== Create a web page =====
Let's start with a new web page. Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:

<code JavaScript>
<!doctype html>
<html lang="en">

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

<body>
    <h2>My Cloud Service Sample</h2>
    <div id="response"></div>
    <script type="text/javascript">
        var 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;
            }
        })
    </script>
</body>

</html>
</code>

===== Understanding how it works =====

To use ThinkGeoCloudClient-js in a web page you will need 3 things:
  - Include ThinkGeoCloudClient.js
  - JavaScript to create a query from ThinkGeo Cloud Server
  - JavaScript to create a request to ThinkGeo Cloud Server

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

==== JavaScript to create a request to ThinkGeo Cloud Server ====

Create a ReverseGeocodingClient object with Your-Cloud-Service-Api-Key.
<code javascript>
var reverseGeocodingClient = new tg.ReverseGeocodingClient('Yy6h5V0QY4ua3VjqdkJl7KTXpxbKgGlFJWjMTGLc_8s~');
</code>

The 'searchPlaceByPoint' is an API to searche for locations around a point. The default projection is 'EPSG:4326'.
<code javascript>
reverseGeocodingClient.searchPlaceByPoint(33.128367, -96.809847, function (status, response){
});
</code>
//parameters://
  * The Y coordinate of the point.
  * The X coordinate of the point.
  * The callback function after the response from ThinkGeo Cloud Server.



==== Display the response from ThinkGeo Cloud Server ====

Add a div to attach the response.
<code javascript>
<div id="response"></div>
</code>
Attach the response to div in callback
<code>
function (status, response){
    if (response.data.bestMatchLocation) {
        let address = response.data.bestMatchLocation.data.address;
        document.getElementById('response').innerHTML = address;
    }
}
</code>

===== 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.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.ColorClient|A class provides the methods to access the ColorUtilities APIs.|


[[http://cloudclientsamples.thinkgeo.com/|Here]] is a dramatic example.
User Tools

Site Tools

Page Tools
