Local Profiles

ObsolèteAnglais et françaisÉ.-U. 🇺🇸 et Canada 🇨🇦

Obsolète

Le SDK Local Profiles est en cours de retrait, et nous mettrons fin au soutien de ce produit au cours de l'année civile 2025. Les utilisateurs autorisés de Local Profiles peuvent contacter leur gestionnaire de compte pour discuter de la mise à niveau vers notre produit de remplacement, NeighborhoodWrap.

Veuillez noter que l'API Profiles n'est pas touchée par ce retrait de produit et continuera d'être prise en charge.

Ce widget affiche des informations relatives à des quartiers, arrondissements, villes et autres zones géographiques précis. Ces informations comprennent les cotes de localisation, les cartes de chaleur, les descriptions textuelles, etc., et sont réparties en trois sections : transport, services et caractère.

Capture d'écran d'un exemple du widget Local Profiles v2

Mise en œuvre

Aperçu

Une mise en œuvre typique de Local Profiles comporte une page Web distincte pour chaque quartier. Chacune de ces pages de quartier affichera les Local Profiles pour ce quartier spécifique, à l'aide du code décrit dans la section Exemple ci-dessous.

Spécifier les quartiers

Pour préciser le quartier à afficher, la façon la plus simple consiste à indiquer son geog_id, un identifiant unique du quartier, comme g30_abcd1234. Lorsque vous signez un contrat avec Local Logic pour Local Profiles, nous vous fournirons l'URL d'un fichier TSV de géographies contenant tous les geog_ids des quartiers que vous avez demandés.

Rester à jour

Les limites des quartiers changent plus souvent qu'on pourrait le penser. Comme la plupart des quartiers n'ont pas de définition légale (contrairement aux limites municipales et nationales), différentes personnes ont souvent des avis divergents sur l'endroit exact où un quartier commence et se termine.

Lorsque nos clients ne sont pas d'accord avec nos limites de quartiers, nous en discutons avec eux, ce qui peut nous amener à modifier nos limites. Cela peut signifier ajuster la forme des limites, ajouter de nouveaux quartiers ou en supprimer.

Par exemple, nous pourrions avoir un quartier appelé Golden Fields. Cependant, un client pourrait vouloir différencier les propriétés situées dans la partie est du quartier de celles situées dans la partie ouest. Nous pourrions donc diviser le quartier en deux : cela entraînerait l'ajout de deux nouveaux quartiers, Golden Fields East et Golden Fields West. Nous pourrions également décider de supprimer le quartier Golden Fields original, ou de le conserver tel quel.

Si de nouveaux quartiers sont ajoutés, vous devrez générer de nouvelles pages Web pour ceux-ci. De même, si des quartiers sont supprimés, vous devrez supprimer ces pages, puisque leurs Local Profiles n'existeront plus. Pour vous assurer d'avoir toujours des pages pour les quartiers les plus récents, et pour éviter d'avoir des pages où les Local Profiles n'apparaissent plus, nous vous recommandons d'interroger automatiquement le fichier TSV de géographies (voir la section Spécifier les quartiers ci-dessus) chaque nuit, et de rafraîchir / régénérer vos pages Web de quartiers.

Exemples

