Aller au contenu principal

Local Content (version héritée)

ObsolèteÉ.-U. 🇺🇸 et Canada 🇨🇦

Description​

Obsolète

Nos anciens produits sont maintenant obsolètes. Veuillez envisager de migrer vers nos nouvelles offres de produits.

Veuillez utiliser le nouveau Local Content.

Ce widget évalue toutes les caractéristiques d'un emplacement précis. Il affiche les cotes de localisation (Location Scores) et les renseignements connexes, et il peut être ajouté à n'importe quelle inscription au Canada et aux États-Unis.

Capture d'écran de l'interface d'intégration de Local Content

Capture d'écran d'un exemple de Local Content où la cote des écoles a été sélectionnée

Exemple​

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Local Logic - Local Content Example</title>
  </head>
  <body>
    <!-- Élément DOM du widget Local Logic -->
    <div id="local-content"></div>

    <script type="text/javascript">
      // Fonction de rappel appelée lorsque le SDK est prêt à être utilisé
      function initLocallogic() {
        var contentWidget = new locallogic.LocalContent("local-content", {
          lat: 45.501734,
          lng: -73.56542,
          designId: "ll-2019",
        });
      }
    </script>

    <!-- Charger 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 l'espace réservé {YOUR_TOKEN} par le jeton que nous vous avons fourni.

Options​

ParamètreStatutDescription
latrequisUn nombre décimal entre -90 et 90 (latitude)
lngrequisUn nombre décimal entre -180 et 180 (longitude)
designIdrequisValeur de chaîne précisant quel modèle de Local Content doit être chargé. Utilisez 'll-2019' pour la version la plus récente du modèle. Ce paramètre est utilisé pour assurer la compatibilité entre les clients.
localeoptionnelValeur de chaîne qui précise la langue des cotes et de l'interface utilisateur.
Offert : fr (français), en (anglais), en-us (anglais américain).
Par défaut : en
coloroptionnelValeur hexadécimale de la couleur principale.
Par défaut : #017f8f
basemapoptionnelValeur de chaîne qui précise la carte de base du widget.
Lorsque vous sélectionnez la carte de base Google Maps (google), assurez-vous que l'API JavaScript de Google Maps a été chargée. Voici un exemple où le code Local Logic serait placé à l'intérieur de la fonction initMap.
Offert : maptiler, esri, google, bing, osm, mapbox, apple
Par défaut : maptiler
googleStylesoptionnelSi vous sélectionnez la carte de base Google (google), vous pouvez choisir le style que vous voulez ou utiliser un style personnalisé.
Offert : Standard, Silver, Retro, Dark, Night, Aubergine
Par défaut : standard
esriBasemapLayeroptionnelSi vous sélectionnez la carte de base vectorielle Esri (esri), vous pouvez choisir la couche de carte de base que vous voulez.
Offert : Gray, Topographic, Streets, StreetsRelief
Par défaut : Gray
appleMapsTypeoptionnelSi vous sélectionnez la carte de base Apple (apple), vous pouvez choisir le style de carte que vous souhaitez afficher.
Offert : default, satellite, hybrid
Par défaut : default
appleMapsTokenoptionnelSi vous sélectionnez la carte de base (apple), vous devez fournir votre jeton Web JSON MapKit JS
bingMapsKeyoptionnelSi vous sélectionnez la carte de base bing, vous devez fournir votre clé Bing Maps
esriKeyoptionnelSi vous sélectionnez la carte de base esri, vous pouvez fournir votre clé Esri Maps
maptilerKeyoptionnelSi vous sélectionnez la carte de base maptiler, vous pouvez fournir votre clé MapTiler Maps
osmUrloptionnelSi vous sélectionnez la carte de base Open Street Maps (osm), vous pouvez fournir une URL de serveur de tuiles personnalisée
mapboxAccessTokenoptionnelSi vous sélectionnez la carte de base Mapbox (mapbox), vous devez fournir votre jeton d'accès Mapbox
mapboxStyleoptionnelSi vous sélectionnez la carte de base Mapbox (mapbox), vous devez fournir l'URL de votre style Mapbox. par ex. : mapbox://styles/mapbox/streets-v11
maptilerStyleoptionnelSi vous sélectionnez la carte de base Maptiler (maptiler), vous pouvez choisir le style que vous voulez.
Offert :Streets, Bright, Basic
Par défaut : Streets
scrollWheelZoomoptionnelValeur booléenne qui précise si la carte peut être zoomée avec la molette de la souris.
Par défaut : true
houseIconoptionnelXML sous forme de chaîne d'une icône SVG que vous voulez utiliser comme icône de maison sur la carte de Local Content.
mapDraggingoptionnelValeur booléenne qui précise si vous voulez que la carte soit déroulable en vue mobile.
Lorsqu'elle est définie sur true, une superposition sera placée sur la carte pour permettre à la page de défiler même en touchant la carte. Cette fonctionnalité est recommandée pour les implémentations où le widget se trouve sur une page à défilement long. Cette option n'affecte que la vue mobile. En touchant la superposition, celle-ci est retirée, ce qui permet à l'utilisateur d'interagir avec la carte, et un bouton de fermeture apparaîtra pour désactiver la carte.
Par défaut : true
callbackoptionnelUne fonction à appeler lorsque les cotes de localisation ne sont pas offertes pour un emplacement précis.
availablePoisoptionnelCatégories de points d'intérêt (POI) à afficher sur le widget si offertes, séparées par des virgules.
containerHeightoptionnelValeur de chaîne qui précise la hauteur souhaitée du widget sur ordinateur de bureau. Peut être n'importe quelle valeur de hauteur CSS valide, par ex. "600px", "100%", "90vh", etc. Les valeurs inférieures à 450px seront ignorées, car il s'agit de la hauteur minimale optimale du widget pour l'utilisabilité.
Par défaut : "450px"
maxInnerWidthoptionnelValeur numérique précisant la largeur (en pixels) de la section intérieure de votre page Web. Lorsque cette option est définie, la carte remplira l'arrière-plan du widget et la liste des cotes s'alignera à gauche avec la marge gauche de votre page (voir l'image ci-dessous).Cette option est ignorée en affichage mobile et lorsque la largeur du conteneur du widget est inférieure à la valeur précisée pour maxInnerWidth.
scoreOrderoptionnelOption permettant de prédéterminer l'ordre dans lequel les cotes seront affichées, par ex. [‘high_schools’, ‘groceries’, ‘quiet’,…].
poiRadiusoptionnelOption permettant d'étendre le rayon d'affichage des POI par défaut de 2000 mètres (par défaut) à 5000 mètres (1,24 mille à 3,10 milles).
poiLimitoptionnelOption permettant d'étendre le nombre de POI affichés par défaut de 30 (par défaut) à 50.
hasLazyMapoptionnelUne valeur booléenne qui, si elle est définie sur true, fera en sorte que la carte de Local Content ne se charge que lorsque le widget est visible pour l'utilisateur. Cela peut aider à éviter des coûts inutiles auprès de certains fournisseurs de cartes (par ex. Google) qui facturent les chargements de carte même lorsque le widget n'est pas visible pour l'utilisateur, par exemple lorsqu'il est caché derrière un onglet ou si l'utilisateur n'a pas défilé jusqu'à celui-ci.
Valeur par défaut : false

Exemple​

Capture d&#39;écran d&#39;un exemple de maxInnerWidth

Dans cet exemple, l'option maxInnerWidth du widget LocalContent est définie sur 1200.

Comment configurer la Content Security Policy (CSP)​

Afin de vous assurer que MapTiler fonctionne correctement, la CSP du client doit être mise à jour pour inclure ce qui suit :

worker-src blob: ;
child-src blob: ;
img-src data: blob: ;
connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com ;

Pour plus de détails, consultez le site Web de Maptiler

Méthodes​

changeLocation ({lat, lng})​

Pour une application monopage, vous pouvez utiliser cette méthode pour actualiser le widget Local Content vers un nouvel emplacement. Cela évite d'avoir à réinstancier Local Content à chaque fois.

Application monopage​

Exemple React​

Pour ajouter le widget Local Content à votre application monopage, générez un élément HTML dans votre application avec un ID distinctif. Ensuite, configurez un intervalle pour attendre que le SDK soit chargé à l'aide du booléen window.LL_SDK_IS_READY

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Local Logic - Local Content Example</title>
  </head>
  <body>
    <div id="myApp"></div>
    <!-- Charger React. -->
    <!-- Remarque : lors du déploiement, remplacez "development.js" par "production.min.js". -->
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script
      async
      defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}"
    ></script>

    <!-- Charger notre composant React. -->
    <script type="text/javascript">
      "use strict";
      const elem = React.createElement;
      class MyApp extends React.Component {
        constructor(props) {
          super(props);
        }
        render() {
          return elem("div", { id: "local-content-widget" });
        }
        componentDidMount() {
          var llSdkInterval = window.setInterval(function () {
            if (window.LL_SDK_IS_READY) {
              var widget = new locallogic.LocalContent("local-content-widget", {
                lat: 45.50717558,
                lng: -73.5780121,
                designId: "ll-2019",
              });
              window.clearInterval(llSdkInterval);
            }
          }, 100);
        }
      }
      const domContainer = document.querySelector("#myApp");
      ReactDOM.render(elem(MyApp), domContainer);
    </script>
  </body>
