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.

I am trying to show some information on Google Maps which would be in the form of translucent circle overlays. The problem is that some circles overlap, which results in increased opacity and blending of colors if circles are of different color. I searched a lot and came to conclusion that there is no possible way to avoid color blending.

The alternate solution I was recommended was to generete png tiles on my server and display them or decide color of each pixel on server side and use HTML5 canvas and render each pixel. I searched a lot but couldn't find any way to do so. It would be very helpful if someone could point me in the right direction.

I am rephrasing my question below to be more clear and concise

I have to display circles on a map. Radius and color of these circles depict their area of influence and type of influence. These circles are translucent but overlapping should result in only the top one being visible without any blending. How do I generate tiles for this information?

Probably I am not clear so I am adding further details.

Check this jsFiddle http://jsfiddle.net/Dv4UT/ .There are two overlapping circles green(zIndex : 10) and red(zIndex : 11) with opacity .5 .The overlapping part is a mixture of red and green while I want the overlapping part to be of top color with same opacity ie:red.If this is possible using map overlays then it would be great.Else I think it is possible using HTML5 canvas but that won't work on older version of IE.So finally I would have to fall back on generating tiles on server side and using them as overlays.I don't have any idea of generating tiles and it would be very helpful, if someone could point me in the right direction.I am attaching a screenshot from trulia commute map, check that circles beneath are being overwritten by top ones.I need similar kind of visualization.

example image

share|improve this question
    
Have you tried using CartoDb? www.cartodb.com –  Tamas Jan 20 '13 at 23:31
    
Checked it.It won't solve my problem.I can't find any way there to generate tiles. –  arun chaudhary Jan 21 '13 at 9:15
    
so circles with opacity will always blending colour? You can control the opacity for each circle - jsfiddle.net/8GaZ5/1 gmaps v3 –  Mapperz Jan 21 '13 at 14:55
    
Thanks Mappers for your time.I think I am not clear so I have added more details to the question.Check this jsfiddle jsfiddle.net/Dv4UT . The overlapping part is brown and I am trying to avoid exactly that.I want the overlapping part to be of the color of circle on that top ie: red in this case. –  arun chaudhary Jan 21 '13 at 17:26
add comment

1 Answer

I would do the following:

  1. Keep the opacity of the circles really low (so blending issue dont become mainstream)
  2. On mouse hover, change the opacity to overcome that of the intersecting circle

This way, I would be able to display data without any major color blending induced interference and highlight a particular circle as user hovers on it.

share|improve this answer
    
That wont work.Firstly in some places as many as 10 circles might intersect.Secondly circles might be of different colours ie: green circle overlapping red circle.In such cases I would get a blend of overlapping colors while I should only get the top colour.Mouse hover won't solve anything because blending occurs only in the overlapping part rather than whole circle. –  arun chaudhary Jan 21 '13 at 6:44
add comment

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.