Aller au contenu principal

NeighborhoodMap

StableAnglais et françaisÉ.-U. 🇺🇸 et Canada 🇨🇦

Affiche une carte avec les points d'intérêt les plus proches, filtrés selon nos pointages.

Installation​

Nos produits SDK sont servis à partir d'une source unique.

Les SDK sont conçus pour fonctionner avec React et d'autres cadriciels déclaratifs.

D'abord, installez le script d'entrée avec npm, yarn ou pnpm :

npm i --save @local-logic/sdks-js
yarn add @local-logic/sdks-js
pnpm add @local-logic/sdks-js

Exemple

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

const globalOptions = {
locale: "en", // Si disponible, changer pour anglais ou français
appearance: {
  // Ajoutez ici toute autre modification d'apparence
  // Consultez la section "Appearance" ci-dessous pour la liste des options disponibles.
  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 NeighborhoodMapSDKComponent() {
const containerRef = useRef(null);

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

  const sdkOptions = {
    geographyId: "g10_drt2yt86"

    // ...Autres options propres au SDK
  }

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

  // Il est important de détruire l'instance du SDK lorsque le composant est démonté.
  return () => {
    sdkInstance.destroy();
  }
}, []);

return (
  <div
    ref={containerRef}
    style={{
      // La hauteur dépend du SDK que vous implémentez
      height: "700px",
      width: "100%",
    }}
  />
);
}

export default NeighborhoodMapSDKComponent;

Configuration​

Clé API​

Votre clé API vous sera fournie par l'équipe Local Logic.

Options globales​

const localLogicClient = localLogicSDK(apiKey, globalOptions)

Ces options sont disponibles pour tous les SDK. Vous pourrez également spécifier des options propres à chaque SDK, selon le SDK que vous implémentez. Ces options seront disponibles dans la documentation propre à chaque SDK

NomRequisTypeValeur par défautDescription
apiKeytruestringClé API requise pour effectuer des requêtes vers l'API Local Logic.
globalOptions.appearancefalseAppearanceL'option appearance permet d'utiliser des variables pour personnaliser l'apparence de vos widgets.
globalOptions.localefalse"en" ou "fr""en"L'option locale spécifie la langue des pointages et de l'interface utilisateur.
globalOptions.externalIdfalsestringPour les SDK connectés à l'application de gestion de quartier (Neighborhood Management App) du Local Logic Hub. Ce champ est requis pour que les SDK Neighborhood Showcase et Favorite Neighborhoods fonctionnent

Apparence​

Les SDK Local Logic prennent en charge la personnalisation visuelle grâce à l'API Appearance, qui vous permet d'adapter l'apparence du SDK à votre marque.

type Appearance = {
  variables?: {
    [key: string]: string;
  };
};

Variables couramment utilisées​

VariableDescription
--ll-color-primaryLa couleur principale de la marque.
--ll-color-primary-variant1Une version légèrement plus foncée de la couleur principale de la marque. Cette variable devrait toujours être modifiée en même temps que --ll-color-primary.
--ll-font-familyChange la famille de polices utilisée dans l'ensemble des SDK. Actuellement, les SDK ne prennent en charge que les polices système. Cette valeur devrait toujours inclure une famille de polices de repli, p. ex. Inter, sans-serif.

Fonctions​

Une fois que vous avez initialisé votre client SDK avec votre clé API et vos options globales, plusieurs fonctions sont disponibles.

Create​

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

Cette fonction crée un nouveau widget SDK selon le nom spécifié.

Les sdkOptions sont spécifiques à chaque SDK créé.

NomRequisTypeValeur par défautDescription
sdkTypetruestringLe SDK que vous souhaitez créer. "local-neighborhood-map" dans ce cas.
containertrueHTMLElementL'élément dans lequel effectuer le rendu.
sdkOptionstrueSDKOptionsOptions requises pour le sdkType spécifié. Les options sont détaillées ci-dessous.

SDKOptions​

info

