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