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 SDK provides a pre-built UI for launching or downloading the report. This is ideal for clients wanting to get setup quickly.
First, install the entry script with npm
, yarn
, or pnpm
:
npm i --save @local-logic/sdks-js
yarn add @local-logic/sdks-js
pnpm add @local-logic/sdks-js
The script is also available in umd
and es
format from the Local Logic CDN:
https://sdk.locallogic.co/sdks-js/<VERSION>/index.<FORMAT>.js
<VERSION>
is the latest script version number (which you can find on npm), and <FORMAT>
is either umd
or es
.
<scriptasyncsrc="https://sdk.locallogic.co/sdks-js/1.11.5/index.umd.js"onload="myInitLocalContentFunc()"></script>
LLSDKsJS
instanceImport LLSDKsJS
and create a new localLogicSDK
instance. If you installed LLSDKsJS
using a script tag, you must access it from the window
object.
import LLSDKsJS from "@local-logic/sdks-js";const localLogicSDK = LLSDKsJS(// Your API key or token<API_KEY>);
Next, create an instance of Location Report. You must define a container element for it to render into.
// Define a container elementconst container = document.createElement("div");const options = {lat: 37.8,lng: -122.4,addressLabel: "5605 Ave de Gaspé, Montreal, QC",};document.body.appendChild(container);localLogicSDK.create("lat-entry", container, options);
The SDKs are designed to work with React and other declarative frameworks.
Example
import { useRef, useEffect } from "react";import LLSDKsJS from "@local-logic/sdks-js";const localLogicSDK = LLSDKsJS(<API_KEY>);function MyLocalContentComponent() {const containerRef = useRef(null);useEffect(() => {if (!containerRef.current) {return;}const options = {lat: 37.8,lng: -122.4,addressLabel: "5605 Ave de Gaspé, Montreal, QC"};const localContent = localLogicSDK.create("local-content",containerRef.current,options);// It is important to destroy the Local Content instance when the component is unmounted.return () => {localContent.destroy();}}, []);return (<div ref={containerRef} />);}export default MyLocalContentComponent;
Options | Notes | Type | Required |
---|---|---|---|
lat | Latitude | String | When not using includeSearchAddress |
lng | Longitude | String | When not using includeSearchAddress |
addressLabel | Location address | String | When not using includeSearchAddress |
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 | |
image | SDK banner picture | String | |
title | SDK title | String | |
textLine1 | SDK first line of text | String | |
textLine2 | SDK second line of text | String | |
buttonText | SDK button text | String | |
includeSearchAddress | Adds address search input which can be used in place of lat , lng and addressLabel . Ideal for non-listing pages | Boolean |
Local Logic SDKs support visual customization using the Appearance API, which allows you to match the look of the SDK to your brand.
The SDKs currently offer two themes out of the box: day
and night
. The default mode is day
, but you may wish to use the night
theme if your application supports a dark mode.
const localLogicSDK = LLSDKsJS(<API_KEY>,{appearance: { theme: "night" }});
The entire theme can be further customized using the variables
option.
The following example changes the primary color, font, and gives the UI a more rounded appearance.
const localLogicSDK = LLSDKsJS(<API_KEY>,{appearance: {variables: {"--ll-color-primary": "#fd3958","--ll-color-primary-variant1": "#d5405b","--ll-border-radius-small": "8px","--ll-border-radius-medium": "16px","--ll-font-family": "Avenir, sans-serif",}}});
You can find a list of appearance variables here.
The SDKs are configured with to support these browsers.
The SDKs are designed to receive most new changes (non-breaking features and bug fixes) without the need for a developer to manually update the script.
Local Logic SDKs JS comes packaged with TypeScript declarations.
A: You can change the language by specifying locale
in the LLSDKsJS
options. The supported options are "en"
and "fr"
.
const localContent = localLogicSDK.create("lat-entry",containerRef.current, {..., // Other config options here});
A: Lazy loading is enabled by default. In some situations, you may want to disable lazy loading or control lazy loading with your own scripts.
To disable lazy load, pass lazy: false
to the renderOptions
parameter.
const localContent = localLogicSDK.create("lat-entry",container,{ ... },// renderOptions{lazy: false});