Skip to content

✨New✨Local Content (Beta)

Beta
Available in the US and Canada

Description

This widget evaluates all characteristics of a specific location. It displays Location Scores and related information. It can be added to any property listing in Canada and the United States.

Screenshot of new Local Content SDK's onboarding interface

Example

index.js

import LocalLogicSDK from "@local-logic/sdks-js";
const localLogicSDK = LocalLogicSDK(
"{API_KEY}",
{
locale: "en",
}
);
const container = document.createElement("div");
container.style.cssText = `
height: 100vh;
width: 100vw;
display: flex;
`;
document.body.appendChild(container);
localLogicSDK.create("local-content", container, {
lat: 37.8,
lng: -122.4
});

Show codesandbox

Be sure to replace the {API_KEY} placeholder with the key provided to you by the Local Logic team.

API

LocalLogicSDK

LocalLogicSDK instance provides global config options and methods.

Options

LocalLogicSDK(apiKey, options)

NameRequiredTypeDefaultDescription
apiKeytruestringApiKey required for making requests to the Local Logic API.
options.appearancefalseAppearanceAPIThe appearance option provides theme and variable support customizing the look and feel of your widgets.
options.localefalse"en" | "fr""en"The locale option specifies the language of the scores and the UI interface.

Customization options for appearance

  • --ll-color-primary
  • --ll-color-primary-variant1
  • --ll-color-background
  • --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-border-radius-small
  • --ll-border-radius-medium
  • --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-family
  • --ll-font-size-base
  • --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

localLogicSDK.create

localLogicSDK.create method is used to render new widget instances.

Options

localLogicSDK.create(sdkType, container, options, renderOptions)

NameRequiredTypeDefaultDescription
sdkTypetrue"local-content"The SDK you would like to create.
containertrueHTMLElementThe element to render in to.
optionstrueobjectOptions required for te specified sdkType. Options for each SDK are detailed below.
options.lattruenumberInitial viewport latitude.
options.lngtruenumberInitial viewport longitude.
options.zoomfalsenumber16Initial viewport zoom.
options.pitchfalsenumberInitial viewport pitch.
options.bearingfalsenumberInitial viewport bearing.
options.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.
options.markerfalse{ lat: number; lng: number}If provided, will render Local Content using a pin marker. The marker can be used to symbolize a location being analyzed. This value is typically the same as the lat and lng.
renderOptions.lazyfalsenumbertrueIf true, the SDK will only load content when it scrolls into the viewport.
"local-content" options
NameRequiredTypeDefaultDescription
lattruenumberInitial viewport latitude.
lngtruenumberInitial viewport longitude.
zoomfalsenumber16Initial viewport zoom.
pitchfalsenumber0Initial viewport pitch.
bearingfalsenumber0Initial viewport bearing.
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.
markerfalse{ lat: number; lng: number}If provided, will render Local Content using a pin marker. The marker can be used to symbolize a location being analyzed. This value is typically the same as the lat and lng.

localLogicSDK.on

The on method takes a callback which is triggered when create options when an event occurs.

Options

localLogicSDK.on(event, callback)

NameRequiredTypeDefaultDescription
eventtrue"change"The name of the event.
callbacktrue({ type: string, data: unknown })The callback to be triggered when the specified event occurs.

localLogicSDK.destroy

The destroy method is used to teardown the created SDK.

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

Options

localLogicSDK.update(options)

NameRequiredTypeDefaultDescription
options.lattruenumberInitial viewport latitude.
options.lngtruenumberInitial viewport longitude.
options.zoomfalsenumber16Initial viewport zoom.
options.pitchfalsenumberInitial viewport pitch.
options.bearingfalsenumberInitial viewport bearing.
options.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.
options.markerfalse{ lat: number; lng: number}If provided, will render Local Content using a pin marker. The marker can be used to symbolize a location being analyzed. This value is typically the same as the lat and lng.

React TypeScript example

App.tsx

import { useRef, useEffect } from "react";
import LocalLogicSDK from "@local-logic/sdks-js";
const localLogicSDK = LocalLogicSDK("{API_KEY}");
function App() {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) {
return;
}
const myLocation = {
lat: 45.5282164,
lng: -73.5978527,
};
const localContent = localLogicSDK.create("local-content", containerRef.current, {
...myLocation,
marker: myLocation,
cooperativeGestures: false,
});
return () => {
localContent.destroy();
}
}, []);
return (
<div className="App" ref={containerRef} />
);
}
export default App;

Be sure to replace the {API_KEY} placeholder with the key provided to you by the Local Logic team.

How to change the appearance

Example

Screenshot of an example of locale:fr and background color

In this example, the option of the Local Content SDK is set as following - locale: "fr", "--ll-font-family": "Georgia, serif" and "--ll-color-background: "#b4decc""

© Local Logic 2022