How to Create an Extension: Open a Google Map

This tutorial will show you how to open a Google Map using a given set of coordinates. These coordinates come from the results set you get after executing a query in TeamSQL.

Prerequisites

Before you begin, you must install:

  • TeamSQL. You must also have a TeamSQL account that you use to log into your TeamSQL account -- if you don't already have one, you'll be prompted to create an account the first time you launch TeamSQL
  • Node.js. Node.js comes with npm, but because the latter is updated more frequently, you'll want to make sure that you're using the most up-to-date version
  • TypeScript

Install the TeamSQL CLI

You can install the TeamSQL CLI by running the following command:

npm i -g @teamsqlio/teamsql-cli

Next, you'll need to log in with your TeamSQL credentials. Begin the login process by running

teamsql-cli login

You'll be prompted for your username and password. Be sure to use the same set of credentials you're using to log in to your local instance of TeamSQL.

Create Your Extension

The easiest way to begin creating an extension is to clone the Context Menu template provided as a starter for you.

Navigate to the disk location where you want to work on your extension. Run the following command to clone the Context Menu template:

teamsql-cli create

You'll be prompted to choose a template. If Context Menu appears, press Enter (or Return) to begin the process of cloning extension-context-menu-template.

Once you receive a message that the cloning process is complete, you can begin working on your extension.

The extension-context-menu-template Repository Contents

All extension project folders must contain, at a minimum, the four following files in the root:

  • README.MD: Markdown file containing well-written description of your extension, as well as pertinent images, usage instructions, and so on. If we approve your extension and it becomes available in the TeamSQL Extension Store, this file's content will be used as the description.
  • icon.png: An icon (512px x 512px) in PNG format to be used with your extension
  • index.js: The main file of your extension (we will conver the specifics required in this file later on in this tutorial)
  • package.json: File containing configuration information about your npm package

Writing Your Extension

The code for your extension goes into the index.js file, which you will later compile into TypeScript for installation.

There are several different classes that allow you to implement functionality where your extension interacts with or takes advantage of data available in the TeamSQL environment. For the most part, you do not have to utilize these classes if not necessary. The exception to this is your main class, which must extend the Extension class and implement one of the interfaces available via the TeamSQL Extension SDK.

export class TeamSQLExtension extends Extension implements IExtensionContextMenu {
    ...
    ...
}

All of the code implementing your extension's functionality should reside within this class. More specifically, here's one way of implementing this extension:

import { Extension } from "@teamsqlio/ts-extension-sdk/dist/source/Extension";
import { IExtensionContextMenu } from "@teamsqlio/ts-extension-sdk/dist/source/interfaces/groups/IExtensionContextMenu"
import { MenuItem } from "@teamsqlio/ts-extension-sdk/dist/source/menu/MenuItem"
import { DataGridCellContainer } from "@teamsqlio/ts-extension-sdk/dist/source/data/DataGridCellContainer"
import { DataGridCell } from "@teamsqlio/ts-extension-sdk/dist/source/data/DataGridCell"
import { IMenuItemAction } from "@teamsqlio/ts-extension-sdk/dist/source/interfaces/menu/IMenuItemAction"
import * as fs from "fs";
import * as path from "path";
import * as url from "url";

/*
    Your extensions' main class must be named TeamSQLExtension and extend the Extension class. For a Context Menu extension, you must implement the IExtensionContextMenu interface.
*/

export class TeamSQLExtension extends Extension implements IExtensionContextMenu {

    /*
        The IExtensionContextMenu interface has the getMenu():Array<MenuItem> function, which returns a MenuItem array. You must implement the behavior of this function.
    */

    getMenu(): Array<MenuItem> {
        let me = this;

        // Initialize an empty MenuItem array
        let menu = new Array<MenuItem>();
        let showMenuFunction: IMenuItemAction;

        let menuItem = new MenuItem("Show in Google Maps", null, (selectedData: DataGridCellContainer[], allData: DataGridCellContainer[]) => {
            if (selectedData !== null && selectedData !== undefined && Array.isArray(selectedData) && selectedData.length === 1 && selectedData[0].cells.length === 2) {
                // get the longitudinal and latitudinal values
                var lat = selectedData[0].cells[0].value;
                var lng = selectedData[0].cells[1].value;
                var result = lat + "," + lng;

                // Check that the coordinates are valid
                var reg = /-?([1-8]?[1-9]|[1-9]0)\.{1}\d{1,},-?([1-8]?[1-9]|[1-9]0)\.{1}\d{1,}/;

                if (reg.exec(result)) {
                    //do nothing
                } else {
                    this.showAlert("First item must be latitude then longitude.");
                    return;
                }

                // Create a coordinates set from returned values to pass to Google
                var result = lat + "," + lng;
                var mapsURL = "http://www.google.com/maps/place/" + result;

                // Use the openURL function to open a browser to Google Maps
                this.openURL(mapsURL);
            }
            else {
                this.showAlert("Select only 2 cells, first item must be latitude then longitude.");
            }
        });
        menu.push(menuItem);
        return menu;
    }
}

Prepare for Installation

Now that you've created the extension, you'll need to perform the following steps to prepare it for installation.

  1. In the extension's root, install the required npm packages for this tutorial by running npm install

  2. Build the extension project with TypeScript by running tsc -p .

  3. At this point, you're ready to install the extension. You can do so by running the following command: teamsql-cli submit --install. If the installation was successful, you're ready to use your extension!

Use the Extension

After launching TeamSQL and connecting to the database of your choice, you'll execute a query where the returned data includes at least one set of coordinates.

After you've run a query, you can select the two cells containing the coordinates of the location you want to map. Typically, you'll have the longitudinal coordinates in one cell and the latitudinal coordinates in the adjacent cell to the right. Right-click on your selection. Using the Show in Google Maps extension, you can have TeamSQL open a new browser window that displays a Google Map centered around the location you specified.

results matching ""

    No results matching ""