Skip to main content

Local Schools

US πŸ‡ΊπŸ‡Έ and Canada πŸ‡¨πŸ‡¦

Screenshot of an example of the Local Schools widget


<!DOCTYPE html>
<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="">
<link href='' rel='stylesheet'/>
<script src="{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 {
width: 100%;

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

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

schoolsControlDiv.index = 1;

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

<script async defer


Please note that if your basemap provider is not supported natively by the Local Schools SDK, it may still be supported via the leafletMap option. In this case, you will need to first find and implement the Leaflet Plugin corresponding to the basemap you would like to use. You will then need to instantiate a new Leaflet Map using the basemap as your tileLayer. The Leaflet instance can be passed to the SDK with the leafletMap option. Please note that such a configuration will be considered custom code, and only limited support options may be available.


googleMapsMaprequiredThe Google Maps map instance you want the Local Schools widget to be associated with. (You must include either this or leafletMap)
leafletMapoptionalThe Leaflet map instance you want the Local Maps widget to be associated with. (You must include either this or googleMapsMap)
localeoptionalString value that specifies the language of the widget.
Available: fr (French), en (English).
Default: en
coloroptionalHexadecimal value of the main color.
Default: #017f8f
countryoptionalString value that specifies the country which the Local Schools are overlaying.
Available: CA (Canada), US (United States of America)
Default: CA
filterPanelOpenoptionalBoolean value that specifies if the Score Selector filter panel is open when the widget is instantiated.
Default: false
maxViewportSizeoptionalNumber value that specifies maximum viewport size at which the schools will be displayed on the map.
Default: 2000000000
asMapControloptionalBoolean value that specifies if you are mounting the widget as a Custom Map Control.
Default: false
detailsMapPositionoptionalString representing the position of the School Details Panel on the map.
Available: See Control Positioning for options
Default: RIGHT_TOP
selectedSchooloptionalString representing a pre-selected school ID. The map will panTo to the school.


isReady ()​

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


destroy ()​

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


categories ()​

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

> [{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['elementary', 'private', 'public', 'french', 'english']);


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



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


selection ()​

Returns an array of currently selected school differentiators

> ["french", "private", "elementary"]


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


disable ()​

Disable the school overlay on the map


enable ()​

Enable the school overlay on the map


isEnable ()​

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


selectSchool (schoolId)​

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


clearSelectedSchool ()​

Clear the selected 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) });


Dispatched when the user closes the School Details Panel.

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


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

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


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

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