Display a Map with the closest Points of Interest filtered by our Scores.
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
.
<scriptasyncsrc="https://sdk.locallogic.co/sdks-js/1.20.9/index.umd.js"onload="myInitNeighborhoodMapsFunc()"></script>
LLSDKsJS
instanceImport 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
.
Next, create an instance of Neighborhood Maps. You must define a container element for it to render into.
Example
// Define a container elementconst container = document.createElement("div");container.style.cssText = `height: 600px;width: 100vw;display: flex;`;const mySiteLocation = {lat: 37.8,lng: -122.4,};document.body.appendChild(container);localLogicSDK.create("neighborhood-map", container, {...mySiteLocation,marker: mySiteLocation,});
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 MyNeighborhoodMapsComponent() {const containerRef = useRef(null);useEffect(() => {if (!containerRef.current) {return;}const myLocation = {lat: 45.5282164,lng: -73.5978527,};const neighborhoodMaps = localLogicSDK.create("neighborhood-map",containerRef.current, {...myLocation,});// It is important to destroy the instance when the component is unmounted.return () => {neighborhoodMaps.destroy();}}, []);return (<divref={containerRef}style={{height: "100vh",width: "100vw",}}/>);}export default MyNeighborhoodMapsComponent;
Example
<!DOCTYPE html><html><head><title>NeighborhoodMaps Javascript Example</title><meta charset="UTF-8" /></head><body><scriptasyncsrc="https://sdk.locallogic.co/sdks-js/1.20.9/index.umd.js"onload="loadNeighborhoodMaps()"></script><style>#widget {height: 600px;width: 100%;}</style><div id="widget"></div><script>function loadNeighborhoodMaps() {(async () => {// Your API key or tokenconst ll = LLSDKsJS("<API_KEY>", {locale: "en", // Change to either english or frenchappearance: {// Change the color of the map Boundary and highlight withvariables: {"--ll-color-primary": "#fd3958",}}});const container = document.createElement("div");container.setAttribute("id", "neighborhoodMapsWidget");// Set the styles of the container// With these styles the container will fill the height and width of the #widgetcontainer.style.cssText = `height: 100%;width: 100%;display: flex;`;// This is the div that will contain the widgetdocument.querySelector("#widget").appendChild(container);// Set the lat and lng of the locationconst LAT = 45.528126;const LNG = -73.598104;const lc = ll.create("neighborhood-map", container, {lat: LAT,lng: LNG,});})();}</script></body></html>
For more information on the different functions available with the NeighborhoodMaps 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.
neighborhoodMaps.update({lat: 43.686941,lng: -79.463814,});
Local Logic SDKs support visual customization using the Appearance API, which allows you to match the look of the SDK to your brand.
To change the color of highlights and Map boundary you can change a variable
.
const localLogicSDK = LLSDKsJS(<API_KEY>,{appearance: {variables: {"--ll-color-primary": "#fd3958",}}});
You can change the unit of the radius with distanceUnit
.
Available: metric
, imperial
Default: metric
The SDKs are configured with to support these browsers.
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.
Local Logic SDKs JS comes packaged with TypeScript declarations.
A: You can change the language by specifying locale
in the LLSDKsJS
options. The supported options are "en"
and "fr"
.
const ll = LocalLogicSDK(// Your API key or token<API_KEY>,{locale: "fr",});
#### 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 SDK. This option will prevent 1 finger map zooming in favour of pinch to zoom.```javascriptconst neighborhoodMaps = localLogicSDK.create("neighborhood-map",containerRef.current, {..., // Other config options herecooperativeGestures: true});
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 neighborhoodMaps = localLogicSDK.create("neighborhood-map",container,{ ... },// renderOptions{lazy: false});
A: Neighborhood maps will attempt to fetch at least 3 POIs per score within a 10km radius if the initial call returned less than the desired amount.