Using the SDK

Table of contents

Simple example
Multiple products
Custom UI
- In this example
- Result

Stable

Table of contents

Simple example
Multiple products
Custom UI
- In this example
- Result

When the SDK is loaded and ready, it will call the function initLocallogic. Note: the name of this function must be the same as that specified in the callback script src attribute).

All the SDK’s functionalities and classes are inside the namespace locallogic.

When you create an instance of one of the LocalLogic classes, the first parameter is a string identifier of the DOM element to which the LocalLogic UI will be appended. The second parameter is a dictionary of options.

Simple example

<!DOCTYPE html>
<html>
  <head>
    <title>Local Logic SDK Example</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <!-- Local Logic Widget DOM element -->
    <div id="local-content-widget"></div>
    <!-- Script containing the initLocallogic callback -->
    <script>
      function initLocallogic () {
        var widget = new locallogic.LocalContent('local-content-widget', {
          lat: 45.50717558,
          lng: -73.5780121,
          locale: 'en',
          designId: 'll-2019'
        })
      }
    </script>
    <!-- Load the Local Logic SDK with your token -->
    <script async defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic">
    </script>
  </body>
</html>

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

Multiple products

This example showcases multiple product instances being created inside the same callback function.

Important: If implementing multiple products on the same page, you must create all instances within the callback function (initLocallogic in the example)

<!DOCTYPE html>
<html>
  <head>
    <title>Local Logic SDK Multiple Products</title>
    <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;
      }
      #map {
        height:600px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <!-- Google Maps DOM element -->
    <div id="map"></div>
    <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>
    <!-- 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>
    <!-- Local Schools and Local Search widgets in the same callback -->
    <script type="text/javascript">
      function initLocallogic () {
        var schoolsWidget = new locallogic.LocalSchools('local-schools', {
          googleMapsMap: map,
          locale: 'en',
          color: '#008794',
          asMapControl: true
        });
        var searchWidget = new locallogic.LocalSearch('local-search',{
          displayAs: 'grid',
          locale: 'fr',
          color: '#017f8f'
        });
      }
    </script>
    <script async defer
      src="https://cdn.locallogic.co/sdk/?token={YOUR_TOKEN}&callback=initLocallogic">
    </script>
  </body>
</html>

