Aller au contenu principal

Local Content

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

Description​

Offrez une compréhension complète de l'emplacement de toute propriété aux États-Unis et au Canada, ainsi qu'un aperçu des caractéristiques qui comptent le plus pour les acheteurs et les locataires.

info

Pour des conseils, astuces et bonnes pratiques pour la mise en œuvre de Local Content, consultez notre Guide de mise en œuvre.

Installation​

info

Nous recommandons une hauteur d'au moins 700 px pour une expérience utilisateur optimale.

Le SDK affichera la vue mobile lorsque la largeur est inférieure à 640 px. Il est recommandé de prévoir suffisamment d'espace pour que la carte soit entièrement visible tout en permettant à la barre latérale et au calculateur de temps de déplacement de rester visibles sur ordinateur de bureau.

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

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

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

    // ...Autres options propres au SDK
  }

  const sdkInstance = localLogicClient.create(
    "local-content",
    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 LocalContentSDKComponent;

Configuration​

Clé API​

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

attention

Si vous migrez depuis un ancien produit du SDK Local Logic, les clés API des versions précédentes ne fonctionnent pas avec nos produits actuels.

Veuillez communiquer avec le soutien de Local Logic pour obtenir votre nouvelle clé.

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-content", 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-content" 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​

NameRequiredTypeDefaultDescription
sdkOptions.lattruenumberLatitude initiale de la vue.
sdkOptions.lngtruenumberLongitude initiale de la vue.
sdkOptions.markerfalseMarkerAffichera un repère sur la carte représentant la latitude/longitude. Le repère peut être utilisé pour symboliser un emplacement en cours d'analyse.

Si le repère n'est pas fourni, les fonctionnalités liées au temps de déplacement seront masquées.
sdkOptions.zoomfalsenumber16Niveau de zoom initial de la vue.

La carte effectuera un zoom vers la latitude/longitude spécifiée après l'initialisation, ainsi que lors du chargement des repères sur la carte et du calcul du temps de déplacement. Cette option précise uniquement le zoom de "départ" de la carte.
sdkOptions.pitchfalsenumber0Inclinaison initiale de la vue.
sdkOptions.bearingfalsenumber0Orientation initiale de la vue.
sdkOptions.cooperativeGesturesfalsebooleantrueSi la valeur est true, le zoom par défilement nécessitera d'appuyer sur la touche ctrl ou ⌘ tout en défilant pour zoomer sur la carte, et le déplacement tactile nécessitera l'utilisation de deux doigts pour déplacer la carte.
sdkOptions.distanceUnitfalseDistanceUnitmetricPrincipalement utilisé pour le calculateur de temps de déplacement. Affichera la distance en mi/yd selon le système impérial ou en km/m selon le système métrique.
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.hideScoresfalsebooleanfalseIndique si les cotes doivent être masquées globalement ou non. REMARQUE : si la valeur est true, les cotes sans POI ne seront pas affichées.
sdkOptions.scoresMenufalseScoresMenuOptions pour personnaliser la barre latérale (sur ordinateur de bureau) et le menu de bascule des catégories (sur mobile).
sdkOptions.showSchoolRatingsfalsebooleanfalseLorsqu'elles sont disponibles, affichera les cotes des écoles dans la fenêtre contextuelle du POI et sous forme d'étiquette dans la barre latérale du POI.

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

Cartes​

Le SDK prend actuellement en charge 3 cartes : MapTiler, Mapbox et Google Maps.

MapTiler est utilisé par défaut et la clé API de la carte appartient à Local Logic.

Si vous souhaitez utiliser MapTiler avec un thème personnalisé, vous devrez fournir votre propre clé API MapTiler lors de la mise en œuvre du SDK.

Définitions de type​

Type Marker​

// Habituellement identique à la latitude/longitude fournie dans les options principales
type Marker = {
  lat: number;
  lng: number;
};

Type DistanceUnit​

type DistanceUnit = "metric" | "imperial";

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

Type ScoresMenu​

Valeurs par défaut
const scoresMenu = {
  defaultOpen: true,
  title: true,
  categories: {
    amenities: {
      hide: false,
      order: 0,
      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,
        },
      },
    },
    education: {
      hide: false,
      order: 1,
      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,
        },
      },
    },
    transport: {
      hide: false,
      order: 2,
      colors: {
        background: "#E9F8FA",
        fill: "#008491",
      },
      scores: {
        transit_friendly: {
          hide: false,
          hideScore: false,
          order: 0,
        },
        car_friendly: {
          hide: false,
          hideScore: false,
          order: 1,
        },
        pedestrian_friendly: {
          hide: false,
          hideScore: false,
          order: 2,
        },
        cycling_friendly: {
          hide: false,
          hideScore: false,
          order: 3,
        },
      },
    },
    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,
        },
      },
    },
    health: {
      hide: false,
      order: 6,
      colors: {
        background: "#FFE7FE",
        fill: "#FF84D6",
      },
      scores: {
        wellness: {
          hide: false,
          hideScore: false,
          order: 1,
        },
      },
    },
  },
};
// REMARQUE :
// Vous n'avez qu'à fournir les options que vous souhaitez remplacer à l'intérieur du scoresMenu.
// Le SDK utilisera les valeurs par défaut pour toute option non fournie.

type ScoresMenu = {
  // Indique si la barre latérale (sur ordinateur de bureau) doit être ouverte par défaut
  // Valeur par défaut : true
  defaultOpen?: boolean;

  // Titre de la barre latérale (sur ordinateur de bureau)
  // Si la valeur est false, le titre ne sera pas affiché
  // Si la valeur est une chaîne de caractères, le titre sera affiché avec la chaîne fournie
  // Lorsqu'une chaîne est fournie, le SDK ne traduira pas le titre
  // Valeur par défaut : "Categories" en anglais et "Catégories" en français
  title?: boolean | string;

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

// Représente les regroupements de cotes de premier niveau
export type CategoryKey =
  | "amenities"
  | "education"
  | "transport"
  | "character"
  | "nature"
  | "health";

type CategoryOptions = {
  // Indique si la catégorie doit être masquée
  // Si la valeur est true, toutes les cotes de cette catégorie seront masquées
  // Valeur par défaut : false
  hide?: boolean;

  // L'ordre dans lequel la catégorie doit être affichée
  // Les nombres les plus bas seront affichés en premier
  // Si 2 catégories ont le même ordre, elles seront affichées dans l'ordre où elles ont été définies
  order?: number;

  // Couleurs qu'utiliseront toutes les cotes et tous les POI de cette catégorie
  // Si non fournies, le SDK utilisera les couleurs par défaut de la catégorie
  // Si fournies, les couleurs remplaceront les couleurs par défaut de la catégorie
  // Les valeurs acceptées sont les couleurs hexadécimales et rgb
  colors?: {
    background: string;
    fill: string;
  };

  // Cotes qui seront affichées dans cette catégorie
  scores?: {
    [key in ScoreKey]?: ScoreOptions;
  };
};

type ScoreOptions = {
  // Indique si la cote doit être masquée
  // Si la valeur est true, la cote (et tout ce qui y est associé) ne sera pas affichée
  // dans la barre latérale (sur ordinateur de bureau) ou le menu de bascule des catégories (sur mobile)
  // Valeur par défaut : false
  hide?: boolean;

  // Indique si la valeur de la cote doit être masquée
  // Si la valeur est true, la valeur de la cote ne sera pas affichée dans la barre latérale (sur ordinateur de bureau) ou le menu de bascule des catégories (sur mobile)
  // REMARQUE : si la valeur est true, les cotes sans POI ne seront pas affichées du tout (agissant comme l'option hide)
  // Les cotes sans POI sont : Convivialité piétonne, Convivialité cyclable, Verdure, Tranquillité et Historique,
  // Valeur par défaut : false
  hideScore?: boolean;

  // L'ordre dans lequel la cote doit être affichée
  // Les nombres les plus bas seront affichés en premier
  // Si 2 cotes ont le même ordre, elles seront affichées dans l'ordre où elles ont été définies à l'intérieur de l'objet
  order?: number;
};