Skip to main content
GuidesAPI ReferenceExamples

Store Locator using Filters Controls

Estimated reading time: 7 minutes

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.

info

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. In this project we use a local web server.

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.

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);

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.

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);

Complete example code​

// 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);

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:

Right-click on the links and select Save As.

JavaScript Examples​

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