MapView

API Reference: UI.MapView

MapView is a view to display native maps (Apple Maps on iOS and Google Maps on Android).

Android Manifest

Smartface Android Emulator comes with its own Google Maps API-Keys. Before publishing your project, you must change that key from AndroidManifest.xml. Follow the guide to get a key.

Updating Android Manifest

  • Go to /config/Android/AndroidManifest.xml

  • Add the following code below under tag

JavaScript
JavaScript
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value=" ADD API-KEY HERE "
/>

Basic MapView

In this example, lazy loading is also enabled on Line#14. Note that this is Android only property. For more information please refer here.

JavaScript
JavaScript
const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const MapView = require('sf-core/ui/mapview');
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
// Enable lazy loading on Android
this.map.android.prepareMap();
},
onLoad: function() {
var myMapView = new MapView({
left: 0,
top: 0,
right: 0,
bottom: 0,
positionType: FlexLayout.PositionType.ABSOLUTE,
scrollEnabled: true,
rotateEnabled: true,
zoomEnabled: true,
compassEnabled: true,
type: MapView.Type.NORMAL,
onCreate: function() {
var centerLocation = {
latitude: 37.4488259,
longitude: -122.1600047
};
myMapView.setCenterLocationWithZoomLevel(centerLocation,11,false); //Added in Release 6.11.0 & old usage is deprecated.
for (var i = 0; i < 10; i++) {
var myPin = new MapView.Pin({
location: {
latitude: 37.4488259 + i * 0.01,
longitude: -122.1600047
},
title: 'Title ' + i,
subtitle: 'Subtitle',
color: Color.RED
});
myPin.onPress = function(index) {
console.log("Title : " + this.title);
};
myMapView.addPin(myPin);
}
}
});
this.map = myMapView;
this.layout.addChild(myMapView);
}
});
}
);
module.exports = Page1;

MapView with Cluster

Cluster that groups two or more distinct pins into a single entity. Cluster works on Android & iOS 11.0+.

JavaScript
JavaScript
const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const MapView = require('sf-core/ui/mapview');
const Color = require('sf-core/ui/color');
const Font = require('sf-core/ui/font');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
this["myMapView"].android.prepareMap();
},onLoad: function(){
var myMapView = new MapView({
flexGrow: 1,
onCreate: function() {
var centerLocation = {
latitude: 37.4488259,
longitude: -122.1600047
};
myMapView.setCenterLocationWithZoomLevel(centerLocation,12,false);
for (var i = 0; i < 10; i++) {
var myPin = new MapView.Pin({
location: {
latitude: 37.4488259 + i * 0.01,
longitude: -122.1600047
},
title: 'Title ' + i,
subtitle: 'Subtitle',
color: Color.RED
});
myPin.onPress = function(index) {
console.log("Title : " + this.title);
};
myMapView.addPin(myPin);
}
}
});
myMapView.clusterEnabled = true;
myMapView.clusterFillColor = Color.RED;
myMapView.clusterBorderColor = Color.WHITE;
myMapView.ios.clusterBorderWidth = 3;
myMapView.clusterTextColor = Color.WHITE;
myMapView.clusterFont = Font.create(Font.DEFAULT, 20, Font.BOLD);
myMapView.ios.clusterPadding = 15;
myMapView.onClusterPress = function(pins){
var centerLocation = averageGeolocation(pins);
myMapView.setCenterLocationWithZoomLevel(centerLocation,12,true);
};
function averageGeolocation(pins) {
if (pins.length === 1) {
return pins[0].location;
}
let x = 0.0;
let y = 0.0;
let z = 0.0;
for (let pin of pins) {
let latitude = pin.location.latitude * Math.PI / 180;
let longitude = pin.location.longitude * Math.PI / 180;
x += Math.cos(latitude) * Math.cos(longitude);
y += Math.cos(latitude) * Math.sin(longitude);
z += Math.sin(latitude);
}
let total = pins.length;
x = x / total;
y = y / total;
z = z / total;
let centralLongitude = Math.atan2(y, x);
let centralSquareRoot = Math.sqrt(x * x + y * y);
let centralLatitude = Math.atan2(z, centralSquareRoot);
return {
latitude: centralLatitude * 180 / Math.PI,
longitude: centralLongitude * 180 / Math.PI
};
}
this["myMapView"] = myMapView;
this.layout.addChild(myMapView);
}
});
}
);
module.exports = Page1;

Removing all pins at once

Developers don't need to store all pins remove them later.

This can be handled by calling myMap.removeAllPins();

Adding pins

Pins must be added after onCreate event is triggered.