alignment not centered?

[theskyisthelimit]

Platform

No response

Node.js Version

16.13.2

MagicMirror Version

2.18.0

Module Version

91ecf0f

Description

Hi!

Just found this module and it's amazing! I'm also using MMM-Jast. Thank you for your work.

Unfortunately I've discovered a strange misalignment. Im using the module in the middle with the position "center" and it's not perfectly aligned when I set the mapwidth to 900px for example. If I set the mapwidth to 1200px its perfectly aligned. Any ideas what I could change?

Ah and I also tried to use the uncolored map but that didn't work. I changed it to https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png which works.

Expected behavior

centered alignment

Current behavior

not really centered

Possible solution

Propably something with the css

Steps to reproduce

change the position of the module to center

Log

No response

config.js

{
      module: "MMM-RAIN-MAP",
      position: "center",
      config: {
        animationSpeedMs: 400,
      colorScheme: 2,
        colorizeTime: true,
        defaultZoomLevel: 8,
        displayTime: true,
        displayTimeline: true,
        displayClockSymbol: true,
        displayOnlyOnRain: false,
        extraDelayLastFrameMs: 1000,
        extraDelayCurrentFrameMs: 3000,
        markers: [
          { lat: 49.41, lng: 8.717, color: "red" },
          { lat: 48.856, lng: 2.35, color: "green" },
        ],
        mapPositions: [
          { lat: 49.41, lng: 8.717, zoom: 9, loops: 1 },
          { lat: 49.41, lng: 8.717, zoom: 6, loops: 2 },
          { lat: 48.856, lng: 2.35, zoom: 6, loops: 1 },
          { lat: 48.856, lng: 2.35, zoom: 9, loops: 2 },
          { lat: 49.15, lng: 6.154, zoom: 5, loops: 2 },
        ],
        // mapUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        mapUrl: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
        mapHeight: "420px", // must be a pixel value (no percent)
        mapWidth: "1200px", // must be a pixel value (no percent)
        maxHistoryFrames: -1,
        maxForecastFrames: -1,
        substitudeModules: [],
        updateIntervalInSeconds: 300,
      }
    },

Additional info

No response

[jalibu]

Hi @theskyisthelimit,
At the moment I have quite a shortage of time and unfortunately I can't take a look until next week at the earliest. If you find our more useful information to the solution until then, I'd be happy.

[jalibu]

Hi @theskyisthelimit,

I can not reproduce your problem. Using MMM-RAIN-MAP standalone, it is perfectly aligned regardless of the mapWidth.
What's the name of module above on your screenshot?

[theskyisthelimit]

Hi Jan

Thank you very much for your valuable time.
Above is the module MMM-WeatherChart

I deactivated the other module and MMM-RAIN-MAP was perfectly centred! (I've had almost the same trouble with MMM-Jast a while ago)

Maybe I'll find a similar fix within the css. I'll let you know.

[jalibu]

@theskyisthelimit both are in position: "center"?

[jalibu]

In my development environment, MMM-RAIN-MAP is still perfectly centered, but WeatherChart is not. Do you have any other modules installed?

[theskyisthelimit]

       {
      module: 'MMM-WeatherChart',
      position: 'center',
      config: {
        apiKey: "",
        dataNum: 7,
        title: "",
        dataType: "daily",
        height: "400px",
        width: "1200px",
        lat: 46,
        lon: 7,
        showIcon: 'true',
        showRain: 'true',
        dailyLabel: 'days_of_week',
        nightBorderDash: [5, 5],
        fillColor: 'rgba(255, 255, 255, 0.1)',
        units: "metric",
        largeOpenWeatherIcon: true
      }
    },
    {
      module: "MMM-RAIN-MAP",
      position: "center",
      config: {
        animationSpeedMs: 500,
      colorScheme: 5,
        colorizeTime: false,
        defaultZoomLevel: 8,
        displayTime: true,
        displayTimeline: true,
        displayClockSymbol: true,
        displayOnlyOnRain: false,
        extraDelayLastFrameMs: 2000,
        extraDelayCurrentFrameMs: 2000,
        markers: [
          { lat: 46, lng: 7, color: "red" },
          // { lat: 48.856, lng: 2.35, color: "green" },
        ],
        mapPositions: [
          // { lat: 46.9334069, lng: 7.5038757, zoom: 10, loops: 1 },
          { lat: 46, lng: 7, zoom: 8, loops: 2 },
          // { lat: 48.856, lng: 2.35, zoom: 6, loops: 1 },
          // { lat: 48.856, lng: 2.35, zoom: 9, loops: 2 },
          // { lat: 49.15, lng: 6.154, zoom: 5, loops: 2 },
        ],
        // mapUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        mapUrl: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
        mapHeight: "420px", // must be a pixel value (no percent)
        mapWidth: "500px", // must be a pixel value (no percent)
        maxHistoryFrames: -1,
        maxForecastFrames: -1,
        substitudeModules: [],
        updateIntervalInSeconds: 300,
      }
    },

[theskyisthelimit]

The trouble starts as soon as MMM-Weatherchart has a higher width as mapWidth in MMM-RAIN-MAP.

[theskyisthelimit]

OK I think I see the Problem. The width of both modules needs to be the same.
But MMM-Weatherchart has 150px "black-space" on both sides. So I had to set the width to 1200px for it to be 900px in reality. Sorry, this might (again) be a problem with the other module