Avec Google Maps

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Local Logic - Local Profiles Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_GOOGLE_KEY}"></script>
    <style type="text/css">
      #gmap {
        width: 100%;
        height: 550px;
      }
    </style>
  </head>

  <body>
    <!-- Élément DOM du widget Local Logic -->
    <div id="local-profile"></div>
    <div id="gmap"></div>
    ​
    <script type="text/javascript">
      var LAT = 45.5017;
      var LNG = -73.5656;
      var gmap = new google.maps.Map(document.getElementById("gmap"), {
        center: {
          lat: LAT,
          lng: LNG,
        },
        zoom: 12,
        disableDefaultUI: true,
      });

      /*
        POUR OBTENIR {GEOID}
        Du côté serveur, obtenez des jetons d'accès avec client_id et un client_secret avant de récupérer 
        les géographies (par exemple, des quartiers, des villes) associées à un emplacement précis.
      */

      async function getGeoId() {
        // Obtenez votre accessToken du côté serveur
        const GET_GEOID_PARAMS = {
          lat: LAT,
          lng: LNG,
        };
        const geoIDResponse = await fetch(
          "https://api.locallogic.co/v3/geographies?" +
            new URLSearchParams(GET_GEOID_PARAMS),
          {
            method: "GET",
            headers: {
              Accept: "application/json",
              Authorization: "Bearer " + { accessToken },
            },
          },
        );
        const geoIDJson = await geoIDResponse.json();
        return Object.keys(geoIDJson.data.geographies)[0];
      }

      async function initLocallogic() {
        var GEOGID = "";
        var geoID = getGeoId().then((data) => {
          GEOGID = data;
          var localProfileWidget = new locallogic.LocalProfile(
            "local-profile",
            {
              geogId: GEOGID,
              leafletMap: lmap,
              defaultCategory: "transportation",
              defaultShowcase: {
                transportation: "pedestrian_friendly",
                services: "groceries",
                character: "quiet",
              },
              color: "#1A326B",
              color2: "#E4F1FA",
              color3: "green",
              hideProfileTexts: false,
              maxInnerWidth: 1000,
              successCallback: function () {
                console.log("successCallback");
              },
              callback: function (err) {
                console.log(err);
              },
            },
          );
        });
      }
    </script>

    <!-- Chargez le SDK Local Logic avec votre jeton Local Logic -->
    <script
      async
      defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic"
    ></script>
  </body>
</html>

info

Pour tester cet exemple en direct, assurez-vous de remplacer le paramètre fictif {YOUR_TOKEN} par le jeton que nous vous avons fourni, ainsi que YOUR_GOOGLE_KEY par votre clé API Google Maps.

attention

Local Profiles nécessite une valeur geogId lorsque les options lat et lng ne sont pas fournies. Un geogId peut être obtenu en suivant deux étapes

Obtenez l'autorisation de l'API v3 à l'aide de votre client_id et de votre client_secret. En savoir plus
Avec le jeton, interrogez le point de terminaison v3/geographies En savoir plus

Remarque : vous ne devez jamais exposer votre client_secret dans du code côté client. Tous les appels d'autorisation de l'API v3 (pour récupérer votre jeton OAuth) doivent être effectués à partir de votre serveur."

Avec Leaflet Map

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Local Logic - Local Profiles Example</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
    <style type="text/css">
      #lmap {
        width: 100%;
        height: 550px;
      }
    </style>
  </head>

  <body>
    <!-- Élément DOM du widget Local Logic -->
    <div id="local-profile"></div>
    <div id="lmap"></div>
    ​
    <script type="text/javascript">
      var LAT = 45.5017;
      var LNG = -73.5656;
      var lmap = L.map("lmap");
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
        lmap,
      );
      lmap.setView([LAT, LNG], 14);

      function initLocallogic() {
        // Fonction de rappel appelée lorsque le SDK est prêt à être utilisé
        var localProfileWidget = new locallogic.LocalProfile("local-profile", {
          geogId: { GEOGID },
          leafletMap: lmap,
          defaultCategory: "transportation",
          defaultShowcase: {
            transportation: "pedestrian_friendly",
            services: "groceries",
            character: "quiet",
          },
          color: "#1A326B",
          color2: "#E4F1FA",
          /* valeur par défaut #333 */
          color3: "green",
          maxInnerWidth: 1000,
          hideProfileTexts: true,
          successCallback: function () {
            console.log("successCallback");
          },
          callback: function (err) {
            window.alert(err);
          },
        });
      }
    </script>
    ​
    <!-- Chargez le SDK Local Logic avec votre jeton Local Logic -->
    <script
      async
      defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic"
    ></script>
  </body>
</html>

info

Pour tester cet exemple en direct, assurez-vous de remplacer le paramètre fictif {YOUR_TOKEN} par le jeton que nous vous avons fourni.

info