To test this example live, make sure to replace the YOUR_TOKEN placeholder with the token we provided to you and the `YOUR_GOOGLE_KEY with your Google Maps API key.

Custom UI

Currently only available for the filters of LocalMaps, LocalSchools, and LocalSearch,. For customization of other widgets and UI components including school info panel, please use CSS overrides.

In this example

In the initLocallogic callback, we create an instance of LocalMaps and an instance of LocalSchools. To prevent the SDK from appending a filter UI to the DOM, we simply omit the string identifier and pass only the options dictionary as a parameter.
We set an interval to check that the instances are ready before we call any of their methods.
We create and append to the DOM a custom UI for each widget. (The use of jQuery is entirely optional)

The methods used in creation of the custom UI are documented below. For example, see Local Maps methods.

<!DOCTYPE html>
<html>
<head>
  <title>Custom UI - LocalMaps and Local Schools</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_GOOGLE_KEY}"></script>
  <style type="text/css">
    body {
      padding: 20px;
      font-size: 11px;
      font-family: sans-serif;
    }
    #llMap {
      height: 600px;
      float: left;
      margin-left: 20px;
      width: 600px;
      border-radius: 5px;
      border: 1px solid #DDD;
    }
    #llControls {
      float: left;
      width: 200px;
      min-height: 600px;
    }
    .filters-on-off, .filters {
      border: none;
      padding: 0;
      margin: 0;
    }
    .filters-on-off {
      height: 1em;
      display: block;
      line-height: 1em;
      font-size: 12px;
      margin-bottom: 1em;
    }
    .filters {
      margin-bottom: 2em;
    }
    .filters-on-off label,
    .filters label {
      margin-right: 1em;
    }
    .filters label svg,
    .filters label input {
      float: left;
      width: 1.4em;
      height: 1.4em;
      margin: 0 0.5em 0 0;
    }
    .filters label {
      font-size: 1em;
      display: block;
      overflow: hidden;
      margin: 0.5em 0;
      line-height: 1.4em;
      vertical-align: middle;
    }
    .filters label:hover,
    .filters label.filter-selected {
      font-weight: bold;
    }
    .filters .category-title {
      display: block;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
<div id="llControls" style=""></div>
<div id="llMap" style=""></div>
 <script type="text/javascript">
  map = new google.maps.Map(document.getElementById('llMap'), {
    center: { lat: 45.5017, lng: -73.5673 },
    zoom: 14,
    disableDefaultUI: true,
  });
 </script>
  <script type="text/javascript">
    window.initLocallogic = function () {
      var locale = 'en';
      var $mapAssistantContainer = jQuery('<div>', {
        class: 'map-assistant'
      });
      window.llHeatmaps = new locallogic.LocalMaps({
        googleMapsMap: map,
        locale: locale
      });
      window.llSchools = new locallogic.LocalSchools({
        googleMapsMap: map,
        locale: locale
      });
      function createFilterUI(id, llWidget, bTitles, bIcons) {
        function toggleFilters(e) {
          var $this = jQuery(e.target);
          if (!llWidget.isEnable()) {
            llWidget.enable();
            $container.addClass('activated');
          } else {
            llWidget.disable();
            $container.removeClass('activated');
          }
        }
        function toggleSelection(e) {
          var $this = jQuery(e.target);
          var score = $this.prop('value');
          $this.parent().toggleClass('filter-selected');
          if (!llWidget.isEnable()) {
            llWidget.enable();
            $container.addClass('activated');
            $onRadio.prop('checked', true);
            $offRadio.prop('checked', false);
          }
          if(!llWidget.selectionHas(score)) {
            llWidget.selectionAdd(score);
          } else {
            llWidget.selectionRemove(score);
          }
        }
        var $container = jQuery('<div>', {
          class: (llWidget.isEnable()) ? id + '-container activated' : id + '-container'
        });
        var $onOff = jQuery('<fieldset>', {
          id: id + 'OnOff',
          class: 'filters-on-off'
        });
        var $on = jQuery('<label>', {
          text: locallogic._dictionary[id + '-on'][locale],
        });
        var $onRadio = jQuery('<input>', {
          type: 'radio',
          value: 'on',
          name: id + 'OnOff',
          checked: llWidget.isEnable(),
          change: toggleFilters
        });
        var $off = jQuery('<label>', {
          text: locallogic._dictionary[id + '-off'][locale]
        });
        var $offRadio = jQuery('<input>', {
          type: 'radio',
          value: 'off',
          name: id + 'OnOff',
          checked: (!llWidget.isEnable()),
          change: toggleFilters
        });
        $onRadio.appendTo($on);
        $offRadio.appendTo($off);
        $on.appendTo($onOff);
        $off.appendTo($onOff);
        $onOff.appendTo($container);
        var $categoriesList = jQuery('<fieldset>', { class: 'filters' });
        jQuery.each(llWidget.categories(), function (index, category) {
          if (bTitles) {
            var $title = jQuery('<span>', { class: 'category-title' });
            $title.text(locallogic._dictionary[category.title][locale]);
            $title.appendTo($categoriesList);
          }
          jQuery.each(category.scores, function (index, score) {
            var $filterItem = jQuery('<label>', {
              class: (llWidget.selectionHas(score)) ? id + '-filter filter-selected' : id + '-filter',
              text: locallogic._dictionary[score][locale]
            });
            var $filterItemCheckbox = jQuery('<input>', {
              value: score,
              type: 'checkbox',
              checked: llWidget.selectionHas(score),
              change: toggleSelection
            });
            $filterItemCheckbox.appendTo($filterItem);
            if (bIcons) {
              var $filterItemIcon = jQuery('<span>', {
                html: locallogic._icons[score]
              });
              $filterItemIcon.appendTo($filterItem);
            }
            $filterItem.appendTo($categoriesList);
          });
        });
        $categoriesList.appendTo($container);
        document.addEventListener('ll-' + id + '-exceeded-max-viewport', function () {
          console.log('The map viewport is too large to display the ' + id);
        });
        document.addEventListener('ll-' + id + '-within-max-viewport', function () {
          console.log('The map viewport is small enough to display the ' + id);
        });
        return $container;
      }
      var isReadyInterval = window.setInterval(function () {
        if (window.llHeatmaps.isReady() && window.llSchools.isReady()) {
          $mapAssistantContainer.append(createFilterUI('heatmaps', window.llHeatmaps, false, true));
          $mapAssistantContainer.append(createFilterUI('schools', window.llSchools, true, false));
          $('#llControls').append($mapAssistantContainer);
          window.clearInterval(isReadyInterval);
        }
      }, 100);
    }
  </script>
  <script async defer
    src="https://cdn.locallogic.co/sdk/?token={TOKEN}&callback=initLocallogic">
  </script>
</body>
</html>