MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Conflict between GoogleMapsTraffic and WeatherBackground?



  • I am new to the MagicMirror world and am having a difficult time tracking down the cause of a conflict. I am trying to use MMM-GoogleMapsTraffic (vicmora) and MMM-WeatherBackground (eouia) on different slides in MMM-Carousel (shbatm). I started out setting everything up with MMM-GoogleMapsTraffic and was able to do multiple slide configurations no problem. Attempting to add in MMM-WeatherBackground was several hours of frustration.

    I started commenting modules out of the config and am at the point now that MMM-WeatherBackground can work with multiple slide configurations only if MMM-GoogleMapsTraffic is not in the config.js file (even if I do not put it on a slide). They work great independently, but MMM-WeatherBackground will not display a background image if MMM-GoogleMapsTraffic is in the config.js file.

    Sample file (will not display background image on Slide 1 unless MMM-GoogleMapsTraffic is completely commented out of the entire config.js file):

         {
             module: 'MMM-Carousel',
             position: 'bottom_bar', 
             config: {
                transitionInterval: 0,
                showPageIndicators: true,
                showPageControls: false,
                ignoreModules: ['alert', 'MMM-WeatherBackground'],
                mode: 'slides',
                slides: {
                   main: [{ name: 'clock', position: "middle_center", carouselId: "1" }],
                   "Slide 1": [{ name: 'MMM-Dummy', carouselId: '1' }],
                   //"Slide 2": ['currentweather', 'weatherforecast', 'MMM-GoogleMapsTraffic', { name: 'clock', carouselId: "2" }],
                },
                keyBindings: {
                   enabled: true,
                   map: {
                      NextSlide: "ArrowRight",
                      PrevSlide: "ArrowLeft",
                   },
                   mode: "DEFAULT",
                },
             }
          },
          {
             module: "MMM-WeatherBackground",
             config: {
                carouselId: "5",
                targetDOM: ".MMM-Dummy", 
                hemisphere: "n",
                source: "currentweather", 
             }
          },
          {
             module: "MMM-Dummy",
             position: "fullscreen_below",
             config: {
                carouselId: "1",
                width: "100vw",
                height: "100vh",
             }
          },
          {
             module: 'MMM-GoogleMapsTraffic',
             position: 'bottom_center',
             config: {
                carouselId: "2",
                key: 'myKey',
                lat: 36.2465001,
                lng: -91.0663971,
                zoom: 11,
                height: '800px',
                width: '800px',
                styledMapType: "dark",
                disableDefaultUI: true,
             },
          },
    

    Any suggestions or thoughts on how to proceed?

    (And, BTW, this project has been a ton of frustrating fun 😛 )



  • there is a bug in GoogleMapsTraffic…

    I have a fix, and have submitted it back

    please use my repo
    rename the existing folder out of the way
    then git clone my repo

    https://github.com/sdetweil/MMM-GoogleMapsTraffic


  • Project Sponsor Module Developer

    @jungo I never used the carousel, but from just reading the config I think it works differently than you expected.

    MMM-WeatherBackground doesn’t have a position, it doesn’t get rendered through the MM² framework. Therefore it shouldn’t have a carouselId. Not sure why you exclude ignoreModules: ['alert', 'MMM-WeatherBackground'], in the first place when you then specify an id.

    From looking into the google maps source code it looks like there might be something breaking the code for the other modules. Can you inspect the console (start the mirror with npm start dev or press ctrl+shift+i). Can you see errors? Something like console.log is not a function?



  • there is a bug in GoogleMapsTraffic…

    I have a fix, and have submitted it back

    please use my repo
    rename the existing folder out of the way
    then git clone my repo

    https://github.com/sdetweil/MMM-GoogleMapsTraffic


  • Project Sponsor Module Developer



  • @strawberry-3-141 thanks… that one didn’t seem to be the problem… fixed it now in my repo too



  • @strawberry-3-141 Thanks for taking a look. The ignoreModules section was a holdover from one of the eleventeen-thousand configurations I tried thinking I was missing something

    @sdetweil It works as advertised.

    Thanks to both of you for the quick help.


Log in to reply