Search code examples
c#winformsopenstreetmapdarkmodegmap.net

Dark mode map in GMap.NET


I'm developing an application using C# and WinForms, with GMap.NET library.

Would anyone know any way to set the dark mode for the map?

I'm currently using the OpenStreet map: map.MapProvider = OpenStreetMapProvider.Instance

I've looked in the documentation but I didn't find anything. When using Google map, it is possible to set color parameters in CSS, but I didn't find a way to define a CSS or theme directly in C#.


Solution

  • GMap.NET provides three predefined rendering modes:

    • the default one, using the colors defined by the Provider
    • An inverted mode, which sets the colors to negative => [GMapControl].NegativeMode
    • A gray-scale mode, where all colors are converted to a scale of gray; white is white => [GMapControl].GrayScaleMode

    These rendering modes use a ColorMatrix object to define the amount of color per channel.

    It also provides means to specify a custom ColorMatrix, setting the [GMapControl].ColorMatrix property.

    The inverted matrix is ~like this:

    var matrixInverted = new ColorMatrix(new float[][] {
        new float[] { -1,  0,  0,  0,  0},
        new float[] {  0, -1,  0,  0,  0},
        new float[] {  0,  0, -1,  0,  0},
        new float[] {  0,  0,  0,  1,  0},
        new float[] {  1,  1,  1,  0,  1}
    });
    

    The gray-scale matrix is ~like this (my interpretation):

    var matrixGray = new ColorMatrix(new float[][]
    {
        new float[] { .2126f, .2126f, .2126f, 0, 0 },
        new float[] { .7152f, .7152f, .7152f, 0, 0 },
        new float[] { .0722f, .0722f, .0722f, 0, 0 },
        new float[] { 0, 0, 0, 1, 0 },
        new float[] { 1, 1, 1, 0, 1 }
    });
    

    If the negative mode is not exactly what you're looking for, you could invert the colors of the gray-scale ColorMatrix:

    var matrixGrayInverted = new ColorMatrix(new float[][]
    {
        new float[] { -.2126f, -.2126f, -.2126f, 0, 0 },
        new float[] { -.7152f, -.7152f, -.7152f, 0, 0 },
        new float[] { -.0722f, -.0722f, -.0722f, 0, 0 },
        new float[] { 0, 0, 0, 1, 0 },
        new float[] { 1, 1, 1, 0, 1 }
    });
    

    Then set the property:

    [GMapControl].ColorMatrix = matrixGrayInverted;
    

    About the usage of these matrices, see the notes in these questions:

    How can I gray-out a disabled PictureBox used as Button?
    How to use a slider control to adjust the brightness of a Bitmap?
    How to apply a fade transition effect to Images using a Timer?
    Replacing colour of an Image