Location Report (Script)

Table of contents

Getting started
- Installation
- Usage
API Reference
- Methods
- Options

New

Available in the US and Canada

Table of contents

Getting started
- Installation
- Usage
API Reference
- Methods
- Options

The Location Report provides a comprehensive summary of scores, points of interest, demographics, and more, for any location in the US or Canada. The report can be shared by URL or printed as a PDF.

The script provides a headless experience for downloading or launching a preview window of the report. This is ideal for clients who want to build their own UI.

Getting started

Installation

First, install the script with npm, yarn, or pnpm:

npm i --save @local-logic/lat-client

yarn add @local-logic/lat-client

pnpm add @local-logic/lat-client

You can also access the package with the UNPKG CDN: https://www.unpkg.com/@local-logic/lat-client@<VERSION>/dist/index.<FORMAT>.js

<VERSION> is the latest script version number, and <FORMAT> is either umd or es. You can get the latest version by going to https://www.unpkg.com/@local-logic/lat-client.

<script
  async
  src="https://www.unpkg.com/@local-logic/lat-client@1.2.0/dist/index.umd.js"
  onload="myInitLATFunc()"
></script>

Usage

Step 1: Instantiate an `LatClient` instance

Import LatClient and create a new instance. If you installed LatClient using a script tag, you must access it from the window object.

import LatClient from "@local-logic/lat-client";
const latClient = LatClient(
  // Your API key or token
    <API_KEY>,
  {
    lat: 45.52813, // Your address latitude
    lng: -73.5981, // Your address longitude
    addressLabel: "5605 Av. de Gaspé #304, Montreal, Quebec H2T 2A4", // Your location address
  }
);

You can authenticate your LAT using an API key or OAuth token. The method you choose depends on your environment; if your page is using server-side rendering (SSR), the OAuth token may be preferrable. If you have a single-page application (SPA), you will likely want to use the API key since the CLIENT_SECRET needed to generate the OAuth token should never be exposed in a client-side environment.

If you authenticate using the token you need to prefix it with Bearer.

Step 2: Open or downloading the PDF

You are now able to call .open() or .download() on the LatClient instance to open or download the PDF!

Some browsers will treat these events as pop-ups, so you must call them from a button event handler.

Open Example

const button = document.createElement("button");
button.innerText = "Open Preview";
button.onclick = () => latClient.open();
document.body.appendChild(button);

Download Example

const downloadButton = document.createElement("button");
downloadButton.innerText = "Download Report";
downloadButton.onclick = async () => {
  downloadButton.innerText = "Downloading...";
  await latClient.download();
  downloadButton.innerText = "Download Report";
};
document.body.appendChild(downloadButton);

React Example

import { useState } from "react";
import LatClient from "@local-logic/lat-client";
const latClient = LatClient("<API_KEY>", {
  lat: 45.52813, // Your address latitude
  lng: -73.5981, // Your address longitude
  addressLabel: "5605 Av. de Gaspé #304, Montreal, Quebec H2T 2A4",
});
export default function App() {
  const [downloading, setDownloading] = useState(false);
  return (
    <button
      onClick={async () => {
        setDownloading(true);
        await latClient.download();
        setDownloading(false);
      }}
      disabled={downloading}
    >
      {downloading ? "Downloading..." : "Download"}
    </button>
  );
}

API Reference

Methods

Method	Notes	Parameters	Return
open	Opens the LAT preview page in a new tab.		`Promise<void>`
download	Downloads the PDF.		`Promise<void>`

Options

Options	Notes	Type	Required
lat	Latitude	String	Yes
lng	Longitude	String	Yes
addressLabel	Location address	String	Yes
locale	Report language	"en" or "fr"
brokerName	Must also specify the `brokerEmail` and `brokerPhone`	String
brokerPhone	Must also specify the `brokerName` and `brokerEmail`	String
brokerEmail	Must also specify the `brokerName` and `brokerPhone`	String
brokerageName	Must also specify the `brokerageLogo` and `brokerageWebsite`	String
brokerageLogo	URL to a `png` or `jpg`. Must also specify the `brokerageName` and `brokerageWebsite`	String
brokerageWebsite	Must also specify the `brokerageName` and `brokerageLogo`	String