Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

If I generate a very large number of map tiles (300,000), is there an easy way to let a Google Maps user change their color?

For instance, is it possible to change the color scheme of a map tile layer by overlaying it with other images (red, blue, green) with varying degrees of opacity?

My map tiles are showing household income at the census tract level. So that is a single numeric value represented by a color. So I don't risk losing information if I add (or remove) red, blue or green from it.

share|improve this question
    
Please provide an image of what you want to achieve –  underdark Jun 17 '13 at 20:19
    
I'd like to be able to convert one color scheme to another. For instance convert a "blue to green" scheme (BuGn) to a "blue to purple" one (BuPu). colorbrewer2.org See their "sequential" color schemes. –  Aaron Kreider Jun 17 '13 at 21:45
1  
Sorry, that doesn't answer my question. The title says "changing color of tile layer" the text says "overlaying it with other images" ... it's confusing. –  underdark Jun 18 '13 at 6:11
    
I want to change the perceived color of the data layer by the user. However I want to do this without creating an entirely new tile site. So I'm considering overlaying the entire map with one or more images that would affect the overall color scheme of the map. It is a similar process to how image editors work. You can change the RGB balance of an image. –  Aaron Kreider Jun 18 '13 at 18:59
    
Perhaps the easiest way to change the "perceived color" is to ask the user to wear sunglasses :-). –  whuber Jun 18 '13 at 19:12

1 Answer 1

up vote 1 down vote accepted

Yes, this is a nice trick: you can overlap several layers (channels) of CYAN, MAGENTA and YELLOW and then change their opacity! No need to reload the tiles!

Try live example http://jsfiddle.net/Prn4V/3/

It gives you 3 layers: cyan, magenta and yellow, in that order from bottom to top. You can specify opacity for all of these layers, but you have to bear in mind the order of layers (the one on top wins, should have lesser weight).

enter image description here

You see you cannot really achieve the saturated red, green, blue colors because we are mixing from C, M, Y...

Here goes the code:

var mapOptions = {
    center: new google.maps.LatLng(50, 15),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


var mapTypeOpts = {
            mycolor: "C",
            getTileUrl: function (coord, zoom) {
                    var b = zoom;
                    var a = coord;
                    return "http://artax.karlin.mff.cuni.cz/~ttel5535/pub/so/gis-tile-schemes/panaca" + this.mycolor + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            isPng: true,
            alt: 'My Layer - basic map',
            name: 'My Layer',
            opacity: 0.5,
            minZoom: 1,
            maxZoom: 20
    };
var C = new google.maps.ImageMapType(jQuery.extend({}, mapTypeOpts, { mycolor: "C", opacity: 1 }));
var M = new google.maps.ImageMapType(jQuery.extend({}, mapTypeOpts, { mycolor: "M", opacity: 0, }));
var Y = new google.maps.ImageMapType(jQuery.extend({}, mapTypeOpts, { mycolor: "Y", opacity: 0.5 }));
map.overlayMapTypes.push(C);
map.overlayMapTypes.push(M);
map.overlayMapTypes.push(Y);

function change_colors()
{
    C.setOpacity(Number(jQuery("[name=C]").val()));
    M.setOpacity(Number(jQuery("[name=M]").val()));
    Y.setOpacity(Number(jQuery("[name=Y]").val()));
}
jQuery('input').change(change_colors);
//jQuery('form').submit(function () { alert(1); change_colors(); return false; });
jQuery('#submit').click(change_colors);

Part of the HTML:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<form action="#" method="GET">
    C: <input type="text" name="C" value="1.0" size="4">
    M: <input type="text" name="M" value="0" size="4">
    Y: <input type="text" name="Y" value="0.5" size="4">
    <input type="button" id="submit" name="submit" value="OK">
</form>
<div id="map-canvas" />
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.