// 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",
style: "./Mono-Day.style" // map style downloaded from Studio
});
// stores data source control
let geojsonDataControl = new gem.control.GeoJsonAddedDataControl("paris.geojson", "icon.svg", undefined /*icon filter*/, {
marker: {
cssClass: 'store-marker',
highlightClass: 'highlight-marker-icon'
},
markerBubble: {
markerBubbleClass: 'store-bubble',
markerBubbleFunction: function (elMarker, properties, coords) {
elMarker.innerHTML = '
' +
'
Supermarket
' +
'
' + properties['addr:street'] + ', ' + properties['addr:city'] +
'
';
}
},
markerGrouping: {
maxLevel: 14
}
});
defaultAppScreen.addControl(geojsonDataControl);
let listUIControl = new gem.control.ListControl({
sourceControl: geojsonDataControl,
container: 'menu-list-container',
displayCount: false,
flyToItemAltitude: 800,
menuName: 'Store locations',
cssClasses: {
divMenu: {
className: 'list-menu',
type: 'div'
},
listHeader: {
className: 'list-title',
type: 'div'
},
divList: {
className: 'list-group',
type: 'div'
},
divItem: {
className: 'list-item',
type: 'div'
}
},
populateItemFunction: function (divItemObj, properties) {
divItemObj.innerHTML = '' + properties['brand'] + ', ' + properties['addr:street'] + '' +
'' + properties['addr:city'] +
(properties['phone'] ? ' · ' + 'Phone: ' + properties['phone'] : '') +
'
' + 'Open: ' + properties['opening_hours'] + '
' +
'
';
divItemObj.addEventListener('click', function (e) {
e.preventDefault();
});
}
});
defaultAppScreen.addControl(listUIControl);
let searchControl = new gem.control.SearchControl({
highlightOptions: {
showContour: false
},
searchPreferences: {
exactMatch: true,
maximumMatches: 3,
addressSearch: true,
mapPoisSearch: true,
setCursorReferencePoint: true,
placeholderText: 'Search...'
},
searchResults: {
showLandmarkIcons: false
}
});
defaultAppScreen.addControl(searchControl);