</html>
info

Pour tester cet exemple en direct, assurez-vous de remplacer l'espace réservé {YOUR_TOKEN} par le jeton que nous vous avons fourni.

Comment utiliser avec WordPress​

Exemple de base avec WordPress​

Il y a deux étapes pour la façon la plus simple d'implémenter Local Content sur un thème WordPress. Cet exemple utilise le thème twentytwenty.

Étape 1. Ajoutez un div avec un id unique dans le gabarit correspondant. Dans ce cas, template-parts/content.php

<div class="entry-content">

  <?php
  if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
    the_excerpt();
  } else {
    the_content( __( 'Continue reading', 'twentytwenty' ) );
  }
  ?>

  // Widget LOCAL CONTENT
  <div id="local-content" style="max-width: 900px;"></div>

</div><!-- .entry-content -->

Étape 2. Ajoutez les fichiers JavaScript dans le fichier functions.php. Dans cet exemple, nous imprimerons le script dans le pied de page. Cela peut également être fait avec wp_enqueue_script.

add_action('wp_footer', 'locallogic_sdk_wp_footer');
function locallogic_sdk_wp_footer() {
    ?>
    <script>
      function initLocallogic() {
        var contentWidget = new locallogic.LocalContent('local-content', {
            lat: 45.501734,
            lng: -73.56542,
            designId: 'll-2019'
        });
      }
    </script>
    <script async defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic">
    </script>
    <?php
}
info

Pour tester cet exemple en direct, assurez-vous de remplacer l'espace réservé {YOUR_TOKEN} par le jeton que nous vous avons fourni.