Differences

This shows you the differences between two versions of the page.

--- thinkgeo_cloud_javascript_sdk_quick_start_guide [2019/01/17 05:52]
johnnyz [Create a web page]
+++ thinkgeo_cloud_javascript_sdk_quick_start_guide [2019/07/02 06:59] (current)
kevinwan [More Client Class]
@@ Line 1: / Line 1: @@
 ====== 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.
+===== 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).
-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.
+**Step 1:** Create an API Key
-\\
-===== Create a web page =====
+CloudClient.js requires an API key for access to ThinkGeo Cloud services, it can be created following the "[[thinkgeo_cloud_client_keys_guideline|Client Keys Guide]]". For help, see the [[https://cloud.thinkgeo.com/help/|API Reference]].
-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>
+**Step 2:** Create an index page
-    <!-- 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>
+To get started making your application with Cloud Service, you need to use a text editor to update the HTML.
-    <h2>My Cloud Service Sample</h2>
+  * Start your text editor with a blank document "index.html" and copy and paste the following HTML.
-    <div id="response"></div>
+     <code javascript>
-    <script type="text/javascript">
+     <!DOCTYPE html>
-        var reverseGeocodingClient = new tg.ReverseGeocodingClient('Yy6h5V0QY4ua3VjqdkJl7KTXpxbKgGlFJWjMTGLc_8s~');
+     <html>
+       <head>
+         <meta charset="utf-8">
+       </head>
+       <body>
+       </body>
+     </html>
+     </code>
+  * 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.
-        // Find the ThinkGeo office address by coordinate
+After all the above, the HTML document should look as below:
-        reverseGeocodingClient.searchPlaceByPoint(33.128367, -96.809847, function (status, response) {
+     <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>
-            if (response.data.bestMatchLocation) {
+**Step 3:** Add references JavaScript files
-                let address = response.data.bestMatchLocation.data.address;
-                document.getElementById('response').innerHTML = address;
+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.
-            }
-        })
-    </script>
-</body>
-</html>
+**CDN**
+Load from CDN in your project:
+<code javascript>
+<!-- latest minified version of thinkgeocloudclient.js -->
+<script src="https://cdn.thinkgeo.com/cloudclient-js/1.0.0/thinkgeocloudclient.js"></script>
 </code>
+**NPM**
+  * Install the package:
+<code javascript>
+    npm i thinkgeocloudclient-js
+</code>
+  * Include it to your page:
+<code javascript>
+    <!-- latest minified version of thinkgeocloudclient.js -->
+    <script src="path/to/dist/thinkgeocloudclient.js"></script>
+</code>
+**Step 4:** At the bottom of your page, add a JavaScript section to consume the services.
+<code javascript>
+    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;
+       }
+    })
+</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.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.|
+[[https://samples.thinkgeo.com/cloud|Here]] is an online sample.

User Tools

Site Tools

Differences

Page Tools