You can use the Chrome developer tools to track what information the
GeoChart loads. One of those things will be a map. Our maps aren't
distributed in SVG, but JSON (or more accurately, a variant of
JSONP<http://en.wikipedia.org/wiki/JSONP>).
Here is the actual AL
map<http://www.gstatic.com/charts/geochart/10/mapfiles/US-AL_PROVINCES.js>,
for an example. What you need to do is put your map data into that format,
host it somewhere, and specify the new URL. A very important aspect is that
all coordinates are expected to be in projected Mercator. We're working to
change this, but we haven't yet. Here is a quick breakdown of the example
map:
closure_verification.google_visualization_geochart_US$AL_PROVINCES = { //
This is basically the name of the map. You'll need to match this in your
own maps.
// This will be an array of views. Generally, you'll only have one
view, but certain maps (like the US) may have multiple, in order to scale and
position Alaska and Hawaii properly.
"views": [{
"scale": "1", // Each view has a scale. You'll probably want this to
be '1'.
"xoffset": "0", // The X offset of the view.
"yoffset": "0", // The Y offset of the view.
"boundingBox": { // This is the bounding box of the view. Since
you're doing Alabama, you'll probably want to keep this the same (since
this is an annotated Alabama map).
"hi": ["37.6993", "-81.6631"], // The high coordinate of the
bounding box, latitude first.
"lo": ["31.4362", "-91.6984"] // The low coordinate of the
bounding box, latitude first.
},
// This is the fun part. This is the array of features that you will
display on your map. You can have as many as you want, and you cannot nest
them.
"features": [{
"id": "US-AL", // This is the id of the feature. Or how the
GeoChart will refer to it if/when you give it a value.
"type": "4", // This is the type of the feature. Provinces are
type '4', disputed areas are type '44', DMAs are type '41', and just about
everything else is type '3'.
// This is the important bit. It's a list of polygons for this
feature.
"polygons": [{
// Each polygon must contain a shell property, which is a list of
coordinates that represents the outside of the polygon. Remember that the
coordinates are projected Mercator coordinates, and not true lat/longs.
"shell": [
[latitude, longitude],
...
],
// The holes property is a list of holes, meaning it's a list of
lists of coordinates.
"holes": [
[
[latitude, longitude],
...
],
...
]
}]
}]
}]
}
I hope that helps you. You can analyze the map itself for more information.
- Sergey
On Mon, Jul 8, 2013 at 11:31 AM, Bluestreak2k5 <[email protected]>wrote:
> How would I go about reverse engineering the maps?
>
> I've created an SVG here of 1 state:
> http://chrisdblumberg.com/svg/alabama.svg
>
> I don't have the hover effects or anything in the SVG, which is what I am
> assuming I would need to reverse engineer.
>
> How would I go about making this SVG load when I click on the Alabama
> state? I know there is a region click event.
>
> Chris
>
> --
> 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 [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
