How to specify different maps in Geochart

[matt.jackson]

I'm relatively new to Zoomcharts and am considering it for a dashboard application I'm developing. Can you walk me through where the data for the various maps comes from? Specifically, I'm looking for a map of the US states that also includes Alaska and Hawaii. Thank you very much!

[valts]

Hello!

GeoChart uses Leaflet for the map display, and by default it uses maps from OpenStreetMap, although you can plug in other map sources as well, as long as there's a Leaflet plugin for it. For example, we have an example with Google Maps (seems to have problems at the moment; I'll check it out tomorrow).

Note however that we're in the process of switching our map provider, so there's going to be an update with changed default values soon. The data will still come from OpenStreetMap, but it will be our own tile server that provides the service.

[matt.jackson]

Thanks, Valts. Do you know of a map source that shows the lower continental US states along with Alaska in Hawaii in separate boxes? I want to be able to fit all of the states in a tighter window and when I need to zoom out to include Alaska and Hawaii, the other 48 states are too small.

[valts]

Umm, wait, what? If I understand you correctly, that won't be really possible. It's a map viewer like any other online map - a single box (viewport) with a single map. But perhaps I've misunderstood. Could you can show me a sketch?

Added later

Also, if you don't need panning/zooming, but just a static map with charts overlaid on top, then maybe you don't even need geochart? You could just make an image like you need, put it as a background picture, and then position the charts on top of it?

[matt.jackson]

OK, I understand what you're saying about it all being a single map. I've seen some other map applications that somehow created a view of the US that positioned Alaska and Hawaii in separate boxes so that you didn't have too zoom out so far. Maybe they manipulated the view to have multiple map layers, though. This is an example of what I was looking for:

Here is essentially what I'm trying to do:
- Display of map of the US
- For certain states where our customer has locations, put a pie chart in that state that provides some statistical analysis

The thing I'm struggling with how to do are:
- Use as little space as possible to display all 50 states simultaneously (similar to the graphic I attached)
- Understand how to "pick" the state that I want to put the pie chart on.

From the example, I can see how to load a map and graph on top of that, but I don't understand how to parse the 'states.json' data to just get a specific state, "id" that state and put specific chart data on it.

[valts]

OK, well, I don't know where to get a basemap like that. You'll have to do your own googling, I'm afraid. But if you can find it, then I think we should be able to make it work with GeoChart.

However, I can think of a workaround.

Workaround

First of all, do you want to have the zoom-in ability at all for this map? If you don't need that, then Geochart won't give you any added value. So you can skip that entirely.

Instead, make a picture like above, with all the states drawn. A simple PNG will do, although an SVG would scale better, at the expense of some browser compatibility. Either way, that shouldn't be hard to accomplish.

After that, you put that picture in the page, and then figure out the locations of all the charts. Since the map isn't changing, you can calculate them once and then hardcode these coordinates. You can even simply assign them by hand with trial and error. For 50-odd locations, that won't take so long.

After that, well, just make piecharts at those hardcoded coordinates.

Geochart

If you choose to use GeoChart after all, then the approach is different. You'll need to put together these pieces:

1. Get a basemap provider and a plugin for Leaflet that handles it. Sorry, I can't help you there. Configure Geochart to use it and set boundaries so that Geochart doesn't go outside your map.
2. Figure out the geographical coordinates for the "center" of each state. Those will be the centers of the piecharts. Again, you can do this by hand, or try to do some geometrical calculations. Blind geometry doesn't always work well, so a few small adjustments by hand might still be needed. Anyways, in the end, you'll get a list of state ID's and a corresponding X;Y coordinate for each.
3. Convert these coordinates into nodes. No links needed, just nodes. Add a node layer that shows them. Now, by default these nodes will show up as circles, but you can style them to be completely transparent.
4. Add a charts-on-charts layer for PieCharts. The CoC layer has two important pieces of configuration - first, it will reference the nodes layer to figure out where to place the PieCharts (each node gets a PieChart). Second, you'll need to write a "configuration function" that takes a node as a parameter and spits out the configuration for a PieChart. This function will be called whenever a PieChart needs to be created (these PieCharts will be created and destroyed often, as the user zooms in and pans around, and the visible area changes).

