Local Content (New)

New

Available in the US and Canada

The Local Content SDK displays scores and points of interest for a given location. It can be added to any property listing in Canada and the United States.

Local Content using MapTiler

Local Content using Google Maps

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.11.5/index.umd.js"
  onload="myInitLocalContentFunc()"
></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 Content SDK does not support API keys from the legacy version. 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 Content instance

Next, create an instance of Local Content. 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: 550px;
  width: 100vw;
  display: flex;
`;
const mySiteLocation = {
  lat: 37.8,
  lng: -122.4,
};
document.body.appendChild(container);
localLogicSDK.create("local-content", container, {
  ...mySiteLocation,
  marker: mySiteLocation,
});

Step 2A: Extra steps for enabling Google Maps support

Retrieve your Google Maps API key from your Google Cloud Platform project. If you do not have an API key, here are instructions on how to set one up.
Within your Google Cloud Platform project, please have the following APIs enabled for use:
- Maps JavaScript API
- Routes API
- Places API
For instructions on how to enable Places API for example, see this link.
Add the mapProvider param within your Local Content container configuration. The value for the name key should be set to "google". Your Google Maps API key should be provided under key. Please see the following as an example configuration:

Example

localLogicSDK.create("local-content", container, {
  ...mySiteLocation,
  mapProvider: {
    name: "google",
    key: "your-api-key-here",
  },
});

You can set the container dimensions to whatever you like. However, for the best user experience we recommend a minimum height and width of 550 and 300 pixels, respectively.

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 MyLocalContentComponent() {
  const containerRef = useRef(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,
      }
    );
    // It is important to destroy the Local Content instance when the component is unmounted.
    return () => {
      localContent.destroy();
    }
  }, []);
  return (
    <div
      ref={containerRef}
      style={{
        height: "100vh",
        width: "100vw",
      }}
    />
  );
}
export default MyLocalContentComponent;

Vanilla Javascript

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Local Content Javascript Example</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script
      async
      src="https://sdk.locallogic.co/sdks-js/1.11.5/index.umd.js"
      onload="loadLocalContent()"
    ></script>
    <style>
      #widgetMap {
        height: 500px;
        width: 100%;
      }
    </style>
    <div id="widgetMap"></div>
    <script>
      function loadLocalContent() {
        (async () => {
          // Your API key or token
          const ll = LLSDKsJS("<API_KEY>", {
            locale: "en", // 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-border-radius-small": "8px",
                "--ll-border-radius-medium": "16px",
                "--ll-font-family": "Avenir, sans-serif"
              }
            }
          });
          const container = document.createElement("div");
          container.setAttribute("id", "localContentWidget");
          // 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("#widgetMap").appendChild(container);
          // Set the lat and lng of the location
          const LAT = 45.528126;
          const LNG = -73.598104;
          const lc = ll.create("local-content", container, {
            lat: LAT,
            lng: LNG,
            cooperativeGestures: false,
            marker: {
              lat: LAT,
              lng: LNG
            }
          });
        })();
      }
    </script>
  </body>
</html>

Functions

For more information on the different functions available with the Local Content 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.

In order to update a location, the marker param must be updated in addition to the lat and lng params.

Example:

localContent.update({
  lat: 43.686941,
  lng: -79.463814,
  marker: {
    lat: 43.686941,
    lng: -79.463814
  }
});

Appearance

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

Note for users of Local Content SDK with Google Maps: Only theme defaults are officially available for now.

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

Commonly used variables

Variable	Description
`--ll-color-primary`	The primary brand color.
`--ll-color-primary-variant1`	A slightly darker version of the primary brand colour. This variable should always be changed in conjunction with `--ll-color-primary`.
`--ll-font-family`	Changes 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-base`	Used to scale the font size up or down.
`--ll-border-radius-small`	Used to adjust the border radius for small UI elements (buttons, tags, etc).
`--ll-border-radius-medium`	Used to adjust the border radius for large UI elements (containers, etc).
`--ll-spacing-base-unit`	Used to scale the overall padding of the SDKs.

Less commonly used variables

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

Migrating from Local Content (Legacy)

The new Local Content SDK has been rebuilt from the ground up. To make the application more scalable, the SDK API has changed, and is not backwards compatible with the legacy Local Content. Clients migrating from the old version will thus need to remove old code, and re-integrate using the instructions above.

Step 1: Remove Local Logic script tag

Find the line in your codebase where you are loading the Local Logic SDK script. It will likely be next to the closing </body> tag. You can also search for https://cdn.locallogic.co/sdk/ in your codebase.

Before you delete the code make a note of the function name assigned to callback=. If you followed our documentation it is probably called initLocallogic.

Step 2: Delete `initLocallogic`

Find and delete the function in your codebase you identified in Step 1.

Step 3: Get your new API Key

API keys used in the legacy Local Content are not compatible with the new Local Content. To get a new key please reach out to Local Logic support.

Step 4: Install new SDKs

You can now follow the documentation for the new SDKs outlined above.

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.

API

A full list of configuration options for Local Content is available here.

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 localContent = localLogicSDK.create(
  "local-content",
  containerRef.current, {
    ..., // Other config options here
  }
);

Q: How do I prevent accidental map zooming on mobile devices?

A: A common problem in mobile maps is when a user inadvertently zooms into a map when scrolls down the page. We recommend solving this by passing the cooperativeGestures option to the Local Content SDK. This option will prevent 1 finger map zooming in favour of pinch to zoom.

const localContent = localLogicSDK.create(
  "local-content",
  containerRef.current, {
    ..., // Other config options here
    cooperativeGestures: true
  }
);

Q: How do I disable lazy load?

A: Lazy loading is enabled by default. In some situations, you may want to disable lazy loading or control lazy loading with your own scripts.

To disable lazy load, pass lazy: false to the renderOptions parameter.

const localContent = localLogicSDK.create(
  "local-content",
  container,
  { ... },
  // renderOptions
  {
    lazy: false
  }
);

Q: I live in a rural area. Will I see POIs around my location?

A: Local Content will attempt to fetch at least 3 POIs per score within a 10km radius if the initial call returned less than the desired amount.

Q: I seem to have the correct SDK options set but I continue to have issues making network calls to Google. How do I resolve this?

A: Please see some troubleshooting suggestions below:

Ensure you have enabled the requisite APIs in your Google Cloud Platform project.
Check that there are no restrictions on the Google API key you are using.
If you have recently made Google Cloud Platform project changes, Google recommends to let enough time pass for relevant changes to take effect.
Double-check the SDK configurations, especially values specified under mapProvider.

Local Content (New)

Local Content using MapTiler

Local Content using Google Maps

Getting started

Installation

Usage

Step 1: Instantiate an LLSDKsJS instance

Step 2: Instantiate a Local Content instance

Step 2A: Extra steps for enabling Google Maps support

React applications

Vanilla Javascript

Functions

.update()

Example:

Appearance

Themes

Variables

Commonly used variables

Migrating from Local Content (Legacy)

Step 1: Remove Local Logic script tag

Step 2: Delete initLocallogic

Step 3: Get your new API Key

Step 4: Install new SDKs

Browser support

Versioning

TypeScript

API

FAQ

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

Q: How do I prevent accidental map zooming on mobile devices?

Q: How do I disable lazy load?

Q: I live in a rural area. Will I see POIs around my location?

Q: I seem to have the correct SDK options set but I continue to have issues making network calls to Google. How do I resolve this?

Step 1: Instantiate an `LLSDKsJS` instance

`.update()`

Step 2: Delete `initLocallogic`