Including socketNotificationReceived in getDom function

yours.mukul

Hi! I’m trying to hack down the google maps modules. I made a node_helper.js to capture the latitude and longitude of desired location, using url.

the code of main file looks like this

getDom: function() {
       
       
		var wrapper = document.createElement("div");
        wrapper.setAttribute("id", "map");

        wrapper.style.height = this.config.height;
        wrapper.style.width = this.config.width;

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://maps.googleapis.com/maps/api/js?key=" + this.config.key;
        document.body.appendChild(script);
        script.onload = function () {
            var map = new google.maps.Map(document.getElementById("map"), {
            	zoom: 13,
            	center: {
            		lat: lat,
            		lng: lng
            	}
            });

            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);
        };

		return wrapper;
	}

The latitude and longitude is stored in payload. All I require is ho to use socketNotificationReceived to parse both values as “lat” and “long” in script??

Sean

@yours.mukul
getDom() in node_helper.js?

yours.mukul

@Sean getDom() in Maps.js

Sean

@yours.mukul
try this

in your node_helper.js

var geo = {
  lat: 12.34567
  lng: 23.45678
}
this.sendSocketNotification("REFRESH_GEO", geo)

in your Main Module

start: function(){
  this.geo = {
    lat: 0, //default latitude
    lng: 0, //default longitude
  }
},

socketNotificationReceived: function(noti, payload) {
  if (noti == "REFRESH_GEO") {
    this.geo.lat = payload.lat
    this.geo.lng = payload.lng
    this.updateDom()
  }
},

getDom: function() {
  var lat = this.geo.lat
  var lng = this.geo.lng

  var wrapper = ...
},

yours.mukul

@Sean said in Including socketNotificationReceived in getDom function:

var lat = this.geo.lat
var lng = this.geo.lng

not working, it always shows up 0,0 latitude and longitude…

Sean

@yours.mukul said in Including socketNotificationReceived in getDom function:

@Sean said in Including socketNotificationReceived in getDom function:

var lat = this.geo.lat
var lng = this.geo.lng

not working, it always shows up 0,0 latitude and longitude…

It means, your socketNotificationReceived() in module is not working properly. Try this.

socketNotificationReceived: function(noti, payload) {
  console.log("NOTIFICATION IS FIRED:", noti)
  if (noti == "REFRESH_GEO") {
    console.log("PAYLOAD IS TREANFERED:", payload)
    this.geo.lat = payload.lat
    this.geo.lng = payload.lng
    console.log("I'LL UPDATE DOM BY REFRESHED GEO")
    this.updateDom()
  }
},

See how the log says. Check correct Socket Notification is fired with correct payload. If not, check your this.sendSocketNotification() in node_helper.js

yours.mukul

@Sean
node_helper.js

var NodeHelper = require("node_helper");
module.exports = NodeHelper.create({
start: function() {

var geo = {
  lat: 12.34567,
  lng: 23.45678
}
this.sendSocketNotification("REFRESH_GEO", geo);
}
}
);

main.js

/* global Module */

/* Magic Mirror
 * Module: MMM-GoogleMapsTraffic
 *
 * By Victor Mora
 * MIT Licensed.
 */

Module.register("MMM-GoogleMapsTraffic", {
       start: function(){
  this.geo = {
    lat: 0, //default latitude
    lng: 0 //default longitude
  }
     },
socketNotificationReceived: function(noti, payload) {
  console.log("NOTIFICATION IS FIRED:", noti)
  if (noti == "REFRESH_GEO") {
    console.log("PAYLOAD IS TREANFERED:", payload)
    this.geo.lat = payload.lat,
    this.geo.lng = payload.lng
    console.log("I'LL UPDATE DOM BY REFRESHED GEO")
    this.updateDom();
  }
},
	getDom: function() {
        var lat = this.geo.lat;
        var lng = this.geo.lng;

		var wrapper = document.createElement("div");
        wrapper.setAttribute("id", "map");

        wrapper.style.height = this.config.height;
        wrapper.style.width = this.config.width;

        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://maps.googleapis.com/maps/api/js?key=" + this.config.key;
        document.body.appendChild(script);

        script.onload = function () {
            var map = new google.maps.Map(document.getElementById("map"), {
            	zoom: 13,
            	center: {
            		lat: lat,
            		lng: lng
            	}
            });

            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);
        };

		return wrapper;
	}

});

Sean

@yours.mukul
I think it is not good to put the noti into start() of node_helper.js.
Because after finishing module loaded and DOM created, updateDOM() would be working properly, but your code tried too early.
As you’ve said, you had your code in node_helper.js to get REAL latitude & longitude, isn’t it? My code was just an example. Send your REAL lat & lng to main module when your node_helper code gathers real target values.