Store Locator with Custom Markers Using Data Labels ¶
This guide shows how the appearance of the markers style can be customized using properties available in the
data source.
See the example fullscreen
What is needed ¶
-
Magic Lane API key token
-
Web server
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 data source control, store list control and free text search control check out the guides
Store Locator using a GeoJSON File as Data Source
,
Store Locator using SQL Server as Data Source
,
Store Locator using Studio Defined Data Source
or
Store Locator using GeoJSON Text String as Data Source
.
To see how to style the marker groups check out the guide
Store Locator with different Marker Groups Styles
.
To learn how to customize the free text search control check out the guide
Free Text Search
.
Adding Custom Markers with Data Labels ¶
How it works ¶
1 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Madrid_shops.geojson", "" /*icon*/, ""/*iconFilter*/, {
2 marker: {
3 width: 45,
4 height: 45,
5 hoverWidth: 45,
6 hoverHeight: 45,
7 cssClass: 'store-marker',
8 highlightClass: 'highlight-store-marker',
9 markerFunction: function (itemInfoString) {
10 let labelDiv = document.createElement('div');
11 labelDiv.className = 'store-marker-text';
12 let textlabel = labelDiv.appendChild(document.createElement('span'));
13 let jsonInfo = JSON.parse(itemInfoString);
14 if (jsonInfo.properties.rate)
15 textlabel.innerHTML = 'rate ' + jsonInfo.properties.rate;
16 else
17 textlabel.innerHTML = 'rate n.a.';
18 return labelDiv;
19 }
20 },
21 markerGrouping: {
22 maxLevel: 15,
23 style: gem.control.MarkersGroupStyleType.circle
24 },
25 markerBubble: {
26 title: ['name'],
27 image: ['preview']
28 }
29 });
To customize the markers with data labels you can use the data source control options:
-
marker.cssClass - specify custom style rules class for markers
-
marker.markerFunction - specify how to style the marker inner elements and optionally use the item data to add labels or filters to the marker
1 <style>
2 .store-marker {
3 background-image: url(./custom.svg);
4 background-position: center;
5 background-repeat: no-repeat;
6 background-size: contain;
7 width: 45px;
8 height: 45px;
9 position: absolute;
10 margin: 0px auto;
11 cursor: pointer;
12 text-align: center;
13 }
14
15 .store-marker.active {
16 filter: hue-rotate(200deg) contrast(1.5);
17 }
18
19 .store-marker-text {
20 display: inline-block;
21 position: relative;
22 border-radius: 50%;
23 max-width: 30px;
24 min-width: 18px;
25 min-height: 10px;
26 text-align: center;
27 font-weight: 600;
28 top: 5px;
29 line-height: 9px;
30 -webkit-touch-callout: none;
31 -webkit-user-select: none;
32 -khtml-user-select: none;
33 -moz-user-select: none;
34 -ms-user-select: none;
35 user-select: none;
36 color: white;
37 }
38
39 .store-marker-text span {
40 font-size: 0.6rem;
41 margin: 0px;
42 }
43
44 .highlight-store-marker {
45 filter: hue-rotate(80deg) contrast(1.5);
46 }
47 </style>
Complete example code ¶
1 // Start by setting your token from https://developer.magiclane.com/api/projects
2 if (gem.core.App.token === undefined)
3 gem.core.App.token = "";
4
5 var defaultAppScreen = gem.core.App.initAppScreen({
6 container: "map-canvas",
7 zoom: 10,
8 center: [40.431404, -3.680445], // Madrid
9 style: "./Printemps.style"
10 });
11
12 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Madrid_shops.geojson", "" /*icon*/, ""/*iconFilter*/, {
13 marker: {
14 width: 45,
15 height: 45,
16 hoverWidth: 45,
17 hoverHeight: 45,
18 cssClass: 'store-marker',
19 highlightClass: 'highlight-store-marker',
20 markerFunction: function (itemInfoString) {
21 let labelDiv = document.createElement('div');
22 labelDiv.className = 'store-marker-text';
23 let textlabel = labelDiv.appendChild(document.createElement('span'));
24 let jsonInfo = JSON.parse(itemInfoString);
25 if (jsonInfo.properties.rate)
26 textlabel.innerHTML = 'rate ' + jsonInfo.properties.rate;
27 else
28 textlabel.innerHTML = 'rate n.a.';
29 return labelDiv;
30 }
31 },
32 markerGrouping: {
33 maxLevel: 15,
34 style: gem.control.MarkersGroupStyleType.circle
35 },
36 markerBubble: {
37 title: ['name'],
38 image: ['preview']
39 }
40 });
41
42 let listUIControl = new gem.control.ListControl({
43 sourceControl: geojsonDataControl,
44 container: "menu-list-container",
45 displayCount: true,
46 flyToItemAltitude: 250,
47 menuName: 'Marker Data Labels, GeoJSON data source',
48 titleProperties: ['name'],
49 detailsProperties: ['kinds'],
50 imageProperty: ['preview']
51 });
52
53 defaultAppScreen.addControl(geojsonDataControl);
54 defaultAppScreen.addControl(listUIControl);
55
56 let searchControl = new gem.control.SearchControl({
57 highlightOptions: {
58 contourColor: { r: 0, g: 255, b: 0, a: 0 }
59 },
60 searchPreferences: {
61 maximumMatches: 3,
62 addressSearch: true,
63 mapPoisSearch: true,
64 setCursorReferencePoint: true
65 }
66 });
67 defaultAppScreen.addControl(searchControl);
1 <!DOCTYPE html>
2 <html lang="en-us">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, shrink-to-fit=no" />
6 <title>Markers Data Labels</title>
7 <link rel="stylesheet" type="text/css" href="https://www.magiclane.com/sdk/js/gem.css">
8 <link rel="stylesheet" href="/fonts/webfonts.css" type="text/css" media="all" />
9
10 <style>
11 .store-marker {
12 background-image: url(./custom.svg);
13 background-position: center;
14 background-repeat: no-repeat;
15 background-size: contain;
16 width: 45px;
17 height: 45px;
18 position: absolute;
19 margin: 0px auto;
20 cursor: pointer;
21 text-align: center;
22 }
23
24 .store-marker.active {
25 filter: hue-rotate(200deg) contrast(1.5);
26 }
27
28 .store-marker-text {
29 display: inline-block;
30 position: relative;
31 border-radius: 50%;
32 max-width: 30px;
33 min-width: 18px;
34 min-height: 10px;
35 text-align: center;
36 font-weight: 600;
37 top: 5px;
38 line-height: 9px;
39 -webkit-touch-callout: none;
40 -webkit-user-select: none;
41 -khtml-user-select: none;
42 -moz-user-select: none;
43 -ms-user-select: none;
44 user-select: none;
45 color: white;
46 }
47
48 .store-marker-text span {
49 font-size: 0.6rem;
50 margin: 0px;
51 }
52
53 .highlight-store-marker {
54 filter: hue-rotate(80deg) contrast(1.5);
55 }
56 </style>
57 </head>
58
59 <body>
60 <div id="store-locator" style="width: 100%; height: 100%">
61 <div id="menu-list-container" class="menu-list-container" style="width: 30%; height: 100%; position: absolute"></div>
62 <div id="map-canvas" style="width: 70%; left: 30%; height: 100%; position: absolute; overflow: hidden"></div>
63 </div>
64
65 <script src="https://www.magiclane.com/sdk/js/gemapi.js"></script>
66 <script type="text/javascript" src="token.js"></script>
67 <script type="text/javascript" src="storeGeoJSONDataMarkers.js"></script>
68 </body>
69 </html>
Files ¶
JavaScript
HTML
Printemps Map Style
GeoJSON data downloaded from OpenTripMap :
Madrid Shops Example GeoJSON
Icon customized from Iconpacks :
Custom Marker Image
