Aller au contenu principal

Local Maps

StableÉ.-U. 🇺🇸 et Canada 🇨🇦

Description​

Local Maps est un outil de recherche basé sur une carte qui permet aux personnes en recherche de logement de sélectionner les caractéristiques d'emplacement qui comptent pour elles et de comparer visuellement les emplacements selon leurs besoins.

Capture d'écran d'un exemple du widget Local Maps

Exemple​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="shortcut icon"
      type="image/png"
      href="https://cdn.locallogic.co/favicon.ico"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
      rel="stylesheet"
    />
    <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_GOOGLE_KEY}"></script>
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
        font-family: "Source Sans Pro";
        font-size: 14px;
      }

      #mapContainer {
        padding: 100px;
        margin: auto;
      }

      #map {
        height: 600px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <!-- Élément DOM de Google Maps -->
    <div id="map"></div>

    <!-- Créer un contrôle Google Maps pour monter le widget -->
    <script type="text/javascript">
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 45.50717558, lng: -73.5780121 },
        zoom: 13,
      });

      var HeatmapsMapControl = function (div, map) {
        var d = document.createElement("div");
        d.setAttribute("id", "local-maps");
        div.appendChild(d);
      };

      var heatmapsControlDiv = document.createElement("div");
      var heatmapsControlComponent = new HeatmapsMapControl(
        heatmapsControlDiv,
        map
      );

      heatmapsControlDiv.index = 1;
      map.controls[google.maps.ControlPosition.LEFT_TOP].push(
        heatmapsControlDiv
      );
    </script>

    <script type="text/javascript">
      // Fonction de rappel appelée lorsque le SDK est prêt à être utilisé
      function initLocallogic() {
        var mapsWidget = new locallogic.LocalMaps("local-maps", {
          googleMapsMap: map,
          locale: "en",
          color: "#017f8f",
          asMapControl: true,
          hiddenScores: ["primary_schools", "high_schools"],
        });
      }
    </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.

info

Veuillez noter que si votre fournisseur de carte de base n'est pas pris en charge nativement par le SDK Local Maps, il pourrait tout de même être pris en charge par l'entremise de l'option leafletMap. Dans ce cas, vous devrez d'abord trouver et mettre en œuvre le Leaflet Plugin correspondant à la carte de base que vous souhaitez utiliser. Vous devrez ensuite instancier une nouvelle carte Leaflet en utilisant la carte de base comme tileLayer. L'instance Leaflet peut être transmise au SDK avec 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 offertes.

Options​

ParamètreStatutDescription
googleMapsMapoptionnelL'instance de carte Google Maps à laquelle vous voulez associer le widget Local Maps. (Vous devez inclure celle-ci ou leafletMap)
leafletMapoptionnelL'instance de carte Leaflet à laquelle vous voulez associer le widget Local Maps. (Vous devez inclure celle-ci ou googleMapsMap)
localeoptionnelValeur de chaîne qui précise la langue du widget.
Offert : fr (français), en (anglais).
Par défaut : en
coloroptionnelValeur hexadécimale de la couleur principale.
Par défaut : #017f8f
showZoomButtonoptionnelValeur booléenne qui précise si le bouton de zoom avant est visible.
Par défaut : true
maxViewportSizeoptionnelValeur numérique qui précise la taille maximale de la fenêtre d'affichage à laquelle les superpositions de cartes thermiques seront affichées.
Par défaut : 2000000000
asMapControloptionnelValeur booléenne qui précise si vous montez le widget en tant que contrôle de carte personnalisé.
Par défaut : false
hiddenScoresoptionnelTableau des cotes que vous voulez masquer dans le sélecteur de cotes.
Important : Lorsque vous utilisez Local Schools avec Local Maps, vous devez préciser ['high_schools', 'primary_schools'] pour retirer les cotes liées aux écoles de Local Maps.
Exemple : ['groceries', 'car_friendly']
Par défaut : []
displayAsoptionnelValeur de chaîne qui définit comment le menu Style de vie sera affiché. Le réglage par défaut est list. Si défini sur grid, la liste des options de style de vie apparaîtra sous forme de grille plutôt que de liste.
countryoptionnelValeur de chaîne qui précise le pays sur lequel Local Maps est superposé.
Offert : CA (Canada), US (États-Unis d'Amérique)
Par défaut : CA
attention

Si Local Maps est initialisé aux États-Unis, le paramètre country doit être défini sur US

Méthodes​

isReady ()​

Retourne une valeur booléenne. N'appelez aucune autre méthode à moins que celle-ci ne soit true.

mapsWidget.isReady();

destroy ()​

Utilisez cette méthode pour retirer de la page et de la carte tous les éléments liés à l'instance

mapsWidget.destroy();

categories ()​

Retourne un tableau de catégories, contenant des tableaux des cotes offertes

mapsWidget.categories();
> [{title: "transportation",
  scores: ["pedestrian_friendly", "transit_friendly", "car_friendly"]},
 {title: "services",
  scores: ["groceries", "primary_schools", "high_schools", "daycares", "restaurants", "cafes", "nightlife", "shopping"]},
 {title: "character",
  scores: ["quiet", "vibrant"]}]

show (scoresArray)​

Précisez un tableau des cotes à afficher sur la carte

mapsWidget.show(["transit_friendly", "groceries", "quiet"]);

selectionAdd (scoreString)​

Ajoutez une seule cote aux cotes actuellement affichées sur la carte

mapsWidget.selectionAdd("cafes");

selectionRemove (scoreString)​

Retirez une seule cote des cotes actuellement affichées sur la carte

mapsWidget.selectionRemove("groceries");

selection ()​

Retourne un tableau des cotes actuellement sélectionnées

mapsWidget.selection();
> ["pedestrian_friendly", "cafes", "quiet"]

selectionHas (scoreString)​

Retourne une valeur booléenne indiquant si la cote précisée fait partie ou non de la sélection actuelle

mapsWidget.selectionHas("groceries");

disable ()​

Désactivez les superpositions de cartes thermiques sur la carte

mapsWidget.disable();

enable ()​

Activez les superpositions de cartes thermiques sur la carte

mapsWidget.enable();

isEnable ()​

Retourne une valeur booléenne indiquant si les superpositions de carte sont activées ou non

mapsWidget.isEnable();

Événements​

ll-heatmaps-exceeded-max-viewport​

Envoyé lorsque la fenêtre d'affichage de la carte est trop grande pour afficher Local Maps.

document.addEventListener("ll-heatmaps-exceeded-max-viewport", function () {
  console.log("some action");
});

ll-heatmaps-within-max-viewport​

Envoyé lorsque la fenêtre d'affichage de la carte est suffisamment petite pour afficher Local Maps.

document.addEventListener("ll-heatmaps-within-max-viewport", function () {
  console.log("some action");
});