Combine a Regions Map and a Marker Map

[sitesALIVE]

Hi:

I am trying to combine a markers map and a regions map. I am able to have both work separately, but don't know how to combine them. Very noob when it comes to Javascript.

http://vg2016.sitesalive.com/map.html

I tried having both scripts and giving them the same ID, then only calling that ID, but didn't seem to work. 

Any thoughts?

Thanks.

[Daniel LaLiberte]

Playing with css in the debugger, I was able to overlay the second chart on top of the first, using position: absolute; top: 0; and layered it under the first chart with z-index: -1.  There was a slight offset that would need to be corrected.  Then I hid the container of the first chart's nation borders with display: none, and made the background-color of the regions chart be transparent.  So it is possible.  Might be easier just to move the marker elements from the first chart to the second.  jQuery could probably automate this, assuming you want a live chart rather than a one-time image.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/54011d72-8034-491c-8b99-09fe3b45f737%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[sitesALIVE]

Hi Daniel:

I like the approach. I can't quite seem to replicate it - which div contains the nation borders? That is the only piece I haven't implemented, so for now the top marker chart is still hiding the bottom region chart, although I can see it peeking out at the top, so I know the position / z-index part is working.

Thanks
Lauren

[Daniel LaLiberte]

The nation borders are all in a group 4 levels deep in the svg element for the first chart. Happens to be first child all the way down, so a css selector like "svg > g > g > g > g" ought to get you to the right one.  Actually, I set display: none for that group, and I also changed the rect covering the entire chart at "svg > g > rect" so it has fill="transparent".

Looks like the offset between the two charts is just 8px vertically, so use top: 8px instead of top: 0.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/32296c09-be2b-48e9-a996-d1aebc7d4e00%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.