Skip to content

Store Locator using SQL Server as Data Source

This guide shows you how to build a store locator from scratch using a database containing the store locations in GeoJSON format on a server.

The finished example will look like this:


See the example fullscreen
SQL store locations, are loaded dynamically from the server only for the region of the map which is visible.

When to use

  • The store location database is large, deployed on a server, and only a small part is downloaded to the client on demand basis.

  • The data set is 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)

  • SQL database containing the store locations in GeoJSON format

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

Adding stores data

 1// Start by setting your token from https://developer.magiclane.com/api/projects
 2if (gem.core.App.token === undefined)
 3     gem.core.App.token = "";
 4var defaultAppScreen = gem.core.App.initAppScreen({
 5     container: "map-canvas",
 6     center: [48.8546, 2.349, 100000] // latitude, longitude, altitude
 7});
 8let queryAddedDataControl = new gem.control.QueryAddedDataControl(
 9     {
10             languages: ["en"],
11             storeId: 1
12     },
13     "icon.svg",
14     {
15             markerBubble: {
16                     title: ['name'],
17                     image: ['preview']
18             },
19               markerGrouping: {
20                     maxLevel: 15
21               }
22     }
23);
24defaultAppScreen.addControl(queryAddedDataControl);
The map is rendered in the div container with the id map-canvas in the HTML page.
gem.control.QueryAddedDataControl() is used to add data loaded dynamically from an SQL server by querying for store locations in the currently displayed map region using the specified language filter.
The filename of a SVG logo to use for rendering the store locations on the map is also provided.
The store locations are added to the map dynamically, by zooming on a given location: defaultAppScreen.addControl(queryAddedDataControl);
 1<!doctype html>
 2<html lang="en-us">
 3
 4<head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
 7    <title>Store Locator using SQL Server - MagicLane Maps SDK for JavaScript</title>
 8    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 9</head>
10
11<body>
12    <div id="map-canvas" style="width: 100%; height: 100%; position: absolute; overflow: hidden">
13    </div>
14    <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
15    <script type="text/javascript" src="token.js"></script>
16    <script type="text/javascript" src="jsStoreLocatorSql01.js"></script>
17</body>
18
19</html>
The map-canvas is the drawing area where the map is rendered. The canvas is configured to fill the browser window.
At the bottom, gemapi.js, the Maps SDK for JavaScript is loaded.
Next, the JavaScript source of this example is loaded.

Adding stores list

To display a list of the store locations add a menu list container to your HTML file and the following JavaScript code:

1let listUIControl = new gem.control.ListControl({
2   sourceControl: queryAddedDataControl,
3         flyToItemAltitude: 300,
4         container: "menu-list-container",
5         menuName: 'Store locations example',
6         titleProperties: ['name'],
7         imageProperty: ['preview']
8});
9defaultAppScreen.addControl(listUIControl);

1<div id="store-locator" style="width: 100%; height: 100%">
2 <div id="menu-list-container" class="menu-list-container" style="width: 30%; height: 100%; position: absolute;">
3 </div>
4 <div id="map-canvas" style="width: 70%; left: 30%; height: 100%; position:absolute; overflow:hidden"></div>
5</div>

Adding free text search

To add free-form text search functionality simply add the following JavaScript code:

 1let searchControl = new gem.control.SearchControl({
 2    searchPreferences: {
 3            exactMatch: true,
 4            maximumMatches: 3,
 5            addressSearch: true,
 6            mapPoisSearch: true,
 7            setCursorReferencePoint: true
 8        },
 9        highlightOptions: {
10            contourColor: { r: 0, g: 255, b: 0, a: 0 }
11        }
12});
13defaultAppScreen.addControl(searchControl);

Complete example code

 1// Start by setting your token from https://developer.magiclane.com/api/projects
 2if (gem.core.App.token === undefined)
 3     gem.core.App.token = "";
 4let defaultAppScreen = gem.core.App.initAppScreen({
 5     container: "map-canvas",
 6     center: [48.8546, 2.349, 100000] // latitude, longitude, altitude
 7});
 8let queryAddedDataControl = new gem.control.QueryAddedDataControl(
 9     {
10             languages: ["en"],
11             storeId: 1
12     },
13     "icon.svg",
14     {
15             markerBubble: {
16                     title: ['name'],
17                     image: ['preview']
18             },
19             markerGrouping: {
20                     maxLevel: 15
21             }
22     }
23);
24let listUIControl = new gem.control.ListControl({
25     sourceControl: queryAddedDataControl,
26     flyToItemAltitude: 300,
27     container: "menu-list-container",
28     menuName: 'Store locations example',
29     titleProperties: ['name'],
30     imageProperty: ['preview']
31});
32defaultAppScreen.addControl(queryAddedDataControl);
33defaultAppScreen.addControl(listUIControl);
34
35let searchControl = new gem.control.SearchControl({
36     searchPreferences: {
37             exactMatch: true,
38             maximumMatches: 3,
39             addressSearch: true,
40             mapPoisSearch: true,
41             setCursorReferencePoint: true
42     },
43     highlightOptions: {
44             contourColor: { r: 0, g: 255, b: 0, a: 0 }
45     }
46});
47defaultAppScreen.addControl(searchControl);

 1<!doctype html>
 2<html lang="en-us">
 3
 4<head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
 7    <title>Store Locator using SQL Server - MagicLane Maps SDK for JavaScript</title>
 8    <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 9</head>
10
11<body>
12    <div id="store-locator" style="width: 100%; height: 100%">
13        <div id="menu-list-container" class="menu-list-container" style="width: 30%; height: 100%; position: absolute;">
14        </div>
15        <div id="map-canvas" style="width: 70%; height: 100%; left: 30%; position: absolute; overflow: hidden">
16        </div>
17    </div>
18    <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
19    <script type="text/javascript" src="token.js"></script>
20    <script type="text/javascript" src="jsStoreLocatorSql03.js"></script>
21</body>
22
23</html>

Files

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

  • JavaScript code (.js file extension)

  • HTML code (.html file extension)

  • SVG icon (.svg file extension)

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

Source code for this example:

JavaScript
HTML
SVG icon

right-click on the links and select Save As.

JavaScript Examples

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