User Tools

Site Tools

Trace: • thinkgeo_cloud_javascript_sdk_quick_start_guide

Sidebar

ThinkGeo Cloud

ThinkGeo UI Controls

ThinkGeo Open Source

Help and Support

External Resources

thinkgeo_cloud_javascript_sdk_quick_start_guide

This is an old revision of the document!

Table of Contents

ThinkGeo Cloud JavaScript SDK Quick Start Guide

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.

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: 

<!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>
NOTE:

ThinkGeo Cloud Service key Access to ThinkGeo Cloud services, including Vector Tile data, requires an API Key that connects API requests to your account, Please check here on how to create your own ThinkGeo Cloud Service key FOR FREE.

Understanding how it works

To use ThinkGeoCloudClient-js in a web page you will need 3 things:

  1. Include ThinkGeoCloudClient.js
  2. JavaScript to create a query from ThinkGeo Cloud Server
  3. JavaScript to create a request to ThinkGeo Cloud Server

Include ThinkGeoCloudClient.js

CDN:

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

JavaScript to create a request to ThinkGeo Cloud Server

Create a ReverseGeocodingClient object with Your-Cloud-Service-Api-Key. 

var reverseGeocodingClient = new tg.ReverseGeocodingClient('Your-Cloud-Service-Api-Key');

The 'searchPlaceByPoint' is an API to searche for locations around a point. The default projection is 'EPSG:4326'. 

reverseGeocodingClient.searchPlaceByPoint(33.128367, -96.809847, function (status, response){
});

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. 

<div id="response"></div>

Attach the response to div in callback 

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:

ClassDescription
tg.ElevationClientA class provides the methods to access the Elevation APIs.
tg.MapsClientA class provides the methods to access the Maps APIs.
tg.ProjectionClientA class that provides the methods to access the GIS Server Projection APIs.
tg.GeocodingClientA class provides the methods to access the Geocoding APIs.
tg.ReverseGeocodingClientA class provides the methods to access the ReverseGeocoding APIs.
tg.ColorClientA class provides the methods to access the ColorUtilities APIs.

Here is a dramatic example.

thinkgeo_cloud_javascript_sdk_quick_start_guide.1547707318.txt.gz · Last modified: 2019/01/17 06:41 by johnnyz

Page Tools