MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    MMM-GoogleMapsTraffic

    Transport
    27
    87
    38242
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • V
      vicmora last edited by vicmora

      GitHub Repo: https://github.com/vicmora/MMM-GoogleMapsTraffic

      alt text

      Hi, I created a new module that is used to display a Google Map and it’s traffic layer, centered at provided coordinates. All instructions are at the repo link but let me know if you have any questions!

      P Z 2 Replies Last reply Reply Quote 3
      • P
        pflodo @vicmora last edited by

        @vicmora I like it.
        To make it generic , probably should expose the zoom as a variable, in my area I prefer showing a larger area with only major roads showing.

        With black background of mirror I also prefer the night mode of this sample: https://developers.google.com/maps/documentation/javascript/examples/style-array

        Maybe expose the Style as a variable as well, letting the user define it or leave it blank for default, alternatively you could hardcode a particular inverse colour style, and have a config to enable it.

        1 Reply Last reply Reply Quote 0
        • O
          Osyris last edited by 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’.

          K 2 Replies Last reply Reply Quote 0
          • K
            knubbl @Osyris last edited by

            Good work.

            Any ideas how to adjust the zoom of the map?

            O 1 Reply Last reply Reply Quote 0
            • O
              Osyris @knubbl last edited by

              @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 1 Reply Last reply Reply Quote 0
              • strawberry 3.141
                strawberry 3.141 Project Sponsor Module Developer @Osyris last edited by

                @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?

                Please create a github issue if you need help, so I can keep track

                1 Reply Last reply Reply Quote 0
                • V
                  vicmora last edited by

                  @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.

                  1 Reply Last reply Reply Quote 0
                  • O
                    Osyris last edited by

                    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 1 Reply Last reply Reply Quote 0
                    • strawberry 3.141
                      strawberry 3.141 Project Sponsor Module Developer @Osyris last edited by

                      @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

                      Please create a github issue if you need help, so I can keep track

                      1 Reply Last reply Reply Quote 0
                      • O
                        Osyris last edited by

                        Ok, I’m at it.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 8
                        • 9
                        • 1 / 9
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy