Using the map with js library

[RemcoJ]

I’m building a GPS tracking app using:

• Raspberry Pi 3
• NEO 6M GPS Module
• Iphone 7
• Node.js / WiringPi

I’ve managed to hook up the GPS the right way, getting data from it and everything, but…

I cannot get the MAP component on my phone to work. From documentation I would expect a WidgetMAP to exist just like de WidgetLED (which does work in my project)

It’s not present in the js library. so I cannot use that, but
Blynk.virtualWrite(V16, 1, lat, lon, “GPS”); won’t work either

I’m at a loss, any help is appreciated

[Pavlo]

@vshymanskyy - is it supported in node.js implementation?

@RemcoJ can you use C implementation on rpi?

[RemcoJ]

@Pavlo I’m not very familiar with C and it took me quite some time to get the GPS part working, would be a shame to start over in another language. I started looking at coding the WidgetMAP myself using LED and LCD as an example.

EDIT :: SEE NEXT POST FOR WORKING SOLUTION

[RemcoJ]

@Pavlo

I did it!!

I added this to the blynk.js in the blynk-library

this.WidgetMAP = function(vPin) {
    this.pin = vPin;
    this.location = function(index, lat, lon, value) {
      var info = [index, lat, lon, value] 
      self.virtualWrite(this.pin, info);
    }
  };

And can now use this to post to the MAP component:

var mymap = new blynk.WidgetMAP(16);
mymap.location(51,  lat, lon, "GPS");

So issue solved!
I’m going to try to add a pull request to the js library

[Gunner]

@RemcoJ Great fix!!!.. when I saw your issue yesterday, I was spending a few hours trying and testing…

//var myMap = new blynk.WidgetMap(14);  // NOPE
var myMap = new blynk.VirtualPin(14);  // Setup Map Widget
var mapButton = new blynk.VirtualPin(15);  // Button Widget for Map
//var BlynkVersion = blynk.BLYNK_VERSION();  // NOPE

// Activates the Map pin
mapButton.on('write', function(param) {
  if (param == 0) { 
    term.write('Map OFF' + '\n');
	//myMap.clear(); // NOPE
    } else if (param == 1) {  // If Button ON
	blynk.virtualWrite(myMap, 1, 51.5074, 0.1278, "test");
	//blynk.virtualWrite(myMap, 1, parseFloat(51.5074), parseFloat(0.1278), "test");  // NOPE
        //blynk.location(myMap, 1, 20, 120, "test");  // NOPE
    term.write('Placing Map Pin' + '\n');

  }
});

And I was also digging into the library… but alas my js skills are infinitesimal… so really glad you were able to confirm my suspicions on how to make Map, and perhaps a few of the missing features, work Now to continue my Node.js library spelunking

PS, like you, I don’t want to revert to WiringPi… just seems too complex when i tried it.

[Pavlo]

Great solution!
Btw, it’s better to start index from 0 to avoid some issues on Android.

You can also create a pull request to our library. @vshymanskyy will confirm and add

[RemcoJ]

@Pavlo Tnx, I made a PR just now. Thanks for the tip about indexing.
@Gunner It’s tedious and lonely work, especially because the non-nerds arround me don’t understand the joy it can give when you finally get something like this to work!

[Gunner]

@RemcoJ

It’s tedious and lonely work, especially because the non-nerds arround me don’t understand

Oh do I understand that … I am learning to give up attempting to communicate with those lifeforms when I see that “Deer in the headlights” look as I expound on something wonderfully and technically geeky

I am just now merging your fix into my blynk.js library…

[Gunner]

Pin placement works beautifully

I tried to add in the myMap.clear(); command… but my attempt is not working… as I said… well and truly into the js deep end here

What do you think?

  this.WidgetMAP = function(vPin) {
    this.pin = vPin;
    this.location = function(index, lat, lon, value) {
      var info = [index, lat, lon, value] 
      self.virtualWrite(this.pin, info);
    }
    this.clear = function() {  // Attempt to add Map Clear command
      self.clear();
    }
  };

[RemcoJ]

I think (can’t test it right now) you should try:

    this.clear = function() {
var info = [index, 0,0,value]
    self.virtualWrite(this.pin, "");
}

The map needs to know which marker you want to clear and i guess the same index as used before!?

[Gunner]

The myMap.clear(); command is supposed to clear the entire map of all pins… but I will try your specific pin workaround for the fun of it

