Skip to main content

NeighborhoodHighlights

StableEnglish and FrenchUS 🇺🇸 and Canada 🇨🇦

Display a list of the Scores the neighborhood excels in.

Installation​

Our SDK products are served from a single source.

The SDKs are designed to work with React and other declarative frameworks.

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

Example

import { useRef, useEffect } from "react";
import LLSDKsJS from "@local-logic/sdks-js";

const globalOptions = {
locale: "en", // If available, change to either english or french
appearance: {
  theme: "day",
  // Add any other appearance changes here
  variables: {
    "--ll-color-primary": "#fd3958",
    "--ll-color-primary-variant1": "#d5405b",
    "--ll-font-family": "Avenir, sans-serif"
  }
}
};

const localLogicClient = LLSDKsJS("your-api-key-here", globalOptions);

function NeighborhoodHighlightsSDKComponent() {
const containerRef = useRef(null);

useEffect(() => {
  if (!containerRef.current) {
    return;
  }

  const sdkOptions = {
    geographyId: "g10_drt2yt86"

    // ...Other sdk specific options
  }

  const sdkInstance = localLogicClient.create(
    "neighborhood-highlights",
    containerRef.current,
    sdkOptions,
  );

  // It is important to destroy the SDK instance when the component is unmounted.
  return () => {
    sdkInstance.destroy();
  }
}, []);

return (
  <div
    ref={containerRef}
    style={{
      // Height is dependent on the SDK you are implementing
      height: "100%",
      width: "100%",
    }}
  />
);
}

export default NeighborhoodHighlightsSDKComponent;

Configuration​

API Key​

Your API Key will be provided to you by the LocalLogic team.

Global options​

const localLogicClient = localLogicSDK(apiKey, globalOptions)

These options are available accross SDKs. You will also be able to specify SDK specific options depending on the SDK you are implementing. These options will be available in the SDK specific documentation

NameRequiredTypeDefaultDescription
apiKeytruestringApiKey required for making requests to the Local Logic API.
globalOptions.appearancefalseAppearanceThe appearance option provides theme and variable support customizing the look and feel of your widgets.
globalOptions.localefalse"en" or "fr""en"The locale option specifies the language of the scores and the UI interface.
globalOptions.externalIdfalsestringFor SDKs connected to the Neighborhood Management App in the Local Logic Hub. This field is required for Neighborhood Showcase and Favorite Neighborhoods SDKs to work

Appearance​

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

type Appearance = {
  theme?: "day" | "night"; // Defaults to "day"
  variables?: {
    [key: string]: string;
  };
}

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-spacing-base-unitUsed to scale the overall padding of the SDKs.

Functions​

Once you initialize your SDK client with your API key and global options, several functions are available.

Create​

const sdkInstance = localLogicClient.create("local-neighborhood-highlights", container, sdkOptions)

This function creates a new SDK widget based on the name specified.

sdkOptions are specific to each SDK being created.

NameRequiredTypeDefaultDescription
sdkTypetruestringThe SDK you would like to create. "local-neighborhood-highlights" in this case.
containertrueHTMLElementThe element to render in to.
sdkOptionstrueSDKOptionsOptions required for te specified sdkType. Options are detailed below.

SDKOptions​

NameRequiredTypeDefaultDescription
sdkOptions.geographyId*stringThe Local Logic geography ID. This is the preferred instantiation method.

* This field is required if you are not using lat/lng.
sdkOptions.lat*numberInitial viewport latitude.

* This field is required if you are not using geographyId. If geographyId is defined, this field is ignored.
sdkOptions.lng*numberInitial viewport longitude.

* This field is required if you are not using geographyId. If geographyId is defined, this field is ignored.
sdkOptions.titlefalseboolean | stringTitle is enabled by default and is provided as a translated string. You have the ability to remove the title or supply your own title string.

Update​

sdkInstance.update(sdkOptions)

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

The sdkOptions object follows the same structure as on creation.

On​

sdkInstance.on(event, callback)

This function takes a callback which is triggered when an event occurs. Currently, there is only one event.

NameRequiredTypeDefaultDescription
eventtrue"change"The name of the event.
callbacktrueCallbackFunctionThe callback to be triggered when the specified event occurs.
type CallbackFunction = ({ type: string, data: unknown }) => void;

Destroy​

sdkInstance.destroy()

This function is used to teardown the created SDK widget.

Supporting API Endpoints​

The following Local Logic APIs are used by the SDK to display data.

APIDescription
ScoresUsed to retrieve the scores for the neighborhood in order to calculate the highlights (top scores) of the neighborhood.