Local Schools

Stable

Available in the US and Canada

Example

<!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>
    <!-- Create a Google Maps Control to mount the 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>

Options

Parameter	Status	Description
googleMapsMap	required	The Google Maps map instance you want the Local Schools widget to be associated with. (You must include either this or `leafletMap`)
leafletMap	optional	The Leaflet map instance you want the Local Maps widget to be associated with. (You must include either this or `googleMapsMap`)
locale	optional	String value that specifies the language of the widget. Available: `fr` (French), `en` (English). Default: `en`
color	optional	Hexadecimal value of the main color. Default: `#017f8f`
country	optional	String value that specifies the country which the Local Schools are overlaying. Available: `CA` (Canada), `US` (United States of America) Default: `CA`
filterPanelOpen	optional	Boolean value that specifies if the Score Selector filter panel is open when the widget is instantiated. Default: `false`
maxViewportSize	optional	Number value that specifies maximum viewport size at which the schools will be displayed on the map. Default: `2000000000`
asMapControl	optional	Boolean value that specifies if you are mounting the widget as a Custom Map Control. Default: `false`
detailsMapPosition	optional	String representing the position of the School Details Panel on the map. Available: See Control Positioning for options Default: `RIGHT_TOP`
selectedSchool	optional	String representing a pre-selected school ID. The map will `panTo` to the school.

Methods

isReady ()

Returns a boolean. Don’t call any other methods unless this is true.

schoolsWidget.isReady();

destroy ()

Use this method to remove from the page and the map all elements related to the instance

schoolsWidget.destroy();

categories ()

Returns an array of categories, containing arrays of available school differentiators

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

show (filterArray)

Show different schools on the map without UI interactions

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

selectionAdd

(scoreString) Add a single score to the school differentiators currently showing on the map

schoolsWidget.selectionAdd('french');

selectionRemove

(scoreString) Remove a single score from the school differentiators currently showing on the map

schoolsWidget.selectionRemove('english');

selection ()

Returns an array of currently selected school differentiators

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

selectionHas

(scoreString) Returns a boolean expressing whether or not the specified score is in the current selection

schoolsWidget.selectionHas('english');

disable ()

Disable the school overlay on the map

schoolsWidget.disable();

enable ()

Enable the school overlay on the map

schoolsWidget.enable();

isEnable ()

Returns a boolean expressing whether or not the school overlay is enabled

schoolsWidget.isEnable();

selectSchool (schoolId)

Selects the specified school. Causes the school detail panel to open.

schoolsWidget.selectSchool('c2b2mummz5y2_elemschool');

clearSelectedSchool ()

Clear the selected school

schoolsWidget.clearSelectedSchool();

Events

ll-select-school

Dispatched when the user selects a school. The event contains a detail object with a schoolId property.

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

ll-unselect-school

Dispatched when the user closes the School Details Panel.

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

ll-schools-exceeded-max-viewport

Dispatched the map viewport is too large to display the Local Schools.

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

ll-schools-within-max-viewport

Dispatched the map viewport is small enough to display the Local Schools.

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

Edit this page on GitHub

1 contributor

Last edited by jpvalery on July 31, 2020