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.
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.
<scriptasyncsrc="https://www.unpkg.com/@local-logic/lat-client@1.2.0/dist/index.umd.js"onload="myInitLATFunc()"></script>
LatClient
instanceImport 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 latitudelng: -73.5981, // Your address longitudeaddressLabel: "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
.
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.
const button = document.createElement("button");button.innerText = "Open Preview";button.onclick = () => latClient.open();document.body.appendChild(button);
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);
import { useState } from "react";import LatClient from "@local-logic/lat-client";const latClient = LatClient("<API_KEY>", {lat: 45.52813, // Your address latitudelng: -73.5981, // Your address longitudeaddressLabel: "5605 Av. de Gaspé #304, Montreal, Quebec H2T 2A4",});export default function App() {const [downloading, setDownloading] = useState(false);return (<buttononClick={async () => {setDownloading(true);await latClient.download();setDownloading(false);}}disabled={downloading}>{downloading ? "Downloading..." : "Download"}</button>);}
Method | Notes | Parameters | Return |
---|---|---|---|
open | Opens the LAT preview page in a new tab. | Promise<void> | |
download | Downloads the PDF. | Promise<void> |
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 |