Store Locator using Filters Controls

This guide shows you how to add data filters to a store locator using controls.

The finished example will look like this:

See the example fullscreen

When to use

• The entire store location data set is relatively big.

• The data set can be filtered using properties or by distance.

What is needed

• Magic Lane API key token

• Web server (an example is provided)

• SVG file of the store logo (or use our sample SVG)

• Store locator using Magic Lane JavaScript controls

Setup

Get your Magic Lane API key token: if you do not have a token, see the Getting Started guide.

This project needs a web server. If you do not have access to a web server, you can easily install a local web server, see the Installing a Local Web Server guide.

Adding controls

To see how to add Studio Query data control, store list control, free text search control and distance control check out the guide Store Locator using Studio Query Data Source.

You can also use the filters controls with any data source of your choice from our use cases.

Adding category radio type filter

A radio type filter has been added using the data property rate. To add this kind of filter you can use the control gem.control.CategoryFilterControl with the option style: 'radio'. The filter options are defined using categories and the property name should hold a unique identifier for the filter control.

JavaScript

const categoryRadioRateFilter = new gem.control.CategoryFilterControl({
    parentContainer: 'filter-category-rate',
    name: 'byRate',
    style: 'radio',
    title: 'Filter by Rate',
    categories: [
      { label: 'any', filter: { key: '', value: '' } },
      { label: '3', filter: { key: 'rate', value: '3' } },
      { label: '3h', filter: { key: 'rate', value: '3h' } }
    ]
}, studioQueryControl);
defaultAppScreen.addControl(categoryRadioRateFilter);

HTML

...
<div id="map-canvas" style="width: 75%; left: 25%; height: 100%; position: absolute; overflow: hidden">
  <div id="filters-container" class="filters-container">
      <div id="filter-category-rate" class="filter-category2"></div>
      <div id="filter-distance" class="filter-distance"></div>
  </div>
</div>
...

Adding category checkboxes filter

A filter with the checkboxes style has been added using the data property kinds. To add this kind of filter you can use the control gem.control.CategoryFilterControl with the option style: 'checkboxes'. The filter options are defined using categories and the property name should hold a unique identifier for the filter control.

JavaScript

const categoryCheckboxFilterControl = new gem.control.CategoryFilterControl({
    parentContainer: 'filter-category-kind',
    name: 'byKindCheckboxes',
    style: 'checkboxes',
    title: 'Filter by kind',
    categories: [
      {
            label: 'Food', filter: { key: '', value: '' }, children:
              [
                { label: 'Cafes', filter: { key: 'kinds', value: 'cafes,foods,tourist_facilities' } },
                { label: 'Restaurants', filter: { key: 'kinds', value: 'restaurants,foods,tourist_facilities' } },
                { label: 'Restaurants, Historic Architecture', filter: { key: 'kinds', value: 'historic_architecture,architecture,interesting_places,restaurants,foods,tourist_facilities,other_buildings_and_structures' } }
              ]
      },
      {
            label: 'Visit', filter: { key: '', value: '' }, children:
              [
                { label: 'Art Galleries', filter: { key: 'kinds', value: 'national_museums,museums,cultural,interesting_places,art_galleries' } },
                { label: 'Museums', filter: { key: 'kinds', value: 'museums,cultural,interesting_places,other_museums' } },
                { label: 'Historic Monuments', filter: { key: 'kinds', value: 'fortifications,historic,monuments_and_memorials,interesting_places,castles,monuments' } }
              ]
      }
    ]
}, studioQueryControl);
defaultAppScreen.addControl(categoryCheckboxFilterControl);

HTML

...
<div id="map-canvas" style="width: 75%; left: 25%; height: 100%; position: absolute; overflow: hidden">
  <div id="filters-container" class="filters-container">
    <div id="filter-category-kind" class="filter-category1"></div>
    <div id="filter-category-rate" class="filter-category2"></div>
    <div id="filter-distance" class="filter-distance"></div>
  </div>
</div>
...

Complete example code

JavaScript

// Start by setting your token from https://developer.magiclane.com/api/projects
if (gem.core.App.token === undefined) gem.core.App.token = '';

const defaultAppScreen = gem.core.App.initAppScreen({
    container: 'map-canvas',
    zoom: 10,
    center: [48.8562, 2.3516, 100000]
});

const studioQueryControl = new gem.control.StudioQueryDataControl('1973209755' /* studio data source id */, '', {
    markerBubble: {
            title: ['name'],
            image: ['preview']
    }
});
defaultAppScreen.addControl(studioQueryControl);

const searchControl = new gem.control.DataQuerySearchControl({
    highlightOptions: {
            contourColor: { r: 0, g: 255, b: 0, a: 0 }
    },
    searchPreferences: {
            maximumMatches: 3,
            addressSearch: false,
            mapPoisSearch: false,
            setCursorReferencePoint: true
    },
    searchResults: {
            initialPlaceSearch: 'Paris'
    }
}, studioQueryControl);
defaultAppScreen.addControl(searchControl);

