Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix various problems, script loading multiple times, console.log vs Log.log, self pointer #32

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix various problems, script loading multiple times, console.log vs Log.log, self pointer #32

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90057ea
fix misc problems
sdetweil May 4, 2019
b3edbbd
fix self pointer setup
sdetweil Aug 19, 2019
10f1e1e
fix errant console.log statement
sdetweil Oct 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 81 additions & 55 deletions MMM-GoogleMapsTraffic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,17 @@ Module.register("MMM-GoogleMapsTraffic", {
height: '300px',
width: '300px',
zoom: 10,
mapTypeId: 'roadmap',
mapTypeId: 'roadmap',
styledMapType: 'standard',
disableDefaultUI: true,
updateInterval: 900000,
backgroundColor: 'rgba(0, 0, 0, 0)'
backgroundColor: 'rgba(0, 0, 0, 0)',
},

scriptloaded: false,
script: null,
self: null,
start: function() {
var self = this;
self = this;
Log.info("Starting module: " + this.name);

if (this.config.key === "") {
Expand All @@ -39,62 +41,64 @@ Module.register("MMM-GoogleMapsTraffic", {
}, this.config.updateInterval);
},


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

var wrapper = document.createElement("div");
let self = this;
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;
script.setAttribute('defer','');
script.setAttribute('async','');
document.body.appendChild(script);

var self = this;

script.onload = function () {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: self.config.zoom,
mapTypeId: self.config.mapTypeId,
center: {
lat: self.config.lat,
lng: self.config.lng
},
styles: self.styledMapType,
disableDefaultUI: self.config.disableDefaultUI,
backgroundColor: self.config.backgroundColor
});

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

for(var i = 0; i < self.config.markers.length; i++) {
var marker = self.config.markers[i];
var markerOptions = {
map: map,
position: {
lat: marker.lat,
lng: marker.lng,
}
};
markerOptions.icon = {
path: 'M11 2c-3.9 0-7 3.1-7 7 0 5.3 7 13 7 13 0 0 7-7.7 7-13 0-3.9-3.1-7-7-7Zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5 0-1.4 1.1-2.5 2.5-2.5 1.4 0 2.5 1.1 2.5 2.5 0 1.4-1.1 2.5-2.5 2.5Z',
scale: 1,
anchor: new google.maps.Point(11, 22),
fillOpacity: 1,
fillColor: marker.fillColor,
strokeOpacity: 0
};
var markerLayer = new google.maps.Marker(markerOptions);
}

};

Log.log(this.name+" in getDom() loaded="+self.scriptloaded);

if(self.scriptloaded){
Log.log(self.name+" in getDom() in loaded");
// don't search, have wrapper object already
// changes each time thru the getdom function..
// could be optimized here..
var map = new google.maps.Map(wrapper , {
zoom: self.config.zoom,
mapTypeId: self.config.mapTypeId,
center: {
lat: self.config.lat,
lng: self.config.lng
},
styles: self.styledMapType,
disableDefaultUI: self.config.disableDefaultUI,
backgroundColor: self.config.backgroundColor
});
Log.log(self.name+" map object created");
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
Log.log(self.name+" traffic layer set");
// watch out for the lost config error
if(self.config.markers !== undefined){
for(var marker of self.config.markers) {
//var marker = self.config.markers[i];
var markerOptions = {
map: map,
position: {
lat: marker.lat,
lng: marker.lng,
}
};
markerOptions.icon = {
path: 'M11 2c-3.9 0-7 3.1-7 7 0 5.3 7 13 7 13 0 0 7-7.7 7-13 0-3.9-3.1-7-7-7Zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5 0-1.4 1.1-2.5 2.5-2.5 1.4 0 2.5 1.1 2.5 2.5 0 1.4-1.1 2.5-2.5 2.5Z',
scale: 1,
anchor: new google.maps.Point(11, 22),
fillOpacity: 1,
fillColor: marker.fillColor,
strokeOpacity: 0
};
var markerLayer = new google.maps.Marker(markerOptions);
}
}
else
Log.error(this.name+ " lost access to config options!!!!!");
Log.log(self.name+" done with marker options");
}

return wrapper;
},
Expand All @@ -103,8 +107,30 @@ Module.register("MMM-GoogleMapsTraffic", {
socketNotificationReceived: function (notification, payload) {
if(notification === "MMM-GOOGLE_MAPS_TRAFFIC-RESPONSE") {
this.styledMapType = payload.styledMapType;
console.log = this.styledMapType;
//console.log = this.styledMapType;
this.updateDom();
}
},
// notifications from system or other modules
notificationReceived(notification, payload, source){
// if the dom is created
if(notification === "DOM_OBJECTS_CREATED"){
// add the script to it
this.script = document.createElement("script");
this.script.type = "text/javascript";
this.script.src = "https://maps.googleapis.com/maps/api/js?key=" + this.config.key;
this.script.setAttribute('defer','');
this.script.setAttribute('async','');
// add this script to the mirror body, once
document.body.appendChild(this.script);
Log.log(this.name+" loading api script")

this.script.onload = function () {
Log.log(this.s.name+" api script loaded ")
this.s.scriptloaded=true;
this.s.updateDom(10);
}.bind({s:this})
}
},

});