Skip to content
Local Logic
Documentation
Get API/SDK Access
Request demo
Getting started
Accessing the APIInstalling the SDKUsing the SDKAbout our DataReact Native
API Endpoints
Location ScoresPoints of Interest (POIs)Schools CanadaSchools USLocal ProfilesDemographicsGeographiesClimateCrime USError Codes
SDK Widgets
NeighborhoodWrap (New)NeighborhoodMatch (New)Local ContentLocal DemographicsLocal ProfilesLocal SearchLocal MapsLocal SchoolsLocal Content (Legacy)
Apps
NeighborhoodIntel (New)
FAQ and Support

Local Demographics (New)

Table of contents
New
Available in the US and Canada
Table of contents

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.

Screenshot of new Demographics SDK's onboarding interface

Getting started

Installation

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.

<script
  async
  src="https://sdk.locallogic.co/sdks-js/1.20.9/index.umd.js"
  onload="myInitLocalDemographicsFunc()"
></script>

Usage

Step 1: Instantiate an LLSDKsJS instance

Import 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.

Step 2: Instantiate a Local Demographics instance

Next, create an instance of Local Demographics. You must define a container element for it to render into.

// Define a container element
const 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,
});
You can set the container dimensions to the recommended minimum height and width of 550 and 450 pixels, respectively.

Demographics data availability and graph type

TabDataGraph TypeCanadaUSA
IncomeAverage IncomeText Card✅✅
IncomeEmploymentHorizontal Bar-✅
IncomeIncome BracketsBar Chart-✅
PopulationTotal PopulationText Card✅✅
PopulationPopulation by age group (%)Bar Chart✅✅
HousingOwners vs RentersHorizontal Bar✅✅
HousingType of housing (%)Bar Chart✅✅
HouseholdHousehold CompositionDonut Chart✅✅
EducationHighest level of education achieved (%)Bar Chart✅✅
CommuteCommute ModeDonut Chart✅✅
LanguagesMother Tongue (%)Bar Chart✅-
LanguagesSpoken Official LanguageDonut Chart✅-

React applications

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 (
    <div
      ref={containerRef}
      style={{
        height: "100vh",
        width: "100vw",
      }}
    />
  );
}
export default MyLocalDemographicsComponent;

Vanilla Javascript

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Local Demographics Javascript Example</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script
      async
      src="https://sdk.locallogic.co/sdks-js/1.20.9/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 token
          const 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 #widgetMap
          container.style.cssText = `
                  height: 100%;
                  width: 100%;
                  display: flex;
                `;
          // This is the div that will contain the widget
          document.querySelector("#demographicsContainer").appendChild(container);
          // Set the lat and lng of the location
          const LAT = 45.528126;
          const LNG = -73.598104;
          const lc = ll.create("demographics", container, {
            lat: LAT,
            lng: LNG
          });
        })();
      }
    </script>
  </body>
</html>

Appearance

Local Logic SDKs support visual customization using the Appearance API, which allows you to match the look of the SDK to your brand.

Themes

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" }
  }
);

Variables

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"
      }
    }
  }
);

Screenshot of new Local Content SDK's onboarding interface

Commonly used variables

VariableDescription
--ll-color-primaryThe primary brand color.
--ll-color-primary-variant1A slightly darker version of the primary brand colour. This variable should always be changed in conjunction with --ll-color-primary.
--ll-font-familyChanges 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-baseUsed to scale the font size up or down.
--ll-border-radius-smallUsed to adjust the border radius for small UI elements (buttons, tags, etc).
--ll-border-radius-mediumUsed to adjust the border radius for large UI elements (containers, etc).
--ll-spacing-base-unitUsed to scale the overall padding of the SDKs.
--ll-sdk-title-colorChanges the color of the title of the SDK specifically
Less commonly used variables
  • --ll-color-surface
  • --ll-color-on-background
  • --ll-color-on-background-variant1
  • --ll-color-on-surface-variant1
  • --ll-color-placeholder
  • --ll-color-disabled
  • --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-h2
  • --ll-font-size-p
  • --ll-font-size-caption-1
  • --ll-font-size-caption-2
  • --ll-font-weight-medium

Browser support

The SDKs are configured with to support these browsers.

Versioning

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.

TypeScript

Local Logic SDKs JS comes packaged with TypeScript declarations.

FAQ

Q: How do I change the language of the SDK?

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
  }
);

Q: How do I change or hide the title of the SDK?

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
  }
);
© Local Logic 2024