Skip to main content
GuidesAPI ReferenceExamples

Store Locator using GeoJSON Data Source with Custom Marker Bubbles

Estimated reading time: 6 minutes

This guide shows you how to customize store marker bubbles using previously added data source control for your stores data. A GeoJSON file with stores locations and properties is used as an example data source.

The finished example will look like this:

See the example fullscreen

What is needed​

  • Magic Lane API key token
  • Web server (an example is provided)
  • GeoJSON file containing the store locations (or use our sample GeoJSON)

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

Customizing the marker bubbles​

To customize the store marker bubbles you can use the data source control option markerBubbleFunction for specifying your own style rules for marker hover or click event.

let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris.geojson", "" /*icon default*/, "" /*no icon filter*/,
{
    markerBubble: {
    markerBubbleClass: 'store-bubble',
    markerBubbleFunction: function (elMarker, properties, coords) {
        elMarker.innerHTML = '<div class="store-bubble--img-container">' +
        '<img class="store-bubble--img" src=' + properties.preview + '></div>' +
        '<div class="store-bubble--content">' +
        '<div class="store-bubble--title">' + properties['name'] + '</div></div>';
    }
    },
    marker: {
    highlightClass: 'highlight-marker-icon'
    }
});
defaultAppScreen.addControl(geojsonDataControl);

Complete example code​

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

defaultAppScreen = gem.core.App.initAppScreen({
container: "map-canvas"
});

let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris.geojson", "" /*icon default*/, "" /*no icon filter*/,
{
    markerBubble: {
    markerBubbleClass: 'store-bubble',
    markerBubbleFunction: function (elMarker, properties, coords) {
        elMarker.innerHTML = '<div class="store-bubble--img-container">' +
        '<img class="store-bubble--img" src=' + properties.preview + '></div>' +
        '<div class="store-bubble--content">' +
        '<div class="store-bubble--title">' + properties['name'] + '</div></div>';
    }
    },
    marker: {
    highlightClass: 'highlight-marker-icon'
    }
});
let listUIControl = new gem.control.ListControl({
sourceControl: geojsonDataControl,
container: 'menu-list-container',
menuName: 'Store locations example',
titleProperties: ['name'],
detailsProperties: ['kinds'],
imageProperty: ['preview']
});
defaultAppScreen.addControl(geojsonDataControl);
defaultAppScreen.addControl(listUIControl);

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

Files​

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

  • JavaScript code (.js file extension)
  • HTML code (.html file extension)
  • Store locations in GeoJSON format (.geojson 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.

See Store Locator using Studio Defined Data Source for an example with GeoJSON data uploaded to the map studio, and rendered on the map.

See Store Locator using SQL Server as Data Source for an example with GeoJSON data queried dynamically using SQL from a server, and rendered on the map.

See Store Locator using GeoJSON File as Data Source with Custom Controls for an example with GeoJSON data loaded from a file, with Map+List.

See Store Locator using GeoJSON Text String as Data Source for an example with GeoJSON data defined in a variable in JavaScript, and rendered on the map.

JavaScript Examples​

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