Store Locator using a GeoJSON File as Data Source¶
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.
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 = "";
4
5let defaultAppScreen = gem.core.App.initAppScreen({
6 container: "map-canvas"
7});
8let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris_shops.geojson", "" /*icon default*/, "" /*no icon filter*/,
9 {
10 markerBubble: {
11 title: ['name'],
12 image: ['preview']
13 },
14 markerGrouping: {
15 maxLevel: 14
16 }
17 });
18defaultAppScreen.addControl(geojsonDataControl);
1<!doctype html>
2<html lang="en-us">
3
4<head>
5 <meta charset="utf-8">
6 <title>Store Locator based on a GeoJSON File - Maps SDK for JavaScript</title>
7 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
8
9<body>
10 <div id="map-canvas" style="width: 100%;height: 100%; position:absolute; overflow:hidden">
11 </div>
12
13 <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
14 <script type="text/javascript" src="token.js"></script>
15 <script type="text/javascript" src="jsStoreGeojsonFile01.js"></script>
16</body>
17
18</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: geojsonDataControl,
3 flyToItemAltitude: 300,
4 container: 'menu-list-container',
5 menuName: 'Store locations',
6 titleProperties: ['name'],
7 detailsProperties: ['kinds'],
8 imageProperty: ['preview']
9});
10defaultAppScreen.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 = "";
4
5var defaultAppScreen = gem.core.App.initAppScreen({
6 container: "map-canvas"
7});
8let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris_shops.geojson", "" /*icon default*/, "" /*no icon filter*/,
9 {
10 markerBubble: {
11 title: ['name'],
12 image: ['preview']
13 },
14 markerGrouping: {
15 maxLevel: 14
16 }
17 });
18defaultAppScreen.addControl(geojsonDataControl);
19
20let listUIControl = new gem.control.ListControl({
21 sourceControl: geojsonDataControl,
22 flyToItemAltitude: 300,
23 container: 'menu-list-container',
24 menuName: 'Store locations',
25 titleProperties: ['name'],
26 detailsProperties: ['kinds'],
27 imageProperty: ['preview']
28});
29defaultAppScreen.addControl(listUIControl);
30
31let searchControl = new gem.control.SearchControl({
32 searchPreferences: {
33 exactMatch: true,
34 maximumMatches: 3,
35 addressSearch: true,
36 mapPoisSearch: true,
37 setCursorReferencePoint: true
38 },
39 highlightOptions: {
40 contourColor: { r: 0, g: 255, b: 0, a: 0 }
41 }
42});
43defaultAppScreen.addControl(searchControl);
1<!doctype html>
2<html lang="en-us">
3
4<head>
5 <meta charset="utf-8">
6 <title>Store Locator based on a GeoJSON File - Maps SDK for JavaScript</title>
7 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
8</head>
9
10<body>
11 <div id="store-locator" style="width: 100%; height: 100%">
12 <div id="menu-list-container" class="menu-list-container"
13 style="width: 30%; height: 100%; position: absolute;"></div>
14 <div id="map-canvas" style="width: 70%; left: 30%; height: 100%; position:absolute; overflow:hidden"></div>
15 </div>
16
17 <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
18 <script type="text/javascript" src="token.js"></script>
19 <script type="text/javascript" src="jsStoreGeojsonFile03.js"></script>
20
21</body>
22</html>
Files¶
The finished example consists of the project directory containing these files:
JavaScript code (
.jsfile extension)HTML code (
.htmlfile extension)SVG icon (
.svgfile extension)Store locations in GeoJSON format (
.geojsonfile extension)
To run the example, the HTML file is loaded in a browser.
Source code for this example:
JavaScriptHTML
SVG icon
Store locations in GeoJSON format
right-click on the links and select Save As.