Magic Lane
Close navbar icon
Skip to content

Store Locator using GeoJSON Data Source with Custom Icons

This guide shows you how to add different icons for your store data based on a GeoJSON property.

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.

  • The data set contains different categories of items.

What is needed

  • Magic Lane API key token

  • Web server (an example is provided)

  • SVG files of the different store categories (or use our sample SVGs)

  • 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 controls

To see how to add GeoJSON data control, store list control and free text search control check out the guides Store Locator using a GeoJSON File as Data Source or Store Locator using GeoJSON Text String as Data Source .

Adding custom icons 

 1// Start by setting your token from https://www.magiclane.com/api/projects
 2if (gem.core.App.token === undefined) gem.core.App.token = "";
 3let svgLogo = "./store.svg";
 4
 5defaultAppScreen = gem.core.App.initAppScreen({
 6  container: "map-canvas"
 7});
 8
 9let iconFilter = [{ key: 'kinds', value: 'supermarkets', iconClass: 'supermarket-icon' },
10                  { key: 'kinds', value: 'conveniences', iconClass: 'supermarket-icon' },
11                  { key: 'kinds', value: 'bakeries', iconClass: 'bakery-icon' }];
12let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris_shops.geojson", svgLogo, iconFilter,
13  {
14    markerBubble: {
15      title: ['name'],
16      image: ['preview']
17    }
18  });
19defaultAppScreen.addControl(geojsonDataControl);

 1<html>
 2<meta charset="utf-8">
 3<link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 4<title>Store Locator GeoJSON Data Custom Icons</title>
 5
 6<head>
 7  <style>
 8    .supermarket-icon {
 9      background-image: url(./supermarket.svg);
10      background-position: center;
11      background-repeat: no-repeat;
12      background-size: contain;
13      width: 25px !important;
14      height: 25px !important;
15      position: absolute;
16      margin: 0px auto;
17      cursor: pointer;
18    }
19
20    .supermarket-icon:hover {
21      width: 30px !important;
22      height: 30px !important;
23    }
24
25    .bakery-icon {
26      background-image: url(./bakery.svg);
27      background-position: center;
28      background-repeat: no-repeat;
29      background-size: contain;
30      width: 25px !important;
31      height: 25px !important;
32      position: absolute;
33      margin: 0px auto;
34      cursor: pointer;
35    }
36
37    .bakery-icon:hover {
38      width: 30px !important;
39      height: 30px !important;
40    }
41  </style>
42</head>
43
44<body>
45  <div id="store-locator" style="width: 100%; height: 100%">
46    <div id="map-canvas" style="width: 100%; height: 100%; position: absolute;">
47    </div>
48  </div>
49
50  <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
51  <script type="text/javascript" src="token.js"></script>
52  <script type="text/javascript" src="jsStoreGeojsonCustomIcons01.js"></script>
53</body>
54
55</html>

Complete example code 

 1 // Start by setting your token from https://www.magiclane.com/api/projects
 2 if (gem.core.App.token === undefined) gem.core.App.token = "";
 3 let svgLogo = "./store.svg";
 4
 5 defaultAppScreen = gem.core.App.initAppScreen({
 6   container: "map-canvas"
 7 });
 8
 9 let iconFilter = [{ key: 'kinds', value: 'supermarkets', iconClass: 'supermarket-icon' },
10                   { key: 'kinds', value: 'conveniences', iconClass: 'supermarket-icon' },
11                   { key: 'kinds', value: 'bakeries', iconClass: 'bakery-icon' }];
12 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Paris_shops.geojson", svgLogo, iconFilter,
13   {
14     markerBubble: {
15       title: ['name'],
16       image: ['preview']
17     }
18   });
19 let listUIControl = new gem.control.ListControl(
20   {
21     sourceControl: geojsonDataControl,
22     container: "menu-list-container",
23     menuName: "Store locations example",
24     titleProperties: ['name'],
25     detailsProperties: ['kinds'],
26     imageProperty: ['preview']
27   });
28 defaultAppScreen.addControl(geojsonDataControl);
29 defaultAppScreen.addControl(listUIControl);
30
31 let searchControl = new gem.control.SearchControl({
32   highlightOptions: {
33     contourColor: { r: 0, g: 255, b: 0, a: 0 }
34   },
35   searchPreferences: {
36     exactMatch: true,
37     maximumMatches: 3,
38     addressSearch: true,
39     mapPoisSearch: true,
40     setCursorReferencePoint: true
41   }
42 });
43 defaultAppScreen.addControl(searchControl);

 1<html>
 2<meta charset="utf-8">
 3<link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
 4<title>Store Locator GeoJSON Data Custom Icons</title>
 5
 6<head>
 7  <style>
 8    .supermarket-icon {
 9      background-image: url(./supermarket.svg);
10      background-position: center;
11      background-repeat: no-repeat;
12      background-size: contain;
13      width: 25px !important;
14      height: 25px !important;
15      position: absolute;
16      margin: 0px auto;
17      cursor: pointer;
18    }
19
20    .supermarket-icon:hover {
21      width: 30px !important;
22      height: 30px !important;
23    }
24
25    .bakery-icon {
26      background-image: url(./bakery.svg);
27      background-position: center;
28      background-repeat: no-repeat;
29      background-size: contain;
30      width: 25px !important;
31      height: 25px !important;
32      position: absolute;
33      margin: 0px auto;
34      cursor: pointer;
35    }
36
37    .bakery-icon:hover {
38      width: 30px !important;
39      height: 30px !important;
40    }
41  </style>
42</head>
43
44<body>
45  <div id="store-locator" style="width: 100%; height: 100%">
46    <div id="menu-list-container" style="width: 30%; height: 100%; position: absolute;"></div>
47    <div id="map-canvas" style="width: 70%; height: 100%; position:absolute; left: 30%;">
48    </div>
49  </div>
50
51  <script type="text/javascript" src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
52  <script type="text/javascript" src="token.js"></script>
53  <script type="text/javascript" src="jsStoreGeojsonCustomIcons.js"></script>
54</body>
55
56</html>

Files

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

  • JavaScript code ( .js file extension)

  • HTML code ( .html file extension)

  • SVG icons ( .svg 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:

JavaScript
HTML
SVG store icon
SVG supermarket icon
SVG bakery icon
Store locations in GeoJSON format

right-click on the links and select Save As.

JavaScript Examples

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