Neighborhood Map peut être initialisé à l'aide d'une paire de latitude et longitude, ou d'un geographyId Local Logic, ce qui est la méthode de mise en œuvre privilégiée

geographyId : Initialiser le SDK Neighborhood Map avec un geographyId Local Logic retournera tous les points d'intérêt disponibles à l'intérieur des limites de la géographie spécifiée (limite de 50).

latitude et longitude : Initialiser le SDK Neighborhood Map avec une latitude et une longitude sélectionnera la plus petite géographie contenant les coordonnées spécifiées et retournera tous les points d'intérêt disponibles à l'intérieur des limites de cette géographie (limite de 50).

NameRequiredTypeDefaultDescription
sdkOptions.geographyId*stringL'ID de géographie Local Logic. Il s'agit de la méthode d'instanciation privilégiée.

* Ce champ est requis si vous n'utilisez pas lat/lng.
sdkOptions.lat*numberLatitude initiale de la fenêtre d'affichage.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.lng*numberLongitude initiale de la fenêtre d'affichage.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.zoomfalsenumber16Zoom initial de la fenêtre d'affichage.
sdkOptions.pitchfalsenumber0Inclinaison initiale de la fenêtre d'affichage.
sdkOptions.bearingfalsenumber0Orientation initiale de la fenêtre d'affichage.
sdkOptions.cooperativeGesturesfalsebooleantrueSi la valeur est vraie, le zoom par défilement nécessitera d'appuyer sur la touche ctrl ou ⌘ tout en défilant pour zoomer la carte, et le déplacement tactile nécessitera l'utilisation de deux doigts pour déplacer la carte.
sdkOptions.mapProviderfalseMapProvider{ name: "maptiler" }Données du fournisseur de carte souhaité; la clé n'est requise que si le nom est défini sur "mapbox" ou "google", ou si vous spécifiez un thème personnalisé.
sdkOptions.showSchoolRatingsfalsebooleanfalseLorsque disponible, affichera les cotes des écoles dans la fenêtre contextuelle du point d'intérêt.

Update​

sdkInstance.update(sdkOptions)

Cette fonction sert à mettre à jour le widget avec de nouvelles valeurs. Cela peut être utile, par exemple, si vous souhaitez changer l'emplacement du widget.

L'objet sdkOptions suit la même structure qu'à la création.

On​

sdkInstance.on(event, callback)

Cette fonction prend en argument une fonction de rappel (callback) qui est déclenchée lorsqu'un event survient. Actuellement, il n'existe qu'un seul événement.

NomRequisTypeValeur par défautDescription
eventtrue"change"Le nom de l'event.
callbacktrueCallbackFunctionLa fonction de rappel à déclencher lorsque l'event spécifié survient.
type CallbackFunction = ({ type: string, data: unknown }) => void;

Destroy​

sdkInstance.destroy()

Cette fonction sert à détruire le widget SDK créé.

Définitions de type​

Type MapProvider​

type MapProvider = {
  name: "maptiler" | "mapbox" | "google";
  // Requis lors de l'utilisation de Google Maps ou de Mapbox, ainsi que lors de l'utilisation de MapTiler avec un thème personnalisé
  key?: string;
  // ID de thème propre au fournisseur de carte
  theme?: string;
};
Format de theme

Format : chaîne UUID de la carte

Utilisé comme : https://api.maptiler.com/maps/{theme}/style.json?key={apiKey}

Le thème est l'ID de carte associé à votre compte MapTiler Cloud. Vous pouvez le trouver dans l'URL lorsque vous consultez un style de carte dans l'éditeur MapTiler Cloud — il s'agit du segment UUID qui suit /maps/.

Valeur par défaut : 600d69cb-288d-445e-9839-3dfe4d76b31a

Points de terminaison d'API pris en charge​

Les API Local Logic suivantes sont utilisées par le SDK pour afficher les données.

APIDescription
Points of InterestUtilisé pour récupérer les points d'intérêt à l'intérieur et près du quartier.
SchoolsUtilisé pour récupérer les écoles à l'intérieur et près du quartier.