8

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

Improve this question
4
  • Have you tried using CartoDb? www.cartodb.com
    – EZMapdesign
    Jan 20, 2013 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, 2013 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, 2013 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, 2013 at 17:26

2 Answers 2

Reset to default
2

create your overlay offline(but dynamically) using the programming language of your choosing. it'll be a bit complex but the basic pseudo code would be:

browser javascript send request url for overlay
acquire gis bounds for tile server side
gather all points and sort by their relevance
create image(transparent)
for each point: (least relevant first)
   draw new circle (will 'overwrite' any overlap areas)
stream image to browser
display image as overlay

depending on how big your area is, you could create a raster offline and then serve it with mapserver or other free mapping delivery program. creating your own raster will ensure the display is how you want it.

Improve this answer
1

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.

Improve this answer
1
  • 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, 2013 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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