The Local Demographics SDK displays demographics data for a given location. It can be added to any property listing in Canada and the United States.
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.8.2/index.umd.js"onload="myInitLocalDemographicsFunc()"></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>);
The new Local Demographics SDK does not support API keys from the legacy version or another Local Logic SDK. If you are migrating, please reach out to Local Logic support to get your new key.
You can authenticate your SDK 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
.
Next, create an instance of Local Demographics. You must define a container element for it to render into.
// Define a container elementconst container = document.createElement("div");container.style.cssText = `height: 550px;width: 100vw;display: flex;`;const mySiteLocation = {lat: 37.8,lng: -122.4,};document.body.appendChild(container);localLogicSDK.create("demographics", container, {...mySiteLocation,});
Tab | Data | Graph Type | Canada | USA |
---|---|---|---|---|
Income | Average Income | Text Card | ✅ | ✅ |
Income | Employment | Horizontal Bar | - | ✅ |
Income | Income Brackets | Bar Chart | - | ✅ |
Population | Total Population | Text Card | ✅ | ✅ |
Population | Population by age group (%) | Bar Chart | ✅ | ✅ |
Housing | Owners vs Renters | Horizontal Bar | ✅ | ✅ |
Housing | Type of housing (%) | Bar Chart | ✅ | ✅ |
Household | Household Composition | Donut Chart | ✅ | ✅ |
Education | Highest level of education achieved (%) | Bar Chart | ✅ | ✅ |
Commute | Commute Mode | Donut Chart | ✅ | ✅ |
Languages | Mother Tongue (%) | Bar Chart | ✅ | - |
Languages | Spoken Official Language | Donut Chart | ✅ | - |
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 MyLocalDemographicsComponent() {const containerRef = useRef(null);useEffect(() => {if (!containerRef.current) {return;}const myLocation = {lat: 45.5282164,lng: -73.5978527,};const localDemographics = localLogicSDK.create("demographics",containerRef.current, {...myLocation,});// It is important to destroy the Local Demographics instance when the component is unmounted.return () => {localDemographics.destroy();}}, []);return (<divref={containerRef}style={{height: "100vh",width: "100vw",}}/>);}export default MyLocalDemographicsComponent;
Example
<!DOCTYPE html><html><head><title>Local Demographics Javascript Example</title><meta charset="UTF-8" /></head><body><scriptasyncsrc="https://sdk.locallogic.co/sdks-js/1.11.5/index.umd.js"onload="loadLocalDemographics()"></script><style>#demographicsContainer {height: 500px;width: 100%;}</style><div id="demographicsContainer"></div><script>function loadLocalDemographics() {(async () => {// Your API key or tokenconst ll = LLSDKsJS("<API_KEY>", {locale: "en", // Change to either english "en" or french "fr"});const container = document.createElement("div");container.setAttribute("id", "localDemographicsWidget");// Set the styles of the container// With these styles the container will fill the height and width of the #widgetMapcontainer.style.cssText = `height: 100%;width: 100%;display: flex;`;// This is the div that will contain the widgetdocument.querySelector("#demographicsContainer").appendChild(container);// Set the lat and lng of the locationconst LAT = 45.528126;const LNG = -73.598104;const lc = ll.create("demographics", container, {lat: LAT,lng: LNG});})();}</script></body></html>
Local Logic SDKs support visual customization using the Appearance API, which allows you to match the look of the SDK to your brand.
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","--ll-sdk-title-color": "#fd3958"}}});
Variable | Description |
---|---|
--ll-color-primary | The primary brand color. |
--ll-color-primary-variant1 | A slightly darker version of the primary brand colour. This variable should always be changed in conjunction with --ll-color-primary . |
--ll-font-family | Changes the font family used throughout the SDKs. Currently, the SDKs only support system fonts. This value should always include a fallback font family, ex. Inter, sans-serif . |
--ll-font-size-base | Used to scale the font size up or down. |
--ll-border-radius-small | Used to adjust the border radius for small UI elements (buttons, tags, etc). |
--ll-border-radius-medium | Used to adjust the border radius for large UI elements (containers, etc). |
--ll-spacing-base-unit | Used to scale the overall padding of the SDKs. |
--ll-sdk-title-color | Changes the color of the title of the SDK specifically |
--ll-color-surface
--ll-color-surface-variant1
--ll-color-surface-variant2
--ll-color-on-primary
--ll-color-on-primary-variant1
--ll-color-on-background
--ll-color-on-background-variant1
--ll-color-on-surface
--ll-color-on-surface-variant1
--ll-color-placeholder
--ll-color-disabled
--ll-color-border
--ll-shadow-small
--ll-shadow-medium
--ll-spacing-auto
--ll-spacing-base-unit
--ll-spacing-xx-small
--ll-spacing-x-small
--ll-spacing-small
--ll-spacing-medium
--ll-spacing-large
--ll-spacing-x-large
--ll-spacing-xx-large
--ll-spacing-xxx-large
--ll-font-size-h1
--ll-font-size-h2
--ll-font-size-h3
--ll-font-size-h4
--ll-font-size-h5
--ll-font-size-h6
--ll-font-size-p
--ll-font-size-caption-1
--ll-font-size-caption-2
--ll-font-weight-light
--ll-font-weight-normal
--ll-font-weight-medium
--ll-font-weight-bold
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"
.
A full list of configuration options for Demographics is available here.
const localContent = localLogicSDK.create("local-content",containerRef.current, {..., // Other config options here});
A: You can hide the title by passing in title: false
as an option. Alternatively, you can pass a string the same way as you would hide it. title: "my new title"
.
If you pass a custom string, the SDK no longer handles the localization of the title. It is your responsibility to make sure the title is translated.
A full list of configuration options for Demographics is available here.
const localContent = localLogicSDK.create("local-content",containerRef.current, {..., // Other config options here});