Skip to main content

Local Content

StableEnglish and FrenchUS 🇺🇸 and Canada 🇨🇦

Description​

Provide a comprehensive understanding of the location of any property in the US and Canada and an overview of the characteristics that matter most to the home buyer and renter.

Installation​

info

We recommend a height of at least 700px for an optimal user experience.

The SDK will display the mobile view when the width is less than 640px. It is recommended to provide enough space for the map to be fully visible and still allow the sidebar and commute calculator to be visible on desktop.

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 LocalContentSDKComponent() {
const containerRef = useRef(null);

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

  const sdkOptions = {
    lat: 45.5282164, lng: -73.5978527

    // ...Other sdk specific options
  }

  const sdkInstance = localLogicClient.create(
    "local-content",
    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: "700px",
      width: "100%",
    }}
  />
);
}

export default LocalContentSDKComponent;

Configuration​

API Key​

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

warning

If you are migrating from an old Local Logic SDK product, the API keys from the legacy versions do not work with our existing products.

Please reach out to Local Logic support to get your new key.

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-content", 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-content" in this case.
containertrueHTMLElementThe element to render in to.
sdkOptionstrueSDKOptionsOptions required for te specified sdkType. Options are detailed below.

SDKOptions​

NameRequiredTypeDefaultDescription
sdkOptions.lattruenumberInitial viewport latitude.
sdkOptions.lngtruenumberInitial viewport longitude.
sdkOptions.markertrueMarkerWill render a pin marker on the map representing the lat/lng. The marker can be used to symbolize a location being analyzed.

If the marker is not provided, certain features will be disabled.
sdkOptions.zoomfalsenumber16Initial viewport zoom.

The map will zoom in to the specified lat / lng after initializing as well as when loading markers on the map and calculating commute. This option only specified the "start" zoom of the map.
sdkOptions.pitchfalsenumber0Initial viewport pitch.
sdkOptions.bearingfalsenumber0Initial viewport bearing.
sdkOptions.cooperativeGesturesfalsebooleantrueIf true, scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map, and touch pan will require using two fingers while panning to move the map.
sdkOptions.distanceUnitfalseDistanceUnitmetricPrimarily used for the commute calculator. Will display the distance in mi/yd under the imperial system or km/m under the metric system.
sdkOptions.mapProviderfalseMapProvider{ name: "maptiler" }Desired map provider data; key is only required if name is set to "google".
sdkOptions.hideScoresfalsebooleanfalseSpecifies whether or not scores should be hidden globally. NOTE: If set to true, scores without POIs won't be displayed.
sdkOptions.scoresMenufalseScoresMenuOptions for customizing the Sidebar (on Desktop) and Categories Toggle Menu (on Mobile).

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.

Maps​

The SDK currently supports 3 maps: MapTiler, Mapbox and Google Maps.

MapTiler is used by default and the map api key belongs to Local Logic.

If you wish to use MapTiler with a custom theme, you will need to provide your own MapTiler API key when implementing the SDK.

Type definitions​

Marker type​

// Typically the same as lat / lng provided in the main options
type Marker = {
  lat: number;
  lng: number;
};

DistanceUnit type​

type DistanceUnit = "metric" | "imperial";

MapProvider type​

type MapProvider = {
  name: "maptiler" | "mapbox" | "google";
  // Required when using Google Maps or Mapbox as well as when using MapTiler with a custom theme
  key?: string;
  // Map provider specific theme ID
  theme?: string;
};

ScoresMenu type​

