Customize your Markers Style
To keep up with your brand identity and ensure the best possible readability and navigation, the map offers two types of display for stores, Simplified view with Dots Markers and Markers view with Image Markers.Dots Markers
Stores are displayed as colored dots on the map. Useful for the top zoom levels and to render large amount of stores keeping the map display clean and fast.
The size (in pixel) of the dots depends on the zoom level and vary based on size and minsize attributes. The higher the zoom level is, the thinner the dots are.
tileStyle: {
color: '#008248',
size: 15,
minSize: 4
},
Images Markers
Stores are displayed as images. Useful to render detailed markers (branding, etc) after a specified zoom level (breakpoint attribute).
You can specify custom markers images for default and selected store (when a user select a store on the map or through the left panel).
style: {
'default': {
'icon': {
url: './images/markers/starbucks-marker.svg',
scaledSize: {
height: 47,
width: 40
},
},
'numberedIcon': {
url: './images/markers/starbucks-marker.svg',
scaledSize: {
height: 47,
width: 40
},
},
'selectedIcon': {
url: './images/markers/starbucks-marker-selected.svg',
scaledSize: {
height: 71,
width: 61
}
}
}
},
breakpoint: 12
Result
Zoom beyond the breakpoint to see the default marker. Click on a store to see the selected marker.