const listUIControl = new gem.control.ListControl({
    sourceControl: studioQueryControl,
    container: 'stores-list',
    displayCount: true,
    flyToItemAltitude: 250,
    menuName: 'Store Locator Example',
    titleProperties: ['name'],
    detailsProperties: ['kinds'],
    imageProperty: ['preview']
});
defaultAppScreen.addControl(listUIControl);

const distanceFilterControl = new gem.control.DistanceFilterControl({
    parentContainer: 'filter-distance',
    name: 'byRadius',
    style: 'dropdown',
    title: 'Search radius (km)',
    thresholds: [10, 25, 50, 100, 200],
    eUnit: 'km'
}, studioQueryControl);

const categoryCheckboxFilterControl = new gem.control.CategoryFilterControl({
    parentContainer: 'filter-category-kind',
    name: 'byKindCheckboxes',
    style: 'checkboxes',
    title: 'Filter by kind',
    categories: [
            {
                    label: 'Food', filter: { key: '', value: '' }, children:
                            [
                                    { label: 'Cafes', filter: { key: 'kinds', value: 'cafes,foods,tourist_facilities' } },
                                    { label: 'Restaurants', filter: { key: 'kinds', value: 'restaurants,foods,tourist_facilities' } },
                                    { label: 'Restaurants, Historic Architecture', filter: { key: 'kinds', value: 'historic_architecture,architecture,interesting_places,restaurants,foods,tourist_facilities,other_buildings_and_structures' } }
                            ]
            },
            {
                    label: 'Visit', filter: { key: '', value: '' }, children:
                            [
                                    { label: 'Art Galleries', filter: { key: 'kinds', value: 'national_museums,museums,cultural,interesting_places,art_galleries' } },
                                    { label: 'Museums', filter: { key: 'kinds', value: 'museums,cultural,interesting_places,other_museums' } },
                                    { label: 'Historic Monuments', filter: { key: 'kinds', value: 'fortifications,historic,monuments_and_memorials,interesting_places,castles,monuments' } }
                            ]
            }
    ]
}, studioQueryControl);

const categoryRadioRateFilter = new gem.control.CategoryFilterControl({
    parentContainer: 'filter-category-rate',
    name: 'byRate',
    style: 'radio',
    title: 'Filter by Rate',
    categories: [
            { label: 'any', filter: { key: '', value: '' } },
            { label: '3', filter: { key: 'rate', value: '3' } },
            { label: '3h', filter: { key: 'rate', value: '3h' } }
    ]
}, studioQueryControl);

defaultAppScreen.addControl(distanceFilterControl);
defaultAppScreen.addControl(categoryCheckboxFilterControl);
defaultAppScreen.addControl(categoryRadioRateFilter);

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
    <title>Store Locator Filters Controls - MagicLane Maps SDK for JavaScript</title>
    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css" />
    <link rel="stylesheet" href="/fonts/webfonts.css" type="text/css" media="all" />

    <style>
      .filters-container {
        position: absolute;
        width: 30%;
        max-width: 300px;
        right: 0px;
        top: 50px;
        margin: 8px;
        z-index: 9;
        font-size: 0.7rem;
        background-color: white;
        box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);
      }
    </style>
  </head>

  <body>
    <div id="store-locator" style="width: 100%; height: 100%">
      <div id="stores-list" class="menu-list-container" style="width: 25%; height: 100%; position: absolute"></div>
      <div id="map-canvas" style="width: 75%; left: 25%; height: 100%; position: absolute; overflow: hidden">
        <div id="filters-container" class="filters-container">
          <div id="filter-category-kind" class="filter-category1"></div>
          <div id="filter-category-rate" class="filter-category2"></div>
          <div id="filter-distance" class="filter-distance"></div>
        </div>
      </div>
    </div>

    <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
    <script type="text/javascript" src="token.js"></script>
    <script type="text/javascript" src="storeFiltersControls03.js"></script>
  </body>
</html>

Files

The finished example consists of the project directory containing 2 files:

• JavaScript code (.js file extension)

• HTML code (.html file extension)

To run the example, the HTML file is loaded in a browser.

Source code for this example:

JavaScript
HTML

right-click on the links and select Save As.

Related

See Store Locator with Custom Markers Using Data Labels for an example how to customize the store markers.

See Store Locator with different Marker Groups Styles for an example how to customize the store marker groups.

See Store Locator using GeoJSON Data Source with Custom Marker Bubbles for an example how to customize the marker information bubbles.

See Store Locator using GeoJSON Data Source with Custom List Control for an example how to customize the list items.

JavaScript Examples

Maps SDK for JavaScript Examples can be downloaded or cloned with Git