MMM-GoogleMapsTraffic

[Osyris]

Hey guys, I figured it’s easy enough to style the map by editing the JS file. So in order to get the night mode as shown in pflodo’s post (and to disable the UI buttons) I added the following to the JS code:

//original code
        script.onload = function () {
            var map = new google.maps.Map(document.getElementById("map"), {
            	zoom: 10,
            	center: {
            		lat: lat,
            		lng: lng
            	},
//add a comma after the } above
//new code:
		disableDefaultUI: true,
		styles: [
			{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
			{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
			{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
			{
			    featureType: 'administrative.locality',
			    elementType: 'labels.text.fill',
			    stylers: [{color: '#d59563'}]
			},
			{
				featureType: 'poi',
				elementType: 'labels.text.fill',
				stylers: [{color: '#d59563'}]
			},
			{
				featureType: 'poi.park',
			        elementType: 'geometry',
			        stylers: [{color: '#263c3f'}]
			},
			{
				featureType: 'poi.park',
				elementType: 'labels.text.fill',
				stylers: [{color: '#6b9a76'}]
			},
			{
				featureType: 'road',
				elementType: 'geometry',
				stylers: [{color: '#38414e'}]
			},
			{
				featureType: 'road',
				elementType: 'geometry.stroke',
					  stylers: [{color: '#212a37'}]
			},
			{
				featureType: 'road',
				elementType: 'labels.text.fill',
					  stylers: [{color: '#9ca5b3'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'geometry',
				stylers: [{color: '#746855'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'geometry.stroke',
				stylers: [{color: '#1f2835'}]
			},
			{
				featureType: 'road.highway',
				elementType: 'labels.text.fill',
				stylers: [{color: '#f3d19c'}]
			},
			{
				featureType: 'transit',
				elementType: 'geometry',
				stylers: [{color: '#2f3948'}]
			},
			{
			        featureType: 'transit.station',
				elementType: 'labels.text.fill',
				stylers: [{color: '#d59563'}]
			},
			{
			        featureType: 'water',
			        elementType: 'geometry',
				stylers: [{color: '#17263c'}]
			},
			{
				featureType: 'water',
				elementType: 'labels.text.fill',
				stylers: [{color: '#515c6d'}]
			},
			{
				featureType: 'water',
				elementType: 'labels.text.stroke',
				stylers: [{color: '#17263c'}]
			}
		]
//old code again
            });

Have fun!

Also, if you want to make the background black (so it looks cool on the mirror), set the first attribute ‘geometry’ to ‘#000000’.

[knubbl]

Good work.

Any ideas how to adjust the zoom of the map?

[Osyris]

@knubbl See line 4 in the old code of my code snippet above. You can simply adjust the ‘zoom’ parameter: smaller numbers to zoom out, bigger numbers to zoom in.

[strawberry 3.141]

@Osyris as you figured out to make those modifications, don’t you want to make config options for it and add it to the repository, so users can use it without the need of modificate the module and can easily update on new versions?

[vicmora]

@Osyris are you willing to submit a pull request on github with what @strawberry-3-141 mentioned?

If not, I can take care of this as soon as I get some time.

[Osyris]

I can do that, but the Git seems to be locked so I can’t make branches. Also, there seems to be another user who forked your Git and added a night mode.

[strawberry 3.141]

@Osyris as you’re not added to the project the only way for you is to create a fork do your stuff there and then create a pull request to the source project

[Osyris]

Ok, I’m at it.

[Osyris]

Could someone test the changes from my fork? I have no time to test this on my mirror right now and I’m afraid there could be errors in the code:
https://github.com/Osyris187/MMM-GoogleMapsTraffic

[sailboarder79]

I had a question about how often this updates traffic. Does this auto refresh every hour or something or does it only update when the magic mirror is booted up?