The Schools Widget shows nearby elementary schools, high schools and child care on an interactive map. Visitors can compare walking times, available school details and test scores where provided.
Installation
Add the container and widget script to your page. Replace the public widget key and coordinates with your own values.
<div id="prox-schools"></div>
<script src="https://widget.proximitii.com/v1/core/proximitii-widget.js?v=73"></script>
<script>
ProximitiiWidgets.schools({
container: 'prox-schools',
widgetKey: 'PUT_YOUR_WIDGET_KEY_HERE',
lat: 40.778832684988224,
lon: -73.98103168840414
});
</script>Always provide a valid widgetKey, lat and lon. The remaining settings are optional and use the defaults below. The default radius is 6,400 metres.
Customization
Pass optional settings in the ProximitiiWidgets.schools configuration object. The sandbox's preview width changes its test area; it is not a widget setting.
Location and Content Options:
| Name | Description | Default Value | Accepted Values | Variable / Function |
|---|---|---|---|---|
| Container | ID of the element where the widget renders. | N/A | Valid element ID | container |
| Widget Key | Your public widget key. | N/A | Valid widget key | widgetKey |
| Latitude | Center latitude. | N/A | -90 to 90 | lat |
| Longitude | Center longitude. | N/A | -180 to 180 | lon |
| Radius | Search radius in metres. | 6400 | Integer from 100 to 6,400 | radius |
| Country | Country dataset for the location. | us | us or ca | country |
| Title | Heading above the map. | Schools & Child Care | Text, up to 50 characters | title |
| Title Font Size | Heading size. | 30px | 10px to 50px | titleFontSize |
| School Categories | Selects the visible tabs. Include at least one category. | All three | Array containing elem, high and/or childcare | categories |
| Maximum Schools Per Category | Limits listings in each selected category. | 25 | Integer from 1 to 25 | maxSchoolsPerCategory |
| Default Sort | Initial order of the school list. | distance | distance, name, score or assigned | defaultSchoolSort |
Score and assigned-school sorting apply to school listings. If you show only child care, use distance or name.
Appearance and Map Options:
| Name | Description | Default Value | Accepted Values | Variable / Function |
|---|---|---|---|---|
| Primary Color | Main brand color, including map markers. | #607eb8 | Hex color | primaryColor |
| Show Border | Shows or hides the widget border. | true | true or false | showBorder |
| Box Style | Widget container styling. | shadow | shadow or flat | boxStyle |
| Font Family | Widget font. | Poppins, sans-serif | CSS font family | fontFamily |
| Map Style | Map presentation. | light | light, modern, bright or baseline | mapStyle |
| Show School District Boundary | Shows the district boundary where available. | true | true or false | showSchoolDistrictBoundary |
| Disable Gesture Handling | Allows scrolling to zoom without Ctrl/Command when enabled. | false | true or false | disableGestureHandling |
Download Report
Set downloadReportMode to control the report button. The default referral mode opens the Local Insights report flow. Use lead for a contact form, or hidden to remove the button.
| Mode | What visitors see | Setting |
|---|---|---|
referral (default) | Download Report button opening the Local Insights report flow. | downloadReportMode: 'referral' |
lead | Download Report button with a contact form. | downloadReportMode: 'lead' |
hidden | No Download Report button. | downloadReportMode: 'hidden' |
For example, add downloadReportMode: 'lead' after lon in the installation call. Add a comma after the lon value first.