Skip to main content
GuidesAPI ReferenceExamples

Store Locator using GeoJSON File as Data Source with Custom Controls

Estimated reading time: 7 minutes

This guide shows you how to build a store locator from scratch using a GeoJSON file containing the store locations.

The finished example will look like this:

See the example fullscreen

When to use​

  • The entire store location data set is relatively small and can be easily downloaded.
  • The data set is not changing frequently.

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)
  • 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.

(1) Interactive Map​

The first step is to render an interactive map.

 // 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",
     style: "./Mono-Day.style" // map style downloaded from Studio
 });

The first step in JavaScript is to set your API key token gem.core.App.token.
The app is initialized inside the map-canvas container with a custom map style downloaded from Studio: gem.core.App.initAppScreen();.

Source code at this stage of the project:

(2) Render Store Locations using Map Markers and Information Bubbles​

Next, we render store locations on the map using a SVG image as marker.

How it works​

Create a directory for this project in the root directory of your web server.

In our case, the root directory for our local web server is htdocs , in which we create the project directory named storeGeojsonCustomControls.

So in our case, the project directory is: htdocs/storeGeojsonCustomControls and the local web server url is: http://localhost/storeGeojsonCustomControls Copy your SVG store logo file and GeoJSON store locations file into the project directory.

In our case, we are using the SVG file icon.svg and the GeoJSON file paris.geojson , which can be downloaded from here:

 // stores data source control
 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("paris.geojson", "icon.svg", undefined /*icon filter*/, {
     marker: {
             cssClass: 'store-marker',
             highlightClass: 'highlight-marker-icon'
     },
     markerBubble: {
             markerBubbleClass: 'store-bubble',
             markerBubbleFunction: function (elMarker, properties, coords) {
                     elMarker.innerHTML = '<div class="store-bubble">' +
                             '<div class="store-bubble--title">Supermarket</div>' +
                             '<div class="store-bubble--description">' + properties['addr:street'] + ', ' + properties['addr:city'] +
                             '</div></div>';
             }
     },
     markerGrouping: {
             maxLevel: 14
     }
 });
 defaultAppScreen.addControl(geojsonDataControl);

Source code at this stage of the project:

(3) Add the Store Locations to a Sidebar List​

Add a title and information for each store in the left sidebar, as a list.

 let listUIControl = new gem.control.ListControl({
     sourceControl: geojsonDataControl,
     container: 'menu-list-container',
     displayCount: false,
     flyToItemAltitude: 800,
     menuName: 'Store locations',
     cssClasses: {
             divMenu: {
                     className: 'list-menu',
                     type: 'div'
             },
             listHeader: {
                     className: 'list-title',
                     type: 'div'
             },
             divList: {
                     className: 'list-group',
                     type: 'div'
             },
             divItem: {
                     className: 'list-item',
                     type: 'div'
             }
     },
     populateItemFunction: function (divItemObj, properties) {
             divItemObj.innerHTML = '<a href="#" class="list-item--title">' + properties['brand'] + ', ' + properties['addr:street'] + '</a>' +
                     '<div class="list-item--details">' + properties['addr:city'] +
                     (properties['phone'] ? ' &middot; ' + 'Phone: ' + properties['phone'] : '') +
                     '<div class="list-item--open-hours">' + 'Open: ' + properties['opening_hours'] + '</div>' +
                     '</div>';
             divItemObj.addEventListener('click', function (e) {
                     e.preventDefault();
             });
     }
 });
 defaultAppScreen.addControl(listUIControl);

Source code at this stage of the project:

(4) Adding Search Control​

 let searchControl = new gem.control.SearchControl({
     highlightOptions: {
             showContour: false
     },
     searchPreferences: {
             exactMatch: true,
             maximumMatches: 3,
             addressSearch: true,
             mapPoisSearch: true,
             setCursorReferencePoint: true,
             placeholderText: 'Search...'
     },
     searchResults: {
             showLandmarkIcons: false
     }
 });
 defaultAppScreen.addControl(searchControl);

Add the above code at the bottom of the JavaScript file. This enables the free-form text search functionality to search for anything on the map.

Source code at this stage of the project:

Files​

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

  • JavaScript code (.js file extension)
  • HTML code (.html file extension)
  • SVG store logo (.svg file extension)
  • GeoJSON store location file (.geojson file extension)
  • Map style ( .style 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 GeoJSON Text String as Data Source for an example with GeoJSON data defined in a variable in JavaScript, and rendered on the map.

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.

JavaScript Examples​

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