Default values
const scoresMenu = {
  defaultOpen: true,
  title: true,
  categories: {
    transport: {
      hide: false,
      order: 1,
      colors: {
        background: "#E9F8FA",
        fill: "#008491",
      },
      scores: {
        pedestrian_friendly: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        cycling_friendly: {
          hide: false,
          hideScore: false,
          order: 2,
        },
        transit_friendly: {
          hide: false,
          hideScore: false,
          order: 3,
        },
        car_friendly: {
          hide: false,
          hideScore: false,
          order: 4,
        },
      },
    },
    education: {
      hide: false,
      order: 2,
      colors: {
        background: "#E4EFFF",
        fill: "#003548",
      },
      scores: {
        daycares: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        primary_schools: {
          hide: false,
          hideScore: false,
          order: 2,
        },
        high_schools: {
          hide: false,
          hideScore: false,
          order: 3,
        },
      },
    },
    amenities: {
      hide: false,
      order: 3,
      colors: {
        background: "#FFF2C3",
        fill: "#BF8500",
      },
      scores: {
        shopping: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        groceries: {
          hide: false,
          hideScore: false,
          order: 2,
        },
        restaurants: {
          hide: false,
          hideScore: false,
          order: 3,
        },
        cafes: {
          hide: false,
          hideScore: false,
          order: 4,
        },
      },
    },
    character: {
      hide: false,
      order: 4,
      colors: {
        background: "#FFDAAC",
        fill: "#FF7044",
      },
      scores: {
        nightlife: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        vibrant: {
          hide: false,
          hideScore: false,
          order: 2,
        },
        historic: {
          hide: false,
          hideScore: false,
          order: 3,
        },
        quiet: {
          hide: false,
          hideScore: false,
          order: 4,
        },
      },
    },
    nature: {
      hide: false,
      order: 5,
      colors: {
        background: "#D8F4D9",
        fill: "#0F766E",
      },
      scores: {
        parks: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        greenery: {
          hide: false,
          hideScore: false,
          order: 2,
        },
      },
    },
    wellness: {
      hide: false,
      order: 6,
      colors: {
        background: "#FFE7FE",
        fill: "#FF84D6",
      },
      scores: {
        wellness: {
          hide: false,
          hideScore: false,
          order: 1,
        },
      },
    },
  },
};
// NOTE:
// You only need to provide the options you wish to override inside the scoresMenu.
// The SDK will use the default values for any options not provided.

type ScoresMenu = {
  // Indicates whether the Sidebar (on Desktop) should be open by default
  // Defaults to true
  defaultOpen?: boolean;

  // Title of the Sidebar (on Desktop)
  // If set to false, the title will not be displayed
  // If set to a string, the title will be displayed with the provided string
  // When supplying a string, the SDK will not translate the title
  // Defaults to "Categories" in English and "Catégories" in French
  title?: boolean | string;

  categories?: {
    [key in CategoryKey]?: CategoryOptions;
  };
};

// Represents the top level score groupings
export type CategoryKey =
  | "transport"
  | "education"
  | "amenities"
  | "character"
  | "nature"
  | "wellness";

type CategoryOptions = {
  // Indicates whether the category should be hidden
  // If set to true, all scores in this category will be hidden
  // Defaults to false
  hide?: boolean;

  // The order in which the category should be displayed
  // Lower numbers will be displayed first
  // If 2 categories have the same order, they will be displayed in the order they were defined
  order?: number;

  // Colors that all the scores and POIs in this category will use
  // If not provided, the SDK will use the default colors for the category
  // If provided, the colors will override the default colors for the category
  // Accepted values are hex and rgb colors
  colors?: {
    background: string;
    fill: string;
  };

  // Scores that will be displayed in this category
  scores?: {
    [key in ScoreKey]?: ScoreOptions;
  };
};

type ScoreOptions = {
  // Indicates whether the score should be hidden
  // If set to true, the score (and anything associated with it) will not be displayed
  // in the sidebar (on Desktop) or the categories toggle menu (on Mobile)
  // Defaults to false
  hide?: boolean;

  // Indicates whether the score value should be hidden
  // If set to true, the score value will not be displayed in the sidebar (on Desktop) or the categories toggle menu (on Mobile)
  // NOTE: If set to true, scores without POIs will not be displayed at all (acting as the hide option)
  // The scores without POIs are: Pedestrian friendly, Cycling friendly, Greenery, Quiet and Historic,
  // Defaults to false
  hideScore?: boolean;

  // The order in which the score should be displayed
  // Lower numbers will be displayed first
  // If 2 scores have the same order, they will be displayed in the order they were defined inside the object
  order?: number;
};