Skip to content

Location Report (Script)

New
Available in the US and Canada

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.

Screenshot of new Local Content SDK's onboarding interface

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

MethodNotesParametersReturn
openOpens the LAT preview page in a new tab.Promise<void>
downloadDownloads the PDF.Promise<void>

Options

OptionsNotesTypeRequired
latLatitudeStringYes
lngLongitudeStringYes
addressLabelLocation addressStringYes
localeReport language"en" or "fr"
brokerNameMust also specify the brokerEmail and brokerPhoneString
brokerPhoneMust also specify the brokerName and brokerEmailString
brokerEmailMust also specify the brokerName and brokerPhoneString
brokerageNameMust also specify the brokerageLogo and brokerageWebsiteString
brokerageLogoURL to a png or jpg. Must also specify the brokerageName and brokerageWebsiteString
brokerageWebsiteMust also specify the brokerageName and brokerageLogoString
© Local Logic 2023