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

Neighborhood Characteristics (New)

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

Neighborhood Characteristics display a high-level summary of the characteristics of any target neighborhood.

Screenshot of new NeighborhoodCharacteristics SDK

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="loadNeighborhoodCharacteristics()"
></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>
);

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 Neighborhood Characteristics instance

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

Example

// Define a container element
const container = document.createElement("div");
container.style.cssText = `
  height: 100%;
  width: 100vw;
  display: flex;
`;
const mySiteLocation = {
  lat: 37.8,
  lng: -122.4,
};
document.body.appendChild(container);
localLogicSDK.create("neighborhood-characteristics", container, {
  ...mySiteLocation,
});

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 MyNeighborhoodComponent() {
  const containerRef = useRef(null);
  useEffect(() => {
    if (!containerRef.current) {
      return;
    }
    const myLocation = {
      lat: 45.5282164,
      lng: -73.5978527,
    };
    const neighborhoodCharacteristics = localLogicSDK.create(
      "neighborhood-characteristics",
      containerRef.current, {
        ...myLocation,
      }
    );
    // It is important to destroy the instance when the component is unmounted.
    return () => {
      neighborhoodCharacteristics.destroy();
    }
  }, []);
  return (
    <div
      ref={containerRef}
      style={{
        height: "100%",
        width: "100vw",
      }}
    />
  );
}
export default MyNeighborhoodComponent;

Vanilla Javascript

Example

<!DOCTYPE html>
<html>
  <head>
    <title>NeighborhoodCharacteristics 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="loadNeighborhoodCharacteristics()"
    ></script>
    <style>
      #widget {
        height: 100%;
        width: 100%;
      }
    </style>
    <div id="widget"></div>
    <script>
      function loadNeighborhoodCharacteristics() {
        (async () => {
          // Your API key or token
          const ll = LLSDKsJS("<API_KEY>", {
            locale: "en", // Change to either english or french
          });
          const container = document.createElement("div");
          container.setAttribute("id", "neighborhoodWidget");
          // Set the styles of the container
          // With these styles the container will fill the height and width of the #widget
          container.style.cssText = `
                  height: 100%;
                  width: 100%;
                  display: flex;
                `;
          // This is the div that will contain the widget
          document.querySelector("#widget").appendChild(container);
          // Set the lat and lng of the location
          const LAT = 45.528126;
          const LNG = -73.598104;
          const lc = ll.create("neighborhood-characteristics", container, {
            lat: LAT,
            lng: LNG,
          });
        })();
      }
    </script>
  </body>
</html>

Functions

For more information on the different functions available with the Neighborhood Characteristics SDK, please view our NPM packages documentation.

.update()

The update method is used to update the widget with new values. This can be useful when, for example, you want to change the widget location.

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

const neighborhoodCharacteristics = localLogicSDK.create(
  "neighborhood-characteristics",
  containerRef.current, {
    ..., // Other config options here
  }
);
© Local Logic 2024