Allow high contrast mode

[waldyrious]

Especially when zooming in areas with few stargazers, the heatmap is barely visible. I can think of a few alternatives to achieve better contrast:

• the map could be faded
• markers could be shown rather than (or in addition to) the heatmap at zoom levels where only a few cities are visible
• the colors of the heatmap could be changed

Thoughts?

[rviscomi]

This is a valid concern. I'll check the Google Maps API for a good solution.

[waldyrious]

I just found Google Map API's styled map wizard and played a little with it; here are a few settings that might be of use as a starting point:

[
  {
    "featureType": "landscape",
    "stylers": [{"lightness": 80}]
  }, {
    "featureType": "poi",
    "stylers": [{"visibility": "off"}]
  }, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [{"visibility": "off"}]
  }, {
    "featureType": "road.arterial",
    "stylers": [{"visibility": "off"}]
  }, {
    "featureType": "road.local",
    "stylers": [{"visibility": "off"}]
  }, {
    "featureType": "road.highway",
    "stylers": [{"lightness": 75}]
  }
]

[rviscomi]

@Waldir I looked into this and even wrote a "toggleContrastMode" method to get a feel for how this would work. I found that it's actually pretty easy to adjust the contrast in this way directly on the client side. The RedDwarf JavaScript object exposes enough functionality to be able to set these styles.

Here is all it takes to enable "contrast mode", using the global RedDwarf instance, named stars in my implementation:

stars.map.setOptions({
    styles: [{
        "featureType": "landscape",
        "stylers": [{"lightness": 80}]
    }, {
        "featureType": "poi",
        "stylers": [{"visibility": "off"}]
    }, {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [{"visibility": "off"}]
    }, {
        "featureType": "road.arterial",
        "stylers": [{"visibility": "off"}]
    }, {
        "featureType": "road.local",
        "stylers": [{"visibility": "off"}]
    }, {
        "featureType": "road.highway",
        "stylers": [{"lightness": 75}]
    }]
});

Or if you want to turn off "contrast mode" just pass an empty array to the styles property:

stars.map.setOptions({
    styles: []
});

[waldyrious]

looks great :) but don't you think it'd be more user-friendly to have a control in the UI to do that?

[rviscomi]

Definitely. But remember that this repo is concerned with the application logic (red-dwarf.js) and not necessarily the client side UI, so no change is necessary.

As for making this change on the project page at http://jrvis.com/red-dwarf/ I have to say that I like the look of the default map. Of course, anyone is free to come up with their own implementation.