none
Activating a dark map RRS feed

  • Question

  • Hey Guys

    I'm trying to use a custom style on my map, but no matter what I do, I can't them them working.  My initialize function is:

        this.init = (mapSelector, api, title = '', poi = false, prefix = '', cache = true) => {
          return new Promise((r, j) => {
            if (api.slice(-1) !== '/')
              this.setPrefix(prefix);
    
            this.setCache(cache);
            this.setPOI(poi);
            this.setTitle(title);
    
            try {
              getMapKey().then(key => {
                if(mapSelector) {
                  _map = new Microsoft.Maps.Map(mapSelector, {
                    credentials: key,
                    center: new Microsoft.Maps.Location(_latitude, _longitude),
                    zoom: 13,
                    disableBirdseye: true,
                    disableStreetside: true,
                    showDashboard: false,
                    customMapStyle: JSON.parse(sampleStyle),
                  });
                } else {
                  j('error');
                }
              });
            } catch (error) {
              console.log(error);
            }
          });
        };

    It currently renders the standard map just fine.  but no matter what I pass into customMapStyle nothing works, JSON.parse was added to make sure the data was in JSON format, because I'm running out of ideas..  I've copied the JSON from the examples on:

    https://bingmapsv8samples.azurewebsites.net/#Set%20Custom%20Map%20Style

    Does anyone know how to get a custom style activated?  If that's not possible, is there a dark mode that I can activate, which is what I'm trying to do.

    Thanks


    Monday, May 27, 2019 3:32 AM

Answers

  • The Documentation for Custom Map Styles is available here:

    https://docs.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps

    Your code looks valid as it is the "midnightCommander" from:

    https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Custom%20Map%20Styles/Set%20Custom%20Map%20Style.html

    The next step would be to setOptions on the map to set the customMapStyle darkMode.

    If you go to the ISDK (https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/custommaptilestyles#JS) you can test this out by copy and pasting the following:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
       
        center: new Microsoft.Maps.Location(47.616343, -122.203177) });
    	
        const darkMode = {
            "version": "1.0",
            "settings": {
                "landColor": "#0B334D"
            },
            "elements": {
                "mapElement": {
                    "labelColor": "#FFFFFF",
                    "labelOutlineColor": "#000000"
                },
                "political": {
                    "borderStrokeColor": "#144B53",
                    "borderOutlineColor": "#00000000"
                },
                "point": {
                    "iconColor": "#0C4152",
                    "fillColor": "#000000",
                    "strokeColor": "#0C4152"
                },
                "transportation": {
                    "strokeColor": "#000000",
                    "fillColor": "#000000"
                },
                "highway": {
                    "strokeColor": "#158399",
                    "fillColor": "#000000"
                },
                "controlledAccessHighway": {
                    "strokeColor": "#158399",
                    "fillColor": "#000000"
                },
                "arterialRoad": {
                    "strokeColor": "#157399",
                    "fillColor": "#000000"
                },
                "majorRoad": {
                    "strokeColor": "#157399",
                    "fillColor": "#000000"
                },
                "railway": {
                    "strokeColor": "#146474",
                    "fillColor": "#000000"
                },
                "structure": {
                    "fillColor": "#115166"
                },
                "water": {
                    "fillColor": "#021019"
                },
                "area": {
                    "fillColor": "#115166"
                }
            }
        };
    map.setOptions({customMapStyle:darkMode});
    

    I hope this helps.

    • Marked as answer by Docmur Tuesday, May 28, 2019 6:03 PM
    Tuesday, May 28, 2019 3:12 PM
    Moderator

