NativeScript: addMarkers outside of onMapReady - mapbox

Question

I'm new in NativeScript, and I'm playing with maps, using Mapbox.
I want add markers, programmatically from a function when tap a buttom, to map.
XML
` <Button text="GET" tap="getRequest" /> <<<-- BUTTON!
<ContentView>
<map:MapboxView
accessToken= token
mapStyle="streets"
zoomLevel="13"
showUserLocation="false"
disableRotation= "true"
disableTilt="false"
mapReady="onMapReady">
</map:MapboxView>
</ContentView>`
JS
`function onMapReady(args) {
args.map.addMarkers([
{
id: 1,
lat: -35.30505050,
lng: -47.56263254,
title: 'Company 1', // no popup unless set
subtitle: 'Subt 1',
iconPath: 'markers/green_pin_marker.png',
onTap: function () { console.log("'Nice location' marker tapped"); },
onCalloutTap: function () {
console.log("'Nice location' marker callout tapped");
console.log(lati + long);
}
}
]).then(
function (result) {
console.log("Mapbox addMarkers done");
},
function (error) {
console.log("mapbox addMarkers error: " + error);
})
}
exports.onMapReady = onMapReady;`
That code works fine, the marker ID 1 appears on map.
My question is: how can add others markers from a function that responde to tap button:
exports.getRequest = function () {
console.log("BUTTON TAPPED!");
args.map.addMarkers([
{
id: 2,
lat: -35.30586500,
lng: -47.56218500,
title: 'Company 2', // no popup unless set
subtitle: 'Subt 2',
iconPath: 'markers/green_pin_marker.png',
onTap: function () { console.log(" marker tapped"); },
onCalloutTap: function () {
console.log("marker callout tapped");
console.log(lati + long);
}
}
]).then(
function (result) {
console.log("Mapbox addMarkers done");
},
function (error) {
console.log("mapbox addMarkers error: " + error);
})
}
When tap button, console show message BUTTON TAPPED!, but no new mapker ID 2 on map.
I'm doing bad or forgeting something?

Answer 1

Well, it's in the readme of the plugin repo: https://github.com/EddyVerbruggen/nativescript-mapbox/tree/26019957e4e3af3e737d7a44c845f5d5b1bfb808#addmarkers
So here's a JavaScript example, but that repo also has a TypeScript-based demo app with an 'add markers' button that you can check out:
var mapbox = require("nativescript-mapbox");
var onTap = function(marker) {
console.log("Marker tapped with title: '" + marker.title + "'");
};
var onCalloutTap = function(marker) {
alert("Marker callout tapped with title: '" + marker.title + "'");
};
mapbox.addMarkers([
{
id: 2, // can be user in 'removeMarkers()'
lat: 52.3602160, // mandatory
lng: 4.8891680, // mandatory
title: 'One-line title here', // no popup unless set
subtitle: 'Infamous subtitle!',
// icon: 'res://cool_marker', // preferred way, otherwise use:
icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
iconPath: 'res/markers/home_marker.png',
selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
onTap: onTap,
onCalloutTap: onCalloutTap
},
{
// more markers..
}
])

Answer 2

I also cannot use Mapbox as a const/var... or do anything programmatically. I get undefined is not a function, yet Mapbox to log yields the module and its objects. I can see the appropriate functions under prototype:Mapbox etc.
Only declaring the map in XML and utilizing the MapOnReady function works for me.
Update:
I stumbled upon this thread from {N} discourse that helped me understand:
https://discourse.nativescript.org/t/adding-mapbox-to-layout-container/4679/11
Basically the programatic way of building the map still does not allow interaction with the map after it has been rendered. You just declare all the map options as shown in the git example and then still use onMapReady as your function to add markers, polylines etc... you can still setup map listeners of course.