Skip to main content
GuidesAPI ReferenceExamples

Store Locator with different Marker Groups Styles

Estimated reading time: 6 minutes

This guide shows how the appearance of the marker groups style can be customized using previously added data source controls for your stores data.

What is needed​

  • Magic Lane API key token
  • Web server

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 data source control, store list control and free text search control check out the guides:

Store Locator with Marker Groups displayed with Circle Style​

The finished example using the marker grouping circle style will look like this:

See the example fullscreen

How it works​

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

var defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    zoom: 11,
    center: [48.85671, 2.35138], // Paris latitude and longitude
    style: "./Printemps.style"
});

let searchControl = new gem.control.SearchControl({
    highlightOptions: {
            contourColor: { r: 0, g: 255, b: 0, a: 0 }
    },
    searchPreferences: {
        maximumMatches: 3,
        addressSearch: true,
        mapPoisSearch: true,
        setCursorReferencePoint: true
    }
});
defaultAppScreen.addControl(searchControl);

let queryAddedDataControl = new gem.control.QueryAddedDataControl(
    {
        languages: ["en"],
        storeId: 1,
    },
    "icon.svg",
    {
        marker: {
                highlightClass: 'highlight-store-marker'
        },
        markerBubble: {
                title: ['name'],
                image: ['preview'],
        },
        markerGrouping: {
                maxLevel: 15,
                style: gem.control.MarkersGroupStyleType.circle
        }
    }
);

let listUIControl = new gem.control.ListControl({
    sourceControl: queryAddedDataControl,
    container: "menu-list-container",
    displayCount: true,
    flyToItemAltitude: 250, // meters
    menuName: 'Circle Marker Groups Example',
    titleProperties: ['name'],
    imageProperty: ['preview']
});

defaultAppScreen.addControl(queryAddedDataControl);
defaultAppScreen.addControl(listUIControl);

The data source control option markerGrouping.style is used to change the marker groups appearance from the default style to the circles images.

Files​

Right-click on the links and select Save As.

Store Locator with Custom Marker Groups​

The finished example using a custom marker grouping style will look like this:

See the example fullscreen

How it works​

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

var defaultAppScreen = gem.core.App.initAppScreen({
    container: "map-canvas",
    zoom: 11,
    center: [48.85671, 2.35138], // Paris latitude and longitude
    style: "./Printemps.style"
});

let searchControl = new gem.control.SearchControl({
    highlightOptions: {
        contourColor: { r: 0, g: 255, b: 0, a: 0 },
    },
    searchPreferences: {
        maximumMatches: 3,
        addressSearch: true,
        mapPoisSearch: true,
        setCursorReferencePoint: true
    }
});
defaultAppScreen.addControl(searchControl);

let queryAddedDataControl = new gem.control.QueryAddedDataControl(
    {
        languages: ["en"],
        storeId: 1
    },
    "icon.svg",
    {
        marker: {
            highlightClass: 'highlight-store-marker'
        },
        markerBubble: {
            title: ['name'],
            image: ['preview']
        },
        markerGrouping: {
            maxLevel: 15,
            style: gem.control.MarkersGroupStyleType.custom,
            markerGroupFunction: function (groupsize) {
                let customGroupDiv = document.createElement('div');
                customGroupDiv.className = 'store-marker-group';
                if (groupsize > 100) {
                    customGroupDiv.classList.add('large');
                }
                else if (groupsize > 25) {
                    customGroupDiv.classList.add('medium');
                }
                else {
                    customGroupDiv.classList.add('small');
                }
                let textDiv = customGroupDiv.appendChild(document.createElement('div'));
                textDiv.className = 'store-marker-group-text';
                let textGroupSize = textDiv.appendChild(document.createElement('span'));
                textGroupSize.innerHTML = groupsize;
                return customGroupDiv;
            }
        }
    }
);

let listUIControl = new gem.control.ListControl({
    sourceControl: queryAddedDataControl,
    container: "menu-list-container",
    displayCount: true,
    flyToItemAltitude: 250, // meters
    menuName: 'Custom Marker Groups Example',
    titleProperties: ['name'],
        imageProperty: ['preview']
});

defaultAppScreen.addControl(queryAddedDataControl);
defaultAppScreen.addControl(listUIControl);

The data source control option markerGrouping.style set with the value gem.control.MarkersGroupStyleType.custom is used to enable the customization of the marker groups.

Using the option markerGrouping.markerGroupFunction and the parameter groupsize the store markers groups can be stylized based on any group size and with any style.

In the example above the marker groups have been styled differently based on the category they belong to: large groups are considered to include over 100 items, medium ones are between 99 and 26 items and small groups are below and including 25 items.

Files​

Icons customized from Iconpacks:

Right-click on the links and select Save As.

JavaScript Examples​

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