CODEWITHSUNDEEP
mapboxnativescriptmapbox-marker
Guillermo Acosta
Guillermo Acosta

Reputation: 63

NativeScript: addMarkers outside of onMapReady

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?

Upvotes: 0

Views: 544

Answers (2)

Wyatt Patry
Wyatt Patry

Reputation: 1

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.

Upvotes: 0

Eddy Verbruggen
Eddy Verbruggen

Reputation: 3550

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..
  }
])

Upvotes: 2

Related Questions