And there you have it. A GeoChart charts-on-charts solution for your problem.

Variation for the Charts-on-charts

Instead of the nodes layer, you can also use a shapes layer. A PieChart will be placed in the middle of each shape (which can sometimes be suboptimal). That's what the PieChart on Geochart demo is doing, actually.

Then you might not even need a basemap, although zooming in would not be very interesting. I'm not sure how to configure Leaflet to be blank, but it shouldn't be difficult, I think. Perhaps there's a plugin for that, or maybe a built in way (null URL?).

Last but not least, you'd need to change the coordinates of Alaska/Hawai to appear beneath the rest of the US.

Any questions?

[matt.jackson]

Thanks, Valts, for sticking with me on this one. I think we’re getting pretty close. The only thing I think I still don’t quite understand is how to use a Leaflet map and specify it as the basemap. Let’s forget about the fancy one that I was looking for. If I just wanted a plain US map from Leaflet, how does that get specified and integrated?

Thanks,
Matt

[valts]

Well, the default settings already have a map of the whole world set up, so you should be good to go without doing anything at all. Just use the navigation settings to specify the initial viewport coordinates.

Is there any reason why the default map is not acceptable?

[matt.jackson]

No, not specifically. I guess I'm just looking for the ability to manipulate individual state properties a little better. Using states.json, is there a way to just identify one state or a select group of states and give it a different color or outline or something?

[valts]

Well, in that case, changing the basemap won't help you much. It's more like a background picture. Although you can add your own custom layers to Leaflet, so I suspect you could get something done that way. It would take a fair bit of work though.

Geochart on the other hand offers to draw shapes (points, lines, polygons) on top of the background map. They're also interactive, so I suspect that this is what you want. The states.json is, by the way, exactly that - a collection of shapes. That file is in our own custom format, but you can also use standard GeoJSON format. That is fairly widely supported, if you choose to import your shapes from another source.

Now, about the styling - there are two ways you can go about it.

First option is to use a style function. Here's an example fiddle: http://jsfiddle.net/4e8u4see/ This is the same example from the documentation, but I've colored California red.

The second option is to include style directly in the data. Unfortunately this will work only with our own file format, not GeoJSON. It would look something like this:

{
    "nodes": [
        {
            "NAME": "Maine",
            "style": { "fillColor": "red" },
            "coordinates": [ .... ]
        }
    ]
}

A little side note - the example data (states.json) is a bit outdated and doesn't reflect the current best practices. Additional data (such as "NAME", "CENSUSAREA", "LSAD") should not be placed directly under the node, but rather in an object named "extra". Like this:

{
    "nodes": [
        {
            "extra": { "NAME": "Maine", "LSAD": "", "CENSUSAREA": 30842.923, },
            "coordinates": [ .... ]
        }
    ]
}

This makes the code future-proof. Otherwise we could some day introduce a new property which accidentally is named the same as your property, and chaos would ensue. This applies to all data objects for all charts - any extra properties that aren't related to ZoomCharts but which you need for your own purposes should go under "extra".

Accessing this data from a callback is naturally done so: node.data.extra.NAME. If the node was created from GeoJSON, then on the other hand you can access extra information like this: node.data.shapeFeature.

[matt.jackson]

OK, thanks. I've been working on this quite a bit over the weekend and I think I pretty much have what I want. I think I only have one more question and it's about the style and sizing of the map inside a div. I can get the chart to fit inside the size of a given div, but I only see a portion of the map, I can't get the entire map to scale down to that size. Even if it's unreadable, is there a way to get the entire map inside a specific div size?

Thanks!

[valts]

Well, the chart itself will always fill its container element. So you can change the size of it by changing the container element. After that, you probably want navigation.initialLat/initialLng/initialZoom. Maybe even navigation.maxBounds, if you want to restrict the available map area.