Aller au contenu principal

Local Schools

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

Description​

Local Schools est un widget basé sur une carte qui permet aux utilisateurs d'afficher des écoles et leurs zones de fréquentation scolaire sur une carte, avec un filtrage par type, niveau et langues offertes par l'établissement.

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

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>
    <div id="mapContainer">
      <div id="map"></div>
    </div>

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

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

      var schoolsControlDiv = document.createElement("div");
      var schoolsControlComponent = new SchoolsMapControl(
        schoolsControlDiv,
        map,
      );

      schoolsControlDiv.index = 1;
      map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
        schoolsControlDiv,
      );
    </script>

    <script type="text/javascript">
      function initLocallogic() {
        var schoolsWidget = new locallogic.LocalSchools("local-schools", {
          googleMapsMap: map,
          locale: "en",
          color: "#008794",
          asMapControl: true,
        });
      }
    </script>

    <script
      async
      defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic"
    ></script>
  </body>
</html>
info

Veuillez noter que si votre fournisseur de fond de carte n'est pas pris en charge nativement par le SDK Local Schools, 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​

ParameterStatusDescription
googleMapsMaprequisL'instance de carte Google Maps à laquelle vous souhaitez associer le widget Local Schools. (Vous devez inclure soit celle-ci, soit leafletMap)
leafletMapoptionnelL'instance de carte Leaflet à laquelle vous souhaitez associer le widget Local Maps. (Vous devez inclure soit celle-ci, soit googleMapsMap)
localeoptionnelValeur de type chaîne de caractères qui précise la langue du widget.
Disponible : fr (français), en (anglais).
Par défaut : en
coloroptionnelValeur hexadécimale de la couleur principale.
Par défaut : #017f8f
countryoptionnelValeur de type chaîne de caractères qui précise le pays sur lequel les Local Schools sont superposées.
Disponible : CA (Canada), US (États-Unis d'Amérique)
Par défaut : CA
filterPanelOpenoptionnelValeur booléenne qui précise si le panneau de filtre du sélecteur de cotes est ouvert au moment de l'instanciation du widget.
Par défaut : false
maxViewportSizeoptionnelValeur numérique qui précise la taille maximale de la fenêtre d'affichage à laquelle les écoles seront affichées sur la carte.
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
detailsMapPositionoptionnelChaîne de caractères représentant la position du panneau de détails de l'école sur la carte.
Disponible : consultez Control Positioning pour connaître les options
Par défaut : RIGHT_TOP
selectedSchooloptionnelChaîne de caractères représentant l'ID d'une école présélectionnée. La carte effectuera un panTo vers l'école.

Méthodes​

isReady ()​

Retourne une valeur booléenne. N'appelez aucune autre méthode tant que celle-ci n'est pas vraie.

schoolsWidget.isReady();

destroy ()​

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

schoolsWidget.destroy();

categories ()​

Retourne un tableau de catégories, contenant des tableaux des différenciateurs d'écoles disponibles

schoolsWidget.categories();
> [{title: "type",
  scores: ["public", "private"]},
 {title: "level",
  scores: ["elementary", "secondary"]},
 {title: "language",
  scores: ["english", "french", "other"]}]

show (filterArray)​

Affiche différentes écoles sur la carte sans interactions avec l'interface utilisateur

schoolsWidget.show(["elementary", "private", "public", "french", "english"]);

selectionAdd​

(scoreString) Ajoute une seule cote aux différenciateurs d'écoles actuellement affichés sur la carte

schoolsWidget.selectionAdd("french");

selectionRemove​

(scoreString) Retire une seule cote des différenciateurs d'écoles actuellement affichés sur la carte

schoolsWidget.selectionRemove("english");

selection ()​

Retourne un tableau des différenciateurs d'écoles actuellement sélectionnés

schoolsWidget.selection();
> ["french", "private", "elementary"]

selectionHas​

(scoreString) Retourne une valeur booléenne indiquant si la cote spécifiée fait partie ou non de la sélection actuelle

schoolsWidget.selectionHas("english");

disable ()​

Désactive la superposition des écoles sur la carte

schoolsWidget.disable();

enable ()​

Active la superposition des écoles sur la carte

schoolsWidget.enable();

isEnable ()​

Retourne une valeur booléenne indiquant si la superposition des écoles est activée ou non

schoolsWidget.isEnable();

selectSchool (schoolId)​

Sélectionne l'école spécifiée. Ceci provoque l'ouverture du panneau de détails de l'école.

schoolsWidget.selectSchool("c2b2mummz5y2_elemschool");

clearSelectedSchool ()​

Efface l'école sélectionnée

schoolsWidget.clearSelectedSchool();

Événements​

ll-select-school​

Émis lorsque l'utilisateur sélectionne une école. L'événement contient un objet detail avec une propriété schoolId.

document.addEventListener("ll-select-school", function (e) {
  console.log(e.detail);
});

ll-unselect-school​

Émis lorsque l'utilisateur ferme le panneau de détails de l'école.

document.addEventListener("ll-unselect-school", function (e) {
  console.log(e.type);
});

ll-schools-exceeded-max-viewport​

Émis lorsque la fenêtre d'affichage de la carte est trop grande pour afficher les Local Schools.

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

ll-schools-within-max-viewport​

Émis lorsque la fenêtre d'affichage de la carte est suffisamment petite pour afficher les Local Schools.

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