All replies

  • Anyone have a clue what could be going on?  These are the styles I've tried to load:

        const darkMode = {
          "version": "1.0",
          "settings": {
            "landColor": "#0B334D"
          },
          "elements": {
            "mapElement": {
              "labelColor": "#FFFFFF",
              "labelOutlineColor": "#000000"
            },
            "political": {
              "borderStrokeColor": "#144B53",
              "borderOutlineColor": "#00000000"
            },
            "point": {
              "iconColor": "#0C4152",
              "fillColor": "#000000",
              "strokeColor": "#0C4152"
            },
            "transportation": {
              "strokeColor": "#000000",
              "fillColor": "#000000"
            },
            "highway": {
              "strokeColor": "#158399",
              "fillColor": "#000000"
            },
            "controlledAccessHighway": {
              "strokeColor": "#158399",
              "fillColor": "#000000"
            },
            "arterialRoad": {
              "strokeColor": "#157399",
              "fillColor": "#000000"
            },
            "majorRoad": {
              "strokeColor": "#157399",
              "fillColor": "#000000"
            },
            "railway": {
              "strokeColor": "#146474",
              "fillColor": "#000000"
            },
            "structure": {
              "fillColor": "#115166"
            },
            "water": {
              "fillColor": "#021019"
            },
            "area": {
              "fillColor": "#115166"
            }
          }
        };
    
        const sampleStyle = {
          "elements": {
            "park": { "fillColor": "#A9A9D4BE" },
            "controlledAccessHighway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
            "highway": { "fillColor": "#e6c317", "strokeColor": "#D3B300", "labelColor": "#444444", "labelOutlineColor": "#60ffffff" },
            "water": { "fillColor": "#B7CDDE" },
            "medicalBuilding": { "fillColor": "#fceced" },
            "majorRoad": { "fillColor": "#f0d85a" },
            "education": { "fillColor": "#f0e8f8" },
            "arterialRoad": { "fillColor": "#ffed91" },
            "structure": { "fillColor": "#faf8ed" },
            "buildinglobal": { "fillColor": "#e5e0d8" },
            "forest": { "fillColor": "#deebdd" },
            "vegetation": { "fillColor": "#deebdd" },
            "reserve": { "fillColor": "#deebdd" },
            "street": { "fillColor": "#ffffff", "strokeColor": "#e6e3df" },
            "roadShield": { "fillColor": "#ffffff" },
            "medical": { "fillColor": "#ffddee" },
            "educationBuildinglobal": { "fillColor": "#f6f0f1" },
            "golfCourse": { "fillColor": "#c5dabb" }
          },
          "settings": { "landColor": "#F6F4E3" }
        };


    Monday, May 27, 2019 4:29 PM
  • There is a built in Dark Mode that can be set through mapTypeID called canvasDark:

    https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/maptypeid-enumeration

    You can see it in action on the ISDK here:

    https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/canvasdarkmaptype

    Tuesday, May 28, 2019 2:59 PM
    Moderator
  • The Documentation for Custom Map Styles is available here:

    https://docs.microsoft.com/en-us/bingmaps/articles/custom-map-styles-in-bing-maps

    Your code looks valid as it is the "midnightCommander" from:

    https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Custom%20Map%20Styles/Set%20Custom%20Map%20Style.html

    The next step would be to setOptions on the map to set the customMapStyle darkMode.

    If you go to the ISDK (https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/custommaptilestyles#JS) you can test this out by copy and pasting the following:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
       
        center: new Microsoft.Maps.Location(47.616343, -122.203177) });
    	
        const darkMode = {
            "version": "1.0",
            "settings": {
                "landColor": "#0B334D"
            },
            "elements": {
                "mapElement": {
                    "labelColor": "#FFFFFF",
                    "labelOutlineColor": "#000000"
                },
                "political": {
                    "borderStrokeColor": "#144B53",
                    "borderOutlineColor": "#00000000"
                },
                "point": {
                    "iconColor": "#0C4152",
                    "fillColor": "#000000",
                    "strokeColor": "#0C4152"
                },
                "transportation": {
                    "strokeColor": "#000000",
                    "fillColor": "#000000"
                },
                "highway": {
                    "strokeColor": "#158399",
                    "fillColor": "#000000"
                },
                "controlledAccessHighway": {
                    "strokeColor": "#158399",
                    "fillColor": "#000000"
                },
                "arterialRoad": {
                    "strokeColor": "#157399",
                    "fillColor": "#000000"
                },
                "majorRoad": {
                    "strokeColor": "#157399",
                    "fillColor": "#000000"
                },
                "railway": {
                    "strokeColor": "#146474",
                    "fillColor": "#000000"
                },
                "structure": {
                    "fillColor": "#115166"
                },
                "water": {
                    "fillColor": "#021019"
                },
                "area": {
                    "fillColor": "#115166"
                }
            }
        };
    map.setOptions({customMapStyle:darkMode});
    

    I hope this helps.

    • Marked as answer by Docmur Tuesday, May 28, 2019 6:03 PM
    Tuesday, May 28, 2019 3:12 PM
    Moderator
  • Hi Docmur,

    1. If you are just using the default dark map style, this is likely what you want.  https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/canvasdarkmaptype

    2. If you indeed are trying to use a custom map style,  we posted a blog on it earlier this year. https://blogs.bing.com/maps/2019-02/add-custom-styling-and-sparkle-with-map-style-sheet-editor the colors are a bit bizarre but they were chosen to illustrate that you can really choose whatever you wanted for your map.  Take a look at the my style within the sample and see if yours looks similar.

    3. Lastly, is your style is simple, you can do the definition inline like https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/custommaptilestylesandhexcolor

    Sincerely,

    IoTGirl

    Tuesday, May 28, 2019 3:43 PM
    Owner
  • Thanks!! That's totally worked :), I don't know why I couldn't set it the other way but now it doesn't matter.  Thanks for you help.
    Tuesday, May 28, 2019 6:04 PM
  • Excellent!  Many thanks for confirming the answer worked for you.
    Tuesday, May 28, 2019 10:09 PM
    Owner
  • You might take a look at the Mapstylesheet Editor application

    https://www.microsoft.com/en-us/p/map-style-sheet-editor/9nbhtcjt72ft

    It allows you to interactively work with the style and see it update for the HTML control, the Native control, and static map.

    It also provides code samples as output that work with each of the controls.

    Wednesday, May 29, 2019 3:03 PM
    Moderator