Skip to main content
GuidesAPI ReferenceExamples

Store Locator with Custom Markers Using Data Labels

Estimated reading time: 5 minutes

This guide shows how the appearance of the markers style can be customized using properties available in the data source. The finished example will look like this:

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.

info

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

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​

 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Madrid_shops.geojson", "" /*icon*/, ""/*iconFilter*/, {
     marker: {
             width: 45,
             height: 45,
             hoverWidth: 45,
             hoverHeight: 45,
             cssClass: 'store-marker',
             highlightClass: 'highlight-store-marker',
             markerFunction: function (itemInfoString) {
                     let labelDiv = document.createElement('div');
                     labelDiv.className = 'store-marker-text';
                     let textlabel = labelDiv.appendChild(document.createElement('span'));
                     let jsonInfo = JSON.parse(itemInfoString);
                     if (jsonInfo.properties.rate)
                             textlabel.innerHTML = 'rate ' + jsonInfo.properties.rate;
                     else
                             textlabel.innerHTML = 'rate n.a.';
                     return labelDiv;
             }
     },
     markerGrouping: {
             maxLevel: 15,
             style: gem.control.MarkersGroupStyleType.circle
     },
     markerBubble: {
             title: ['name'],
             image: ['preview']
     }
 });

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

Complete example code​

 // Start by setting your token from https://developer.magiclane.com/api/projects
 if (gem.core.App.token === undefined)
     gem.core.App.token = "";

 var defaultAppScreen = gem.core.App.initAppScreen({
     container: "map-canvas",
     zoom: 10,
     center: [40.431404, -3.680445], // Madrid
     style: "./Printemps.style"
 });

 let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("Madrid_shops.geojson", "" /*icon*/, ""/*iconFilter*/, {
     marker: {
             width: 45,
             height: 45,
             hoverWidth: 45,
             hoverHeight: 45,
             cssClass: 'store-marker',
             highlightClass: 'highlight-store-marker',
             markerFunction: function (itemInfoString) {
                     let labelDiv = document.createElement('div');
                     labelDiv.className = 'store-marker-text';
                     let textlabel = labelDiv.appendChild(document.createElement('span'));
                     let jsonInfo = JSON.parse(itemInfoString);
                     if (jsonInfo.properties.rate)
                             textlabel.innerHTML = 'rate ' + jsonInfo.properties.rate;
                     else
                             textlabel.innerHTML = 'rate n.a.';
                     return labelDiv;
             }
     },
     markerGrouping: {
             maxLevel: 15,
             style: gem.control.MarkersGroupStyleType.circle
     },
     markerBubble: {
             title: ['name'],
             image: ['preview']
     }
 });

 let listUIControl = new gem.control.ListControl({
     sourceControl: geojsonDataControl,
     container: "menu-list-container",
     displayCount: true,
     flyToItemAltitude: 250,
     menuName: 'Marker Data Labels, GeoJSON data source',
     titleProperties: ['name'],
     detailsProperties: ['kinds'],
         imageProperty: ['preview']
 });

 defaultAppScreen.addControl(geojsonDataControl);
 defaultAppScreen.addControl(listUIControl);

 let searchControl = new gem.control.SearchControl({
     highlightOptions: {
             contourColor: { r: 0, g: 255, b: 0, a: 0 }
     },
     searchPreferences: {
             maximumMatches: 3,
             addressSearch: true,
             mapPoisSearch: true,
             setCursorReferencePoint: true
     }
 });
 defaultAppScreen.addControl(searchControl);

Files​

Source code for this example:

GeoJSON data downloaded from OpenTripMap :

Icon customized from Iconpacks:

Right-click on the links and select Save As.

JavaScript Examples​

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