Skip to main content

Local Search

US ๐Ÿ‡บ๐Ÿ‡ธ and Canada ๐Ÿ‡จ๐Ÿ‡ฆ

The Local Search widget helps homebuyers find a property for sale whose location best matches their lifestyle.

How it worksโ€‹

On a page with multiple property listings (for example, on a listing search results page), each listing will be scored according to the location characteristics that the user wants. There are thus two components to the Local Search:

  • The score selector, which allows users to select which Location Scores matter to them
  • The listing score badges, which appear on each property listing

Score Selectorโ€‹

Screenshot of an example of Score Selector

This example represent the grid display for the score selector. The default list is similar to the Local Maps.

Score Badgesโ€‹


For the Local Search to work, youโ€™ll need to add a Score Badge on every listing of your search result page, with a maximum of 35 per search. Every Score Badge must have:

  • A class attribute with the value ll-match-score.
  • A data-id attribute with a unique value per listing. We suggest using the listingโ€™s MLS ID or something similar.
  • A data-la attribute with the latitude value of the location of the listing.
  • A data-lng attribute with the longitude value of the location of the listing.


<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>Local Logic - Local Search Example</title>

<div id="local-search"></div>

<span class="ll-match-score" data-id="mls-1" data-lat="45.653578" data-lng="-73.636561"></span>
<span class="ll-match-score" data-id="mls-2" data-lat="45.501732" data-lng="-73.575345"></span>
<span class="ll-match-score" data-id="mls-3" data-lat="45.499683" data-lng="-73.565832"></span>

<script type="text/javascript">
function initLocallogic () {
var searchWidget = new locallogic.LocalSearch('local-search',{
displayAs: 'grid',
locale: 'fr',
color: '#017f8f'

<script async defer

To test this example live, make sure to replace the YOUR_TOKEN placeholder with the token we provided to you.


Table here

displayAsoptionalString value that specifies how the score selector interface should be displayed.
Available: list, grid
Default: list
localeoptionalString value that specifies the language of the UI interface.
Available: fr (French), en (English).
Default: en
coloroptionalHexadecimal value of the main color.
Default: #017f8f
disableCookieoptionalBoolean value that specifies whether users will always see their personalized Lifestyle Match, even when the page is refreshed or the search results are different. For this to work, the userโ€™s selection of location characteristics is saved in a cookie. Set this option to true is you want to disable this feature.
Default: false


isReady ()โ€‹

Returns a boolean. Donโ€™t call any other methods unless this is true.


match (scoresArray)โ€‹

Update all the Score Badges on the page with a Lifestyle Match score that reflects the specified combination of location characteristics.

searchWidget.match(['transit_friendly', 'groceries', 'quiet']);

categories ()โ€‹

Returns an array of categories, containing arrays of available lifestyle characteristics

> [{title: "transportation",
scores: ["pedestrian_friendly", "transit_friendly", "car_friendly"]},
{title: "services",
scores: ["groceries", "primary_schools", "high_schools", "daycares", "restaurants", "cafes", "nightlife", "shopping"]},
{title: "character",
scores: ["quiet", "vibrant"]}]

selectionAdd (scoreString)โ€‹

Add a single lifestyle characteristic to current selection


selectionRemove (scoreString)โ€‹

Remove a single lifestyle characteristic from the scores currently showing on the map


selection ()โ€‹

Returns an array of currently selected lifestyle characteristics

> ["pedestrian_friendly", "cafes", "quiet"]

selectionHas (scoreString)โ€‹

Returns a boolean expressing whether or not the specified lifestyle characteristic is in the current selection


reloadLocations ()โ€‹

Reloads all the Score Badges attached to the locations on your page. This method is usefull if your page as an async loader.


disable ()โ€‹

Disable the lifestyle match


enable ()โ€‹

Enable the lifestyle match


isEnable ()โ€‹

Returns a boolean expressing whether or not the lifestyle match is enabled