[Gunner]

I can’t figure out the proper whole map clearing command… so I just tried a field expedient method of wiping out my manually indexed pin with: mymap.location(0, 0, 0, " ");

And it worked perfectly, erased that pin as cleanly as it should … until I zoomed out (actually hit the upper icon to show all pins) and saw my, now blank labeled pin, in the middle of the Gulf of Guinea

PS @Eugene This time the map did NOT automatically zoom or center to that new pin placement, as per past issue described here (I use Android, so you might not be the one to mention this too?):

Quick button to zoom out Map to "default" or whole continent / side of planet size

When a new pin is added, the map is supposed to make sure that all pins (including newly added) are visible to the user. So, if current position/scale are good enough, nothing changed try just changing position (without affecting zoom) to make all pins visible at last, change position and zoom to make all pins visible Sounds like you do syncing virtual pins on conecting to server in your skecth…

[Eugene]

@Gunner

This time the map did NOT automatically zoom or center to that new pin placement

Thanks, we’ll check
@BlynkAndroidDev

[Gunner]

@Gunner

map did NOT automatically zoom or center to that new pin placement

FYI, it has been awhile, but still no automatic map centering/zooming on last placed pin with Android App.

[chngjh]

Hi,
I have tried the code and it works well when connecting using Arduino sketch. I can see my hardware on the Map. However, I am also trying to do the same for my Raspberry pi, but this time using nodejs code.
I have tried the following 2 codes but it did not work. Am I missing any codes?

var v4 = new blynk.VirtualPin(4);
blynk.virtualWrite(v4, 0, 51.5074, 0.1278, “test”);

and

var mymap = new blynk.WidgetMap(v4);
mymap.location(0, 51.5074, 0.1278, “test”);

Thanks.
rgds,
JH

[Gunner]

@chngjh

var mymap = new blynk.WidgetMap(v4);
mymap.location(0, 51.5074, 0.1278, “test”);

This should be the correct commands for NodeJS. No, not all of them if you didn’t place it in a proper function, but between the two options you gave, it is the correct one.

For example… I use a button to chose between a value provided my phone’s GPS stream, to get latitude & longitude, and preset values in the middle of the ocean.

var mapButton = new blynk.VirtualPin(15);  // Button Widget for Map
var mymap = new blynk.WidgetMAP(14);  // Setup Map Widget

mapButton.on('write', function(param) {  // Watches for virtual map button
  if (param == 0) {  // If Button OFF
    mymap.location(0, 0, 0, "Nowhere");
    } else if (param == 1) {  // If Button ON
	mymap.location(0, latitude, longitude, "Me Here Now");
}
});

This also only works providing you have added in the needed additions to the library, and preferably in the correct place… I put mine with all the other this.somthingorother = function(vPin) {... items.

@chngjh

but it did not work

It is always better to give definitive information … Did not run the command correctly (AKA cased a crash in the script)… Did not place the pin at all (AKA no errors but no other action whatsoever)… Did not place the pin in the correct location…

I also think the map requires 7 decimal point accuracy, not just 4 decimal point.

[chngjh]

Hi Gunner,

Thanks for the guide, the problem is solved.
This was the code I used to trigger the map location. I use virtual pin 3 as button to trigger the position.

var v3 = new blynk.VirtualPin(3);
var v4 = new blynk.VirtualPin(4);
var mymap = new blynk.WidgetMAP(v4);

v3.on('write', function(param) {
        console.log('V3:', param[0]);
	mymap.location(0, latitude, longitude, "Me Here Now");
   }
});

It seems the error is in the use of “v4” in the line of code var mymap = new blynk.WidgetMAP(v4);
I changed it to just 4 and commented out //var v4 = new blynk.VirtualPin(4); line. And it works. So when using the WidgetMap, we just need to provide the number of the virtual pin without the assignment.

The final code that works is as shown below

var v3 = new blynk.VirtualPin(3);
var mymap = new blynk.WidgetMAP(4);

v3.on('write', function(param) {
        console.log('V3:', param[0]);
	mymap.location(0, latitude, longitude, "Home");
   }
});

[Gunner]

Oh, sorry… I should have noticed that

Yes there is slightly different syntax from the C++ code. Common mistakes (I also make) is Blynk is not capitalized in the commands and V is not used in the vPin designations.