Skip to content

Local Schools

Stable
Available in the US and Canada

Screenshot of an example of the Local Schools widget

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

ParameterStatusDescription
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.

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 contributorjpvalery
Last edited by jpvalery on July 31, 2020