Veuillez noter que si votre fournisseur de fond de carte n'est pas pris en charge nativement par le SDK Local Profiles, il pourrait tout de même être pris en charge via l'option leafletMap. Dans ce cas, vous devrez d'abord trouver et mettre en œuvre le plugin Leaflet correspondant au fond de carte que vous souhaitez utiliser. Vous devrez ensuite instancier une nouvelle carte Leaflet en utilisant le fond de carte comme tileLayer. L'instance Leaflet peut être transmise au SDK à l'aide de l'option leafletMap. Veuillez noter qu'une telle configuration sera considérée comme du code personnalisé, et que seules des options de soutien limitées pourraient être disponibles.

Options

Parameter	Status	Description
geogId	requis lorsque `lat` et `lng` ne sont pas fournis	Deux méthodes alternatives permettent de préciser la géographie (c.-à-d. le quartier, l'arrondissement, la ville, etc.) dont le profil sera affiché. Pour obtenir la liste complète de ces identifiants, communiquez avec votre contact principal chez Local Logic, ou écrivez à support@locallogic.co
lat	requis lorsque `geogId` n'est pas fourni	Latitude de la géographie. Un nombre décimal entre -90 et 90
lng	requis lorsque `geogId` n'est pas fourni	Longitude de la géographie. Un nombre décimal entre -180 et 180
googleMapsMap	optionnel	L'instance de carte Google Maps à laquelle vous souhaitez associer le widget Local Profiles. Vous devez inclure soit cette option, soit `leafletMap`
leafletMap	optionnel	L'instance de carte Leaflet à laquelle vous souhaitez associer le widget Local Profiles. Vous devez inclure soit cette option, soit `googleMapsMap`
basemap	optionnel	Valeur de type chaîne de caractères qui précise le fond de carte du widget si vous utilisez l'option `leafletMap`. Disponible : `esri`, `apple` Par défaut : `esri`
appleMapsType	optionnel	Si vous sélectionnez le fond de carte Apple (`apple`), vous pouvez choisir le style de carte que vous souhaitez afficher. Disponible : `default`, `satellite`, `hybrid` Par défaut : `default`
appleMapsToken	optionnel	Si vous sélectionnez le fond de carte (`apple`), vous devez fournir votre jeton Web JSON (JWT) MapKit JS
defaultCategory	optionnel	Précise quelle catégorie de cotes de localisation doit être affichée au chargement du widget Local Profiles. Disponible : `transportation`, `services`, `character` Par défaut : `transportation`
defaultShowcase	optionnel	Précise, pour chaque onglet de catégorie de cotes de localisation, quelle cote de localisation est affichée à l'ouverture de l'onglet. Disponible : `transportation` : `pedestrian_friendly`, `cycling_friendly`, `transit_friendly`, `car_friendly` `services` : `groceries`, `restaurants`, `cafes`, `shopping` `character` : `quiet`, `vibrant`, `nightlife`, `parks` Par défaut : `{transportation: "pedestrian_friendly", services: "groceries", character: "quiet"}`
color	optionnel	Valeur de couleur hexadécimale utilisée pour le texte et les cotes.
color2	optionnel	Valeur de couleur hexadécimale utilisée pour l'icône de la cote de localisation actuellement sélectionnée.
color3	optionnel	Valeur de couleur hexadécimale utilisée pour les onglets des sections de catégories.
maxInnerWidth	optionnel	Valeur entière précisant la largeur, en pixels, de la section intérieure de votre page Web. Lorsque cette option est définie, la carte occupera toute la largeur du widget. Cette option est ignorée sur affichage mobile, ainsi que lorsque la largeur du conteneur du widget est inférieure à la valeur précisée pour `maxInnerWidth`. Par défaut : `1000`
hideProfileTexts	optionnel	Valeur booléenne précisant si la composante textuelle des Local Profiles doit être masquée ou non. Par défaut : `false` (le texte s'affiche)
successCallback	optionnel	Une fonction JavaScript à appeler lorsque des Local Profiles sont disponibles pour un emplacement précis.
callback	optionnel	Une fonction JavaScript à appeler lorsqu'aucun Local Profiles n'est disponible pour un emplacement précis.

Mise en œuvre​

Aperçu​

Spécifier les quartiers​

Rester à jour​

Exemples​

Avec Google Maps​

Avec Leaflet Map​

Options​

Mise en œuvre

Aperçu

Spécifier les quartiers

Rester à jour

Exemples

Avec Google Maps

Avec Leaflet Map

Options