Widget Install Instructions
Caution: Installing this widget should only be done by web administrators/developers
The following example demonstrates how to install the ORM search widget:
<html>
<head>
<title>Add ORM Search Widget</title>
<link rel=”stylesheet” type=”text/css” href=”./style.css” />
<script type=”module” src=”./index.js”></script>
</head>
<body>
<h3>ORM Search Widget Demo</h3>
<!–The div element for the widget –>
<div id=”orm_search_widget”></div>
<!– Loading script for the widget –>
<script>
(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, ‘script’, ‘orm’, ‘https://edge.oneredmaple.com/scripts/orm-search-bar-v1.0.1.js’));
orm(‘init’, { lat:44.2316078, lon:-76.4819146, boundaries:[[{“lon”:-76.4749561,”lat”:44.232375},{“lon”:-76.4789473,”lat”:44.2328823},{“lon”:-76.478738,”lat”:44.2340431},{“lon”:-76.4798699,”lat”:44.2350809},{“lon”:-76.4825951,”lat”:44.2347004},{“lon”:-76.4825645,”lat”:44.2334858},{“lon”:-76.4838305,”lat”:44.233701},{“lon”:-76.48397,”lat”:44.2327709},{“lon”:-76.4931646,”lat”:44.2340892},{“lon”:-76.4927998,”lat”:44.2322059},{“lon”:-76.4845282,”lat”:44.2309554},{“lon”:-76.4852018,”lat”:44.2300573},{“lon”:-76.4825947,”lat”:44.2288955},{“lon”:-76.4833779,”lat”:44.2281191},{“lon”:-76.4826376,”lat”:44.2271811},{“lon”:-76.4795048,”lat”:44.2275732},{“lon”:-76.4749561,”lat”:44.232375}]] });
</script>
</body>
</html>
Instructions
Note: this may require making changes to the theme of your website. Refer to the documentation of your CMS for instructions.
Add a div element to the markup of your website. (e.g. under the main menu or below the main header)
<div id=”orm_search_widget“></div>
Within the very end of the body tag, add the loader scriptlet with the required parameters:
<script>
(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, ‘script’, ‘orm’, ‘https://edge.oneredmaple.com/scripts/orm-search-bar-v1.0.1.js’));
orm(‘init’, { lat:44.2316078, lon:-76.4819146, boundaries:[[{“lon”:-76.4749561,”lat”:44.232375},{“lon”:-76.4789473,”lat”:44.2328823},{“lon”:-76.478738,”lat”:44.2340431},{“lon”:-76.4798699,”lat”:44.2350809},{“lon”:-76.4825951,”lat”:44.2347004},{“lon”:-76.4825645,”lat”:44.2334858},{“lon”:-76.4838305,”lat”:44.233701},{“lon”:-76.48397,”lat”:44.2327709},{“lon”:-76.4931646,”lat”:44.2340892},{“lon”:-76.4927998,”lat”:44.2322059},{“lon”:-76.4845282,”lat”:44.2309554},{“lon”:-76.4852018,”lat”:44.2300573},{“lon”:-76.4825947,”lat”:44.2288955},{“lon”:-76.4833779,”lat”:44.2281191},{“lon”:-76.4826376,”lat”:44.2271811},{“lon”:-76.4795048,”lat”:44.2275732},{“lon”:-76.4749561,”lat”:44.232375}]] });
</script>
Within the very end of the body tag, add the loader scriptlet with the required parameters:
Replace the above parameters with ones that suit your needs.
Parameters
lat: Latitude of the location for which the search bar will search from
lon: Longitude of the location from which the search bar search from
boundaries: An array of boundaries to geofence the results if desired. (Leave blank to use a basic radius instead). This is an array of arrays containing objects ( {lat: ##.###, lon:##.###} ).
Note: The geopoints should be listed in counterclockwise order and should have the same starting coordinate as the ending coordinate. The above example geofences the Kingston downtown.
The widget should appear automatically upon loading the website.