Creating a custom GeoChart for US counties

[Bluestreak2k5]

Ok so I know google Charts doesn't support viewing county data, but I would like to know if it would be possible to create my own custom Map that would.

Another Google Team has created an experimental App called Fusion Tables. Not sure why these 2 aren't integrated, but irrelevant...

They have a Map with all the US counties already mapped out in KML located here:

https://www.google.com/fusiontables/DataSource?docid=0IMZAFCwR-t7jZnVzaW9udGFibGVzOjIxMDIxNw#rows:id=1

Could I create a custom map to use this KML data to draw items in Google Charts, which from my understanding uses SVG images.

Things I would like to start off with:

Each state would have an option to load its counties (Loading all counties as a map would be a long term goal, but seems to be more difficult at the moment.)

I could then use the GEO_ID or GEO_ID2 as the unique Identifiers for each county, allowing you to map data to each county the way you currently use State ISO codes to map to each state.

It could alos look something like US-AL-1001 being the country-(State/Region)-(county FIP CODE) to allow for expandability into future countries.

Chris

[Sergey Grabkovsky]

Hi, you can create custom maps for the GeoChart, however it gets a tad tricky. GeoChart expects your maps to be named in a certain way and be in a certain format, so you would have to reverse engineer how the maps are structured in order to draw your own. You can set to your own maps source by writing google.visualization.GeoChart.setMapsSource(newSourceUrl).

- Sergey

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Bluestreak2k5]

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

[Sergey Grabkovsky]

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). Here is the actual AL map, 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

Chris

--

[Bluestreak2k5]

Thanks so much Sergey!

I have converted the KML to a JS file like you linked me to, it is here:

http://chrisdblumberg.com/us_counties/alabama_counties.js

I replaced the polygon id="US-AL" with all the polygons of the individual counties.

Each county is represented by an ID using the FIPS code, such as US-AL-1001 would represent Autauga county in Alabama. This should allow for easy future expansion as this is a Unique identifier to each county.

How would I go about testing this map now, and would this be the correct way of doing it? I wasn't sure about the other polygons that were in that file so I left them all alone and are located at the bottom.

Chris

[Sergey Grabkovsky]

Okay, this is going to be extremely tricky. The GeoChart expects everything to be under a base URL, the maps source. By default, the maps source is set to "https://www.gstatic.com/charts/geochart/10/". You can set a new maps source by calling google.visualization.GeoChart.setMapsSource(newSourceUrl), where newSourceUrl is your new URL (for example, newSourceUrl = 'http://chrisdblumberg.com/maps/'). From this point on, you could figure out what resources the GeoChart is requesting yourself, and place them there one by one; but I'm going to help you a bit more.

Your file isn't formatted correctly. It's not even valid javascript. You're missing braces around all your features and you're not closing a lot of the braces and brackets that you do have. Your lat/longs aren't supposed to be formatted as a single string, but as two separate strings, as they are in the example file. However, because I'm an unreasonably nice person, I've decided to help you with all of those problems. So here is the fixed map file, and here is a jsfiddle using it. But I'm sure you'll notice a few funny things happening. The first thing is that all the counties look off on the Y axis. This is because all the coordinates are supposed to be in projected Mercator space, like I mentioned in my last response. You can find the formula for converting your coordinates on the Mercator Projection Wikipedia page. For mercator, you only need to project the latitude, and not the longitude, so it's pretty easy. For simplicity sake, you can just use the formula below:

projectedLatitude = (180 / PI) * log(tan(latitude / 180 * PI / 2 + PI / 4));

The other thing that you may notice is that the regions in my example aren't being highlighted. This is a harder problem to solve. It's happening because the GeoChart tries to geocode the IDs without ever checking if the given IDs match the map IDs. This is a bug. Kind of. Until I figure out a permanent fix, you're going to have to hack around it. The trick here is to fit the format of a province code so that the GeoChart doesn't fall back on geocoding. The GeoChart will fall back on geocoding (in the case of a province) if the ID doesn't match the format of "two letters, followed by a dash, followed by two alphanumeric characters". One way to get around this problem is to encode your provinces as hex, and use AL as the 'country code' (I put it in quotes because it's not really the country code, and using US-AL-XX doesn't work). So, since everything is in the format of US-AL-1DDD (where D's are digits), and all the codes -1000 are under 255, we can encode them as hex. So US-AL-1001 becomes AL-01, US-AL-1005 becomes AL-05, US-AL-1010 becomes AL-0A, and so on. Here is a demo where that works. Note that I'm using a different path there and loading a different map, where all the counties are renamed.

The other polygons in that file are the other states. Good call on leaving them alone, since now you can make sure that your counties match up to them, and you can have some context for what you're looking at.

- Sergey

Chris

--

[Bluestreak2k5]

Thanks Sergey!

you didn't have to fix it, but thanks! I had actually already noticed I was missing the " around each coordinate and had written a regex function to add those to the file.

I wrote a scraper that just scrapes the KML file and outputs to me the corrected data, so these changes shouldn't take long. I was really just not sure how to test it but now with your example I can test it when my parser is done with each file.

Your fix for the ID won't be able to last long term though, FIPS numbers go into the 6000's:

https://www.google.com/fusiontables/DataSource?docid=1KF4g1O0zxPwQBisz1tVHfd1dXvNiVB_OKxUiMw

According to http://gallery.usgs.gov/audios/124 there are more then 3000 counties in the US, so even converting to base 36 wouldn't solve the problem. We would need 3 digits minimum to use Base 16 giving 4096 possible combinations.

But one problem at a time, first to fix the data!

[Sergey Grabkovsky]

My ID fix was dependent on the assumption that you would never show more than one state's worth of counties per map. Which would mean that you could always do hex(fid - minFid), since you're probably not going to show more than 256 counties per map.

However, if you're looking for a solution that will generically support any fid, this is what I would do: you can convert the fid number to base 26, using only letters, and simply insert a hyphen after the second letter. You'll have to cut out the state name, but it should work for all your counties with minimal conflicts. 

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
- Sergey

[Bluestreak2k5]

2 things:

I noticed in the maplist that US metros has ID's that have 3 digits in the second area. Does this mean I can use 3 numbers and or letters in the ID in the second area, or possibly more?

 "METROS": ["US", "US-500", "US-501", "US-502" ......

Can I overwrite the function that doesn't allow ID's to have a third area like I want it to be?

My biggest concern is the long run, using ID's such as AL-??? will have conflicts if someone ever decides to do states/provinces for the AL country, which using the US naming convention would be AL-??. Multiple countries conflict with US state Initials so this would be a bigger issue.

Also, I would like to do congressional districts after I'm done with the states, and as such, it becomes increasing harder to do congressional district ID's and US county ID's for the same state that are Unique.

With that also being said I would like to continue on after this and add Canadian/Mexican Provinces and Canadian/Mexican Province counties and possibly more countries provinces/states.

And with all that being said, I have 2 complete states now, Alabama and Alaska and you can point your map location to http://chrisdblumberg.com/maps/ such as this: http://jsfiddle.net/f3sXW/1/

It only takes me about 5 minutes per state now to complete them now that the KML parser is done, and my goal is to have all of the US counties done by this weekend some point with the data graphed and Region clicks enabled.

[Sergey Grabkovsky]

The next version will actually contain the fix for allowing arbitrary IDs, so that won't be a worry. I completely understand your concern, and unfortunately I can't address it without pushing a new version, which may be a month or so away.

US metros are actually 'special' in the code. They're explicitly whitelisted, and I believe it has to be of the format /\d\d\d/ (three digits in a row).

There are no functions you can override, since all our code is obfuscated.

- Sergey

--

[Bluestreak2k5]

Alright so this proved to be a litttle tougher then originally thought (The maps was the easy part).

All of the maps are done here: http://chrisdblumberg.com/maps/mapfiles/

I had to use Hexadecimal on the number of counties as Texas has 255 counties and couldn't do Hexadecimal on the FIPS.

When then led to my next problem getting the data from the US labor bureau to map it... Turns out opening allt he files required to get all the data and parsing 2 million lines of county data takes about 13 hours, and I didn't get it right the first time. Also I have a column in the DB named mapping_code specifically to create the map code for the current base 16 format, but haven't actually fixed all of the state in my DB, even AL is only partially fixed.

Here is my current working project:

http://chrisdblumberg.com/unemployment/

Alright so here is what I need:

I need the map for all the US states as shown, so I can just set all the location for the entire project to use my domain.

How would I go about setting up a RegionClick event to load a new map when clicked?

This is what I want to do:

given the map shown, if you click on AL I want to load AL counties and populate it. I am still working on the files and the mapping data, but It's almost done here: http://chrisdblumberg.com/unemployment/getCounties.php

The file only currently returns AL but will eventually return data based on GET parameters of YEAR, MONTH, and STATE.

mapping_code will be the code used to map the data to each county and when I can use FIPS instead this will be deleted.

[Sergey Grabkovsky]

You can find the map of US states yourself by looking at the Network tab in Chrome developer tools to see what content has been loaded. The current version of the US state map can be found here.

You can set up a regionClick event like so:

google.visualization.events.addListener(geochart, 'regionClick', function(r) {

  options.region = r.region;

  geochart.draw(data, options);

});

- Sergey

[Bluestreak2k5]

Thanks Sergey!

It's 99% complete now and working:

http://chrisdblumberg.com/unemployment/

Clicking on a state will bring up all the counties for that state with the data graphed. Clicking on any county or state will bring you back to the original view.

However the current data for counties is from 1990 to 1994, and not the years selected above. I only have 1990 to 94 data loaded and will take another 3 days to upload the last 8 million lines of data roughly for data until 2013. I will probably rewrite the uploaded and optimize it more, but that will be 1 day.

I just need to finish updating the mapping codes on a few states for this phase 1 to work as planned.

Chris

[Sergey Grabkovsky]

Your project is really impressive! I believe you're the first user to be making their own maps =) But may I suggest that you use version 1.1? I noticed that switching maps is a bit slow, and saw that this because of some geocoding issues that we fixed in the newer version. We'll eventually push the fix to 1.0, but until then it'll be a much better experience to use 1.1.

- Sergey

[Bluestreak2k5]

Thanks Sergey!

Marvel Entertainment didn't seem too impressed with it on Friday when I showed it to them in my final interview, but it also in phase 1 prototype state and not its current state.

Anyway... 

http://chrisdblumberg.com/unemployment/

The year selection works now for Counties, and will persist going between counties and State. So 2012 to 2013 will be selected for counties, and changing it to 2011 to 2013 while in counties will make that data show up in States view.

The County and State names now show up instead of their actual Map ID's, making it more useful.

I've completely rewritten the JS and it will be optimized when I'm done except I've run into a few issues:

1. Setting the initial URL at the top of index.js to /unemployment/get.php?fromYear=2013&toYear=2013 creates errors trying to load the data. From what I can tell its a race condition trying to load the Google charts JS files and load my Map data. If my Json call to my get.php file returns before "format+en,default,geochart.I.js" is loaded, I get undefined functions errors on google.visualization.

Anyway around this?

2. I need a way to add all my data without doing "data.addRows()" as I am doing. It doesn't work when I have tried to combine the DrawStateMaps and DrawCountyMaps functions into 1 function called DrawMaps. All 3 methods are in my index.js file. All 3 are called from the getData() function.

I have seen other examples about using DataToArray instead of DataTable, but I feel like this would require a major rewrite and am looking to see if you have a better solution.

Chris

[asgallant]

The race condition is caused by executing "getData" here:

google.load('visualization', '1.1', {packages: ['geochart'],  callback: getData(url) });

What the callback expects to have a function as a parameter, not the returned value of a function (unless the return value is a function).  What you are actually doing here is executing the getData function and passing null to the callback parameter.  What you want to do is this:

google.load('visualization', '1.1', {packages: ['geochart'],  callback: function () {

    getData(url);

}});

Which delays calling getData until the API is loaded.  That should clear up your first issue.

Could you elaborate on the problems you are having combining the state and county maps together into one function?  There shouldn't be any reason why you would need to switch to using the arrayToDataTable function.

[Sergey Grabkovsky]

I don't think Marvel Entertainment realizes how much work it took to create custom maps for the GeoChart for resolutions that it doesn't even support =)

1. asgallant is spot on about this. You need to give it a function, not the result of a function call (unless the result of the function call is a function).

2. It sounds like it might be easier for you to use the ChartWrapper, since that would allow you to use a JSON object to represent each chart, and you could have your server generate that. 

- Sergey

[Bluestreak2k5]

Hey asgallant, been a few years.

Thanks that has fixed the race condition:

The issue with the combined method called DrawMaps() was that to have 1 method draw both states and counties I had to do data.addRows(256); This created an error on drawing the states which only needs 50 rows and the error would say cannot get length of null.

I do not encounter the same issue with counties, even though some states only have a few counties. 

I have fixed the issue by just putting the addRows() within a if statement that checks if I am drawing counties or states. But I am still open to a better suggestion then what I do currently:

data.addRows(50 or 255)

data.addColumn(State or county mapping code)

data.addColumn( Hover text for data)

data.addColumn( Hover Text for State/County Name)

foreach( stateOrCounty )

data.setValue()

data.setValue()

data.setValue()

[asgallant]

Why specify the number of rows at all?  You can just add as many rows of data as you have, one at a time (or put your data into an array of arrays and add it all at once).  This makes your code more robust in that it can handle arbitrarily sized data sets without over-allocating (or under-allocating) resources in the DataTable:

/* This function draws all the maps for the States

*

* parameters 

* dataArray = a 2d Array with the data for each state or county

*/

function drawMaps(dataArray, counties)

{

    google.visualization.GeoChart.setMapsSource('http://chrisdblumberg.com/maps');

    mapCount = 0;

    while( mapCount < 4 )

    {

        var data = new google.visualization.DataTable();

        var totalUsNumber = 0;

        

        if( !counties )

        {

            data.addColumn('string', 'State');

        }else

        {

            data.addColumn('string', 'County');

        }

        

        if( mapCount == 0 )

            data.addColumn('number', 'Change in workforce');

        else if( mapCount == 1 )

            data.addColumn('number', 'Jobs created');

        else if( mapCount == 2 )

            data.addColumn('number', 'Change in # of people without a job');

        else if( mapCount == 3 )

            data.addColumn('number', 'Change in unemployment rate');

        

        data.addColumn('string', 'Display');

        minValue = 0;

        maxValue = 0;

        for( entityNumber = 0; entityNumber < dataArray.length; entityNumber++ )

        {

            stateLatestData = dataArray[entityNumber].length - 1;

            if( mapCount == 0)

            {

                lastValue = Number( dataArray[entityNumber][stateLatestData].total_workers );

                firstValue = Number( dataArray[entityNumber][0].total_workers );

            }else if( mapCount == 1 )

            {

                lastValue = Number( dataArray[entityNumber][stateLatestData].total_employed );

                firstValue = Number( dataArray[entityNumber][0].total_employed );

            }else if( mapCount == 2 )

            {

                lastValue = Number( dataArray[entityNumber][stateLatestData].total_unemployed );

                firstValue = Number( dataArray[entityNumber][0].total_unemployed );

            }else if( mapCount == 3 )

            {

                lastValue = Number( dataArray[entityNumber][stateLatestData].unemployment_per );

                firstValue = Number( dataArray[entityNumber][0].unemployment_per );

            }

            

            finalValue = lastValue - firstValue;

            if( mapCount == 3 )

                finalValue = Math.round((lastValue - firstValue)*100)/100;

            

            totalUsNumber += finalValue; //this gets the total change across the nation

            

            data.addRow([dataArray[entityNumber][0].mapping_code, finalValue, dataArray[entityNumber][0]['name']]);

            

            minOrMax(finalValue);

        }

        

        if( mapCount == 0 )

        {

            $('#changeUSWorkforce').html( totalUsNumber );

            $('#changeUSWorkforce').parseNumber({format:'#,###', locale:'us'});

            $('#changeUSWorkforce').formatNumber({format:'#,###', locale:'us'});

            var container = document.getElementById('totalWorkers');

            setColorsArray( minValue, maxValue );

        }else if( mapCount == 1 )

        {

            $('#changeUSJobs').html( totalUsNumber );

            $('#changeUSJobs').parseNumber({format:'#,###', locale:'us'});

            $('#changeUSJobs').formatNumber({format:'#,###', locale:'us'});

            var container = document.getElementById('totalEmployed');

            setColorsArray( minValue, maxValue );

        }else if( mapCount == 2 )

        {

            $('#changeUSNoJobs').html( totalUsNumber );

            $('#changeUSNoJobs').parseNumber({format:'#,###', locale:'us'});

            $('#changeUSNoJobs').formatNumber({format:'#,###', locale:'us'});

            var container = document.getElementById('totalUnemployed');

            setColorsArrayReverse( minValue, maxValue );

        }else if( mapCount == 3 )

        {

            totalUsNumber = totalUsNumber / 50;

            $('#changeUSPercent').html( totalUsNumber.toFixed(2) );

            $('#changeUSPercent').parseNumber({format:'#,###.00', locale:'us'});

            $('#changeUSPercent').formatNumber({format:'#,###.00', locale:'us'});

            var container = document.getElementById('unemploymentPercentage');

            setColorsArrayReverse( minValue, maxValue );

        }

        

        var geoChart = new google.visualization.GeoChart(container);

        var formatter = new google.visualization.PatternFormat('{1}');  

        formatter.format(data, [0, 2]);

        var view = new google.visualization.DataView(data);

        view.setColumns([0, 1]);

        

        google.visualization.events.addListener(geoChart, 'regionClick', function(r) 

        {

            if( !counties )

            {

                $('#countiesShown').val('true');

                $('#stateCode').val(r.region);

                options.region = r.region;

            }else

            {

                $('#countiesShown').val('false');

                $('#stateCode').val('');

                options.region = 'US';

            }

            setURL();

        });

        geoChart.draw(view, options);

        

        mapCount++;

    }

}

As an aside, I was checking out your maps, and saw that your counties are sometimes mislabeled (using my home state of MA as an example, almost every county has the wrong label, compare with http://geology.com/state-map/massachusetts.shtml).  The county polygons could also use some work, but that might prove to be a labor- or compute-expensive task that isn't worth it.

All in all, an impressive result.  Bravo!

[Bluestreak2k5]

Thanks for the row fix!

I had already known there was an issue but I didn't realize how bad it was until today, and it was also a low priority. Turns out almost all counties were actually wrong due to a data error I didn't know about in Labor bureau data.

Some of the counties listed in the labor bureau do not contain their actual FIPS code and are completely arbitrary and sometimes this led to a duplicate FIPS code.

They are identified as like CN(state FIPS code)(3 digit number)(ID of dataset) but for about half the 3 digit number was the fips code and half weren't. Which is why some counties didn't appear with any data, because the ones that weren't FIPS codes sometimes conflicted with a real FIPS code and overwrote it in the DB. 

I had already begun fixing it, and its completed now after having to get a file from the Labor bureau to map all Labor Bureau ID's to FIPS codes. Then reconstructed the entire DB.

Part of the reason for such a big error is I run a command to generate the mapping codes after inserting the 900,000 rows into the DB. The counties are not listed by in order or by state in the files so its a pretty hard to create its mapping code that is an auto-increment 16 bit Hex number by state. Since some counties are overwritten by other counties, that county mapping ID is now passed on to the next county in the list, making all the counties after the missing county wrong.  

MA is correct now :)

[Bluestreak2k5]

I'm having an issue with new custom maps:

I've declared CA CA-AB and CA-BC in

http://chrisdblumberg.com/maps_uncompressed/info/mapList.js

and I've created the 2 new files CA-AB and CA-BC the same formatting and naming convention for US states, but it just returns this map doesn't exist.

http://chrisdblumberg.com/maps_uncompressed/mapfiles/

just set the map source to:

google.visualization.GeoChart.setMapsSource('http://chrisdblumberg.com/maps_uncompressed');

CA works as I copied your file, but the new ones don't. What am I doing wrong?

[Bluestreak2k5]

Ok well the issue is actually with your code,

In your file: geochart.I.js

on lines (roughly) 18481 (near the bottom of the file) you are declaring a variable that assigns values for PROVINCES etc. You have a check in a function below that to detect if the region given from the draw function is in this variable.

This basically makes it so that no one can ever make a custom named map in Google GeoCharts. Is this intentional?

I have solved the problem on a personal basis and can now work with new maps.

[Sergey Grabkovsky]

Hmm.. Well if it was intentional, it's not anymore. I tried to look to see what you meant, but I couldn't find the line of code that you're referring to. My numbering of the served GeoChart javascript only goes up to 16000 lines. The GeoChart includes a built-in mapList file, which is what you may be seeing. That should only be used when you're using the default maps source. If you could post a snippet of the compiled code so that I could find it and track it down, that would be great.

I'm also curious what your solution is for this?

- Sergey

--

[Bluestreak2k5]

Well in the obfuscated code you have a variable called:

 var Ap = {

            COM: {

and under that you have definitions for COUNTRIES, REGIONS, PROVINCES etc.

                PROVINCES: ["AD", "AE", "AF", "AG", "AL", "AM", "AO", "AR", Od, "AU", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", 

                    "CA", "CA-AB", "CA-BC", "CA-MB", "CA-NL", "CA-NS", "CA-NT", "CA-NU", "CA-ON", "CA-PE", "CA-QC", "CA-SK", "CA-YT",

                    "CD", "CF", "CG", "CH", "CI", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "EH", "ER", "ES", "ET",

                    "FI", "FJ", "FM", "FR", "GA", "GB", "GD", "GE", "GH", "GL", "GM", "GN", "GQ", "GR", "GT", "GW", "GY", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IN", "IQ", "IR", "IS", "IT", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR", "KW", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MD", "ME", "MG", "MH", "MK", "ML", "MM", "MN", "MR", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NE", "NG", "NI", "NL", "NO", "NP", "NR", "NZ", "OM", "PA", "PE", "PG", "PH", "PK", "PL", "PT", "PW", "PY", "QA", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SH", "SI", "SK",

                    "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SY", "SZ", "TD", "TG", "TH", "TJ", qe, "TM", "TN", "TO", re, "TT", "TV", "TZ", "UA", "UG", ve, "US-AK", "US-AL", "US-AR", "US-AZ", "US-CA", "US-CO", "US-CT", "US-DC", "US-DE", "US-FL", "US-GA", "US-HI", "US-IA", "US-ID", "US-IL", "US-IN", "US-KS", "US-KY", "US-LA", "US-MA", "US-MD", "US-ME", "US-MI", "US-MN", "US-MO", "US-MS", "US-MT", "US-NC", "US-ND", "US-NE", "US-NH", "US-NJ", "US-NM", "US-NV", "US-NY", "US-OH", "US-OK", "US-OR", "US-PA", "US-RI", "US-SC", "US-SD", "US-TN", "US-TX", "US-UT", "US-VA", "US-VT", "US-WA",

                    "US-WI", "US-WV", "US-WY", "UY", "UZ", "VC", "VE", "VN", "VU", "YE", "ZA", "ZM", "ZW"

                ],

If you try to use a province named CA-BC or any other name that isn't in the list, the map returns "Requested Map does not exist", you can test this by pointing your map source to:

http://chrisdblumberg.com/maps_uncompressed/

which has all of these map files, but none of them will load. 

Once you add in the Province names as bolded above, it works.

I believe your error is somewhere in these lines, which is the 4th and 5th functions below the Variable declared above:

        function Mp(a) {

            Dp != m || (Dp = {

                continents: je,

                subcontinents: ne,

                countries: Rd,

                provinces: ie,

                metros: fe

            });

            return Dp[a]

        }

        var Ip = Ap;

        function Np(a) {

            var b = a[Kb],

                c = a[Hb];

            a = Mp(a.Q);

            if (b = Ip[b])

                if (b = b[a]) return 0 <= el(b, gl, p, c);

            return p

        }

[Sergey Grabkovsky]

After some investigation, I figured out what your problem is. It's actually two-fold.

1. You're not waiting for your maplist to load, which introduces somewhat of a race condition. This is my fault, since I didn't tell you the proper way to do it and it's not documented. The trick is that GeoChart.setMapsSource takes a newSource as well as a readyCallback and an errorCallback, so you should only render your GeoChart after it loads (on the ready callback).
2. I completely forgot about this one. It turns out that we do a binary search to figure out if the region you specified is valid, which obviously won't work with an unsorted list. Your provinces in your mapList.js file are listed as '"US", "CA", "US-AK", "US-AL", "US-AR", "US-AZ", "US-CA", "US-CO", "US-CT", "US-DE", "US-FL", "US-GA", "US-HI", "US-IA", "US-ID", "US-IL", "US-IN", "US-KS", "US-KY", "US-LA", "US-MA", "US-MD", "US-ME", "US-MI", "US-MN", "US-MO", "US-MS", "US-MT", "US-NC", "US-ND", "US-NE", "US-NH", "US-NJ", "US-NM", "US-NV", "US-NY", "US-OH", "US-OK", "US-OR", "US-PA", "US-RI", "US-SC", "US-SD", "US-TN", "US-TX", "US-UT", "US-VA", "US-VT", "US-WA", "US-WI", "US-WV", "US-WY", "US-ZZ", "CA-AB", "CA-BC", "CA-MB", "CA-NL", "CA-NS", "CA-NT", "CA-NU", "CA-ON", "CA-PE", "CA-QC", "CA-SK", "CA-YT"', and since the C's are after the U's and the U's take up more than half of the list, it'll never find any of the C's. Sorting that list should solve that problem.

- Sergey

[Bluestreak2k5]

Awesome that worked, thanks. I thought about a sorting problem, or possibly allowing only US- provinces, which is why I created a US-ZZ, but the mapList problem still existed.

My solution was I basically modified all of your files of your API and it was completely hosted on my domain, which would probably violate a few terms of services, but I wouldn't provide a link or information on how to do that on a general chat like this.

[Sergey Grabkovsky]

Wow, you modified the compiled code? That's pretty impressive. Hopefully now that you know the 'real' solution, you can move back to the official version and reap all the new features we're going to release =)

- Sergey

On Tue, Jul 30, 2013 at 11:28 AM, Bluestreak2k5 <Bluest...@yahoo.com> wrote:

Awesome that worked, thanks. I thought about a sorting problem, or possibly allowing only US- provinces, which is why I created a US-ZZ, but the mapList problem still existed.

My solution was I basically modified all of your files of your API and it was completely hosted on my domain, which would probably violate a few terms of services, but I wouldn't provide a link or information on how to do that on a general chat like this.

--

[Bluestreak2k5]

Haha, at the rate I've been impressing you guys you'll be offering me a job soon :P.

It actually wasn't that hard, and I only modified the Variable that was storing all the Provinces as listed above. Once I understood what I thought was happening, and your jsapi, visualization, and geochart files it was pretty easy to overwrite the variable.

[Nick Dobie]

Love this project and it works well. I was just going to let you know that the North-East corner of Minnesota is incorrect.

[Bluestreak2k5]

thanks Nick,

Sorry Sergey, how do I set the SetMapsSource readyCallback. I had it working properly at one point, and then started working on other things and didn't document it properly and can't it working.

[Sergey Grabkovsky]

The second parameter to setMapsSource is the ready callback, the third is the error callback. It is generally a good idea to register for both, in case an error occurs.

- Sergey

--

[Bluestreak2k5]

Hmm ok, it seems like an update somewhere by me or google is removing this functionality:

Works without setMapsSource ready callback:

http://jsfiddle.net/f3sXW/1/

doesn't work with callback:

http://jsfiddle.net/f3sXW/3/

I noticed this because none of my Canadian provinces are working:

CA-AB

CA-BC

CA-MB

CA-NB

CA-NL

CA-NS

CA-NT

CA-NU

CA-ON

CA-PE

CA-QC

CA-SK

CA-YT

I know they work because I've tested them before, but I always had to load them with the callback.

[Sergey Grabkovsky]

You are supposed to pass the function by reference to the setMapsSource function, not call it. That is, you SHOULD do .setMapsSource('...', draw); and you SHOULD NOT do .setMapsSource('...', draw()). The latter calls the function and passes its result to setMapsSource, and the former actually passes the draw function through.

- Sergey

--

[Peter Chon]

Hey Blue,

I've been playing with your geo hack and I'm getting stuck on Alaska map file.

It's the only one from your /maps folder that isn't compressed.

I'm building a similar type of map visualization that you've made but using angularjs.

Thanks!

[Peter Chon]

Hi Segey,

I know this is quite old, but can you give me a few more example of how the hex encoding works?

for example: if 1010 = AL0A, then what would 1020 be?

On Tuesday, July 9, 2013 1:36:04 PM UTC-7, Sergey wrote:

Okay, this is going to be extremely tricky. The GeoChart expects everything to be under a base URL, the maps source. By default, the maps source is set to "https://www.gstatic.com/charts/geochart/10/". You can set a new maps source by calling google.visualization.GeoChart.setMapsSource(newSourceUrl), where newSourceUrl is your new URL (for example, newSourceUrl = 'http://chrisdblumberg.com/maps/'). From this point on, you could figure out what resources the GeoChart is requesting yourself, and place them there one by one; but I'm going to help you a bit more.

Your file isn't formatted correctly. It's not even valid javascript. You're missing braces around all your features and you're not closing a lot of the braces and brackets that you do have. Your lat/longs aren't supposed to be formatted as a single string, but as two separate strings, as they are in the example file. However, because I'm an unreasonably nice person, I've decided to help you with all of those problems. So here is the fixed map file, and here is a jsfiddle using it. But I'm sure you'll notice a few funny things happening. The first thing is that all the counties look off on the Y axis. This is because all the coordinates are supposed to be in projected Mercator space, like I mentioned in my last response. You can find the formula for converting your coordinates on the Mercator Projection Wikipedia page. For mercator, you only need to project the latitude, and not the longitude, so it's pretty easy. For simplicity sake, you can just use the formula below:

projectedLatitude = (180 / PI) * log(tan(latitude / 180 * PI / 2 + PI / 4));

The other thing that you may notice is that the regions in my example aren't being highlighted. This is a harder problem to solve. It's happening because the GeoChart tries to geocode the IDs without ever checking if the given IDs match the map IDs. This is a bug. Kind of. Until I figure out a permanent fix, you're going to have to hack around it. The trick here is to fit the format of a province code so that the GeoChart doesn't fall back on geocoding. The GeoChart will fall back on geocoding (in the case of a province) if the ID doesn't match the format of "two letters, followed by a dash, followed by two alphanumeric characters". One way to get around this problem is to encode your provinces as hex, and use AL as the 'country code' (I put it in quotes because it's not really the country code, and using US-AL-XX doesn't work). So, since everything is in the format of US-AL-1DDD (where D's are digits), and all the codes -1000 are under 255, we can encode them as hex. So US-AL-1001 becomes AL-01, US-AL-1005 becomes AL-05, US-AL-1010 becomes AL-0A, and so on. Here is a demo where that works. Note that I'm using a different path there and loading a different map, where all the counties are renamed.

The other polygons in that file are the other states. Good call on leaving them alone, since now you can make sure that your counties match up to them, and you can have some context for what you're looking at.

- Sergey

On Tue, Jul 9, 2013 at 2:48 PM, Bluestreak2k5 <Bluest...@yahoo.com> wrote:

Thanks so much Sergey!

I have converted the KML to a JS file like you linked me to, it is here:

http://chrisdblumberg.com/us_counties/alabama_counties.js

I replaced the polygon id="US-AL" with all the polygons of the individual counties.

Each county is represented by an ID using the FIPS code, such as US-AL-1001 would represent Autauga county in Alabama. This should allow for easy future expansion as this is a Unique identifier to each county.

How would I go about testing this map now, and would this be the correct way of doing it? I wasn't sure about the other polygons that were in that file so I left them all alone and are located at the bottom.

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 google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

If I remember correctly (and it has been a while), it would be AL14. The way that this works is that we drop the initial "10" because it's redundant between all the counties, and just convert the second part to hex. So in your example, we would just want the hex value of 20. However, all of this is kind of moot at this point, since the GeoChart has been changed to not ignore invalid-looking region codes. So using AL-1010 should work now. However, if you're using Blue's maps, that's irrelevant to you because he has coded them to use the hex encoding already and you can't change that. I simply bring it up if you are making your own maps.

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

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

[asgallant]

If I understand the logic right, the code for translating "SS-xxxx" (where "SS" is the state code and "xxxx" is a 4-digit number >= 1000 and < 1256), then the number is encoded like this: subtract 1000 and convert to 2-digit hex, so 1010 -> 10 -> 0A, 1020 -> 20 -> 14, hence "AL-1020" -> "AL-14".

[Bluestreak2k5]

Actually everything in /maps is compressed your probably running into the issue as why I had to separate things out.

Google Visualization has a timeout built into it that if the map hasn't loaded in about 5-7 seconds it throws an error that it can't load the map because it doesn't exist.

Also I got rid of the values being based off 1000 and instead its simple 1 through X in HEX. Texas has 254 counties which is 2 less then the maximum needed for a 2 digit HEX number.

Future version at some point when I get a laptop, and get out of the apartment and work on it.

[Kumar Prateek]

Can any one please share any sample with which I can work with..

I needed a similar functionality i.e. once clicked on a specific state it should show relevant counties of that state...

On Friday, June 28, 2013 9:11:22 PM UTC+5:30, Bluestreak2k5 wrote:

Ok so I know google Charts doesn't support viewing county data, but I would like to know if it would be possible to create my own custom Map that would.

Another Google Team has created an experimental App called Fusion Tables. Not sure why these 2 aren't integrated, but irrelevant...

They have a Map with all the US counties already mapped out in KML located here:

https://www.google.com/fusiontables/DataSource?docid=0IMZAFCwR-t7jZnVzaW9udGFibGVzOjIxMDIxNw#rows:id=1

Could I create a custom map to use this KML data to draw items in Google Charts, which from my understanding uses SVG images.

Things I would like to start off with:

Each state would have an option to load its counties (Loading all counties as a map would be a long term goal, but seems to be more difficult at the moment.)

I could then use the GEO_ID or GEO_ID2 as the unique Identifiers for each county, allowing you to map data to each county the way you currently use State ISO codes to map to each state.

It could alos look something like US-AL-1001 being the country-(State/Region)-(county FIP CODE) to allow for expandability into future countries.

Chris

[Hardeep Singh]

Hello Sergey,

This was a very impressive project and I have a similar requirement but with 3 digit Zip codes instead of counties. I found this site that has zip code polygon data but before I start digging into it, I wanted to check if it can be done with the GeoMap or GeoChart. Could you please provide some help if possible? Here is the example URL:

http://www.usnaviguide.com/zip.htm

Thanks,

-H

On Thursday, March 20, 2014 3:20:21 PM UTC-4, Sergey wrote:

If I remember correctly (and it has been a while), it would be AL14. The way that this works is that we drop the initial "10" because it's redundant between all the counties, and just convert the second part to hex. So in your example, we would just want the hex value of 20. However, all of this is kind of moot at this point, since the GeoChart has been changed to not ignore invalid-looking region codes. So using AL-1010 should work now. However, if you're using Blue's maps, that's irrelevant to you because he has coded them to use the hex encoding already and you can't change that. I simply bring it up if you are making your own maps.

- Sergey

On Thu, Mar 20, 2014 at 3:14 PM, Peter Chon <peter...@gmail.com> wrote:

Hi Segey,

I know this is quite old, but can you give me a few more example of how the hex encoding works?

for example: if 1010 = AL0A, then what would 1020 be?

On Tuesday, July 9, 2013 1:36:04 PM UTC-7, Sergey wrote:

Okay, this is going to be extremely tricky. The GeoChart expects everything to be under a base URL, the maps source. By default, the maps source is set to "https://www.gstatic.com/charts/geochart/10/". You can set a new maps source by calling google.visualization.GeoChart.setMapsSource(newSourceUrl), where newSourceUrl is your new URL (for example, newSourceUrl = 'http://chrisdblumberg.com/maps/'). From this point on, you could figure out what resources the GeoChart is requesting yourself, and place them there one by one; but I'm going to help you a bit more.

Your file isn't formatted correctly. It's not even valid javascript. You're missing braces around all your features and you're not closing a lot of the braces and brackets that you do have. Your lat/longs aren't supposed to be formatted as a single string, but as two separate strings, as they are in the example file. However, because I'm an unreasonably nice person, I've decided to help you with all of those problems. So here is the fixed map file, and here is a jsfiddle using it. But I'm sure you'll notice a few funny things happening. The first thing is that all the counties look off on the Y axis. This is because all the coordinates are supposed to be in projected Mercator space, like I mentioned in my last response. You can find the formula for converting your coordinates on the Mercator Projection Wikipedia page. For mercator, you only need to project the latitude, and not the longitude, so it's pretty easy. For simplicity sake, you can just use the formula below:

projectedLatitude = (180 / PI) * log(tan(latitude / 180 * PI / 2 + PI / 4));

The other thing that you may notice is that the regions in my example aren't being highlighted. This is a harder problem to solve. It's happening because the GeoChart tries to geocode the IDs without ever checking if the given IDs match the map IDs. This is a bug. Kind of. Until I figure out a permanent fix, you're going to have to hack around it. The trick here is to fit the format of a province code so that the GeoChart doesn't fall back on geocoding. The GeoChart will fall back on geocoding (in the case of a province) if the ID doesn't match the format of "two letters, followed by a dash, followed by two alphanumeric characters". One way to get around this problem is to encode your provinces as hex, and use AL as the 'country code' (I put it in quotes because it's not really the country code, and using US-AL-XX doesn't work). So, since everything is in the format of US-AL-1DDD (where D's are digits), and all the codes -1000 are under 255, we can encode them as hex. So US-AL-1001 becomes AL-01, US-AL-1005 becomes AL-05, US-AL-1010 becomes AL-0A, and so on. Here is a demo where that works. Note that I'm using a different path there and loading a different map, where all the counties are renamed.

The other polygons in that file are the other states. Good call on leaving them alone, since now you can make sure that your counties match up to them, and you can have some context for what you're looking at.

- Sergey

On Tue, Jul 9, 2013 at 2:48 PM, Bluestreak2k5 <Bluest...@yahoo.com> wrote:

Thanks so much Sergey!

I have converted the KML to a JS file like you linked me to, it is here:

http://chrisdblumberg.com/us_counties/alabama_counties.js

I replaced the polygon id="US-AL" with all the polygons of the individual counties.

Each county is represented by an ID using the FIPS code, such as US-AL-1001 would represent Autauga county in Alabama. This should allow for easy future expansion as this is a Unique identifier to each county.

How would I go about testing this map now, and would this be the correct way of doing it? I wasn't sure about the other polygons that were in that file so I left them all alone and are located at the bottom.

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 google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

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

[Sergey Grabkovsky]

You can use a similar method to what Bluestreak is doing. You will have to rewrite the maps so that the GeoChart can understand them and you will have to set the maps source. I can assist you if you run into any issues, but this thread should contain enough information to get you started.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[Bluestreak2k5]

I would just like to point out that zip code boundaries change on a ( quarterly I think) basis in the US. On top of this zip codes cross both county and state lines, so you could never emulate something like what I did with breaking down counties into states. I also thought about going deeper into zipcodes, but this stopped me.

The only way something like this would work in the current GeoChart would be to load all of one states zip code boundaries, with the zip code objects being the final items in the list.

Each item in the list in the JS file overwrites previous items, so you could have views with other states as 1 object as GeoCharts already do, but the zip code boundaries that do overlap the state lines would lay on top of the state boundary lines from the state objects. This however, only solves one of the problems, and you still need to get updated zip code boundary files whenever they are updated. 

You won't be able to load all 10000+ zip code boundaries in the GeoChart as it is currently. The Visualization team will need to modify the code to increase the timeout for loading a mapfile to be more then the 8 seconds it is now, otherwise it will simply throw an error every time and say the map doesn't exist.

[Bluestreak2k5]

Sorry I noticed you said 3 digit boundaries, however this still gives a maximum possible of 1000 boundaries loaded at once for the US, which is still going to get a file up into the 10MB range probably. My Texas file with 255 counties is in the 2MB range, and if someone with a slow connection cannot load that file within the timeout time it will simply throw an error.

It's possible, but your going to need to reduce accuracy of polygons or break down into states as I listed above.

[Hardeep Singh]

Thanks for the quick response guys. As per the project requirements, 3 digit zip code polygons will be shown for one US state at one time so the file size will be small. 

Sergey, I used your US-AL sample to create the zip code polygon file for the Michigan state but the zip code polygon data I got from that website didn't render the map. May be I'm missing something. When I run the script, all I see is the green range bar at the bottom but no MI map. 

I have attached the US-MI_PROVINCES.js and  US_PROVINCES.js from Bluestreak2k5's maps library. Please review.

JS Code:

 google.load('visualization', '1', {

            packages: ['geochart'],

            callback: drawVisualization

        });

        var chart;

        function drawVisualization() {

            var data = google.visualization.arrayToDataTable([

              ['Zip', 'Revenue'],

              ['MI-480', 350],

              ['MI-481', 450],

              ['MI-482', 250],

              ['MI-487', 390]

            ]);

            google.visualization.GeoChart.setMapsSource('/HTML5/js/maps')

            var geochart = new google.visualization.GeoChart(

                document.getElementById('visualization'));

            geochart.draw(data, { width: 556, height: 347, region: 'US-MI', resolution: 'provinces', displayMode: 'regions' });

            google.visualization.events.addListener(geochart, 'regionClick', function (r) {

                console.log(r.region);

            });

[Bluestreak2k5]

I think your polygons are our of range. You can test this by setting the range to like hi: 0,100 low 0, 100.

Also the reason they are out of range seems like you haven't converted the coordinates, GeoCharts use a special coordinate system that you need to convert regular latitude and long coordinates to be able to view. The math conversion should be at the top of this thread in the first few posts.

[Hardeep Singh]

Thanks for the tip. I'll apply that formula to the lat/long and test it again.

[Hardeep Singh]

Applied the formula in MS Excel but still no change. See attached file.

On Tuesday, May 27, 2014 8:01:56 PM UTC-4, Bluestreak2k5 wrote:

[Hardeep Singh]

Hello Bluestreak2k5,

I'm building US PROVINCE js files for each US State. Where did you get the hi/lo for each state from? 

Thanks.

On Tuesday, May 27, 2014 8:01:56 PM UTC-4, Bluestreak2k5 wrote:

[Hardeep Singh]

Finally got it working. Applying that projectedlatitude formula in MS Excel wasn't a good idea. I wrote C# console app to create JS files and used the formula in there. 

I can see the zip code polygons but it doesn't draw the State boundaries. How do I get the State boundary along with zip code polygons? Do I need to add a "feature" with State map coordinates as well? I'm using your US-PROVINCES.js file though.

On Tuesday, May 27, 2014 8:01:56 PM UTC-4, Bluestreak2k5 wrote:

[Hardeep Singh]

Hello Sergey,

Need your help. I got the map working with zip code data but polygons are not correct. If you look at the attached XMl file for zip code 490, there are 5 series of <polyline /> tags from <polyline1 /> to <polyline5 />. If I put lat/lng from all the tags into one shell under "features" object then it doesn't draw the correct polygon on the map. I applied the projectedLatitude formula on "lat" value as well. How do I convert this XML files into the correct js file for GeoChart? 

Appreciate your help.

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

[Bluestreak2k5]

I tested your file and it loads fine, but your high/lows are way off.

Your high/low has to change based on what your trying to view:

        "hi": ["22.0", "-75.0"],

        "lo": ["18.0", "-65.0"]

Obviously this is skewed so you need to adjust, but I see 4 objects that I can highlight.

[Hardeep Singh]

Thanks but what exactly the high/low represent and how do I find the high/lows for each state? 

Thanks,

Hardeep.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Bluestreak2k5]

The Hi low represents the visible area on the screen you are representing. Think of it as the 4 corners of the square on the screen.

As for how to find the high low that you are looking for there is no way except through modifying it slowly to meet your needs.

If your purely looking for states, I would start with the High Low in each US-XX Province file, and work from there.

[Hardeep Singh]

Thanks for the quick response.

Did you see my last post regarding converting polylines intto individual feature objects in js file? Do I create a separate feature item for each zip code polyline set <polyline1 /> <polyline2 /> and assign id like MI-490a, MI-490b etc.?

Thanks,

Hardeep.

--

[Bluestreak2k5]

I think what you did in the file I tested is fine, where each is it's own object. However, I can't really say as I don't know what the actual final objects are supposed to look like, so that's only something you will be able to answer yourself once you tweak the hi/low values to the scale you want.

[Hardeep Singh]

Final output should look like the results on this site. Please visit the link and enter zip 490 to see the polygon:

http://maps.huge.info/zip3.htm

I'm getting totally different results.

[Bluestreak2k5]

Ok, well if your trying to compare the file you sent me to that then its just a matter of changing the hi/low values to adjust to that one zip code.

If your trying to show State zip code regions like this: http://www.zipmap.net/Michigan.htm

Then you are missing a few objects, as there were only 4 in the file.

If your trying to make a state view I'd suggest keeping the hi/low from the Google charts state files and the other objects in those files except for US-MI. insert your new objects and it shouldn't take much more then that.

[Hardeep Singh]

Got it working finally. I was ready only one polygon from the XML file and there were total 9 of them for zip code 409. Thanks for helping me with this. Really appreciate all the help.

[Hardeep Singh]

Can I ask for a favor? Do you have a list of boundingbox hi/lo for each state I can put it in an array to generate zip code js files? If yes, please send it to me. Thanks!

Thanks,

Hardeep.

--

[Bluestreak2k5]

Nope I don't, you have to grab the hi/low values from each Google chart state:

http://www.gstatic.com/charts/geochart/10/mapfiles/US-AL_PROVINCES.js

Just change AL to XX state Identifier.

Also just FYI, if this is ever something you want Google Charts to incorporate or make open source for everyone, you can't use Id's such as US-501. I would suggest using something like:

US-ZIP-501 as the unique ID for the objects.

US-XXX are already mapped to Metro areas in the US, under the Metros section.

[Hardeep Singh]

 There are few states missing in your list like AP, DC, GU. How did you find the hi/lo for each state? Please send the steps.

Thanks,

Hardeep.

--

[Bluestreak2k5]

http://www.gstatic.com/charts/geochart/10/info/mapList.js

That's all of Google charts mapped files. DC is in there, Guam is GU, not a province but a country

http://www.gstatic.com/charts/geochart/10/mapfiles/GU_COUNTRIES.js

basically whatever subset the file is in is the ending. GU is in countries subset, so GU_COUNTRIES is the file.

[Hardeep Singh]

Is it possible to add region labels to show zipcode on each highlighted area? If I use this map on mobile device, there is no way to hover over to see the region labels/tooltip. 

Thanks,

Hardeep.

--

[Sergey Grabkovsky]

There is currently no way to show persistent labels over your regions. However, the user could select a region to get a tooltip to get more information.

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-visualizati...@googlegroups.com.

[Alicia]

Hey Sergey and forum,

I am having a problem with my code that is probably pretty simple, I just can't seem to figure it out, can you help?

I am trying to create a simple geochart for Canada but cant seem to get NU up there, even though it is on my list. Here is my code:

<html>

  <head>

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script type='text/javascript'>

     google.load('visualization', '1', {'packages': ['geochart']});

     google.setOnLoadCallback(drawMarkersMap);



      function drawMarkersMap() {

      var data = google.visualization.arrayToDataTable([

        ['Prov',   'Youth %', 'Overall %'],

        ['CA-PE',      51.6,    70.4],

        ['CA-NL',    29.6,     53.3],

        ['CA-NB',    41.6,     65.6],

        ['CA-NS',   37.6,     61.3],

        ['CA-QC',     45.0,     63.5],

        ['CA-ON',   38.2,     57.6],

        ['CA-MB',  31.9,     55.7],

        ['CA-SK', 30.1,      59.6],

        ['CA-AB',     33.7,      52.3], 

        ['CA-BC',   39.9,     55.9],

        ['CA-YT',  40.2,     62.5],

        ['CA-NT', 25.2,      47.4], 

        ['CA-NU', 14.6,      39.4], 

      



      ]);



      var options = {

        region: 'CA',

        displayMode: 'markers',

        colorAxis: {colors: ['red', 'green', 'blue']}

      };



      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

      chart.draw(data, options);

    };

    </script>

  </head>

  <body>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

On Friday, June 28, 2013 11:41:22 AM UTC-4, Bluestreak2k5 wrote:

Ok so I know google Charts doesn't support viewing county data, but I would like to know if it would be possible to create my own custom Map that would.

Another Google Team has created an experimental App called Fusion Tables. Not sure why these 2 aren't integrated, but irrelevant...

They have a Map with all the US counties already mapped out in KML located here:

https://www.google.com/fusiontables/DataSource?docid=0IMZAFCwR-t7jZnVzaW9udGFibGVzOjIxMDIxNw#rows:id=1

Could I create a custom map to use this KML data to draw items in Google Charts, which from my understanding uses SVG images.

Things I would like to start off with:

Each state would have an option to load its counties (Loading all counties as a map would be a long term goal, but seems to be more difficult at the moment.)

I could then use the GEO_ID or GEO_ID2 as the unique Identifiers for each county, allowing you to map data to each county the way you currently use State ISO codes to map to each state.

It could alos look something like US-AL-1001 being the country-(State/Region)-(county FIP CODE) to allow for expandability into future countries.

Chris

[Sergey Grabkovsky]

Hi Alicia, the issue you're seeing is that the marker is placed outside of your bounds. We use Google Maps to get the latitude/longitude position of the marker, and Google Maps wants to place the marker in the middle of the region. You will see the region if you change your region to "world". The actual fix that I would suggest to you is that you use displayMode: 'regions' instead of markers.

--

[Andrew Gallant]

Alternatively, you can keep markers mode on, and use a different location for geocoding, like Iqaluit: http://jsfiddle.net/asgallant/5bw0vd13/1/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[Yingyan Hua]

I meet with similar problem here.

For this demo: http://jsfiddle.net/f3sXW/1/ .

Can I use "region:'US-825', resolution: 'metros'" as parameters?

From mapsList http://chrisdblumberg.com/maps/info/mapList.js , I can see US-825 in metros. But I cannot use it and it shows error message like: "Requested map doesn't exist". 

Are there alternative links for metros resolution?

Thanks!

...

[Bluestreak2k5]

Metros is commented out in my code. What your looking for is rather simple and already built in:

      var geochart = new google.visualization.GeoChart(

          document.getElementById('visualization'));

      geochart.draw(data, {width: 556, height: 347, region:'US', resolution: 'metros'});

[Daniel LaLiberte]

I believe the loading of map data from any other location but the built-in Google Maps server will no longer work due to security constraints.   The GeoChart.setMapsSource() method is essentially disabled, at least for now.  

The security issue is that loading data from unknown servers is generally a security risk, so we can't do it without risk to any users that may come across a web page that does this.  I m not sure there is any way we can work around that constraint in a secure manner, but it might have to be done via a statically known secure server. 

I wonder if Google Maps has a way of loading map data from other servers.

On Thu, Apr 6, 2017 at 5:46 PM, BuzzSpace <in...@buzzspaceltd.com> wrote:

Hi,  I am trying to follow this instructions to create a map for states in Nigeria.  However, the demo here "Here is a demo where that work" no longer works.  Do you know why it no longer works?

On Tuesday, July 9, 2013 at 9:36:04 PM UTC+1, Sergey wrote:

Okay, this is going to be extremely tricky. The GeoChart expects everything to be under a base URL, the maps source. By default, the maps source is set to "https://www.gstatic.com/charts/geochart/10/". You can set a new maps source by calling google.visualization.GeoChart.setMapsSource(newSourceUrl), where newSourceUrl is your new URL (for example, newSourceUrl = 'http://chrisdblumberg.com/maps/'). From this point on, you could figure out what resources the GeoChart is requesting yourself, and place them there one by one; but I'm going to help you a bit more.

Your file isn't formatted correctly. It's not even valid javascript. You're missing braces around all your features and you're not closing a lot of the braces and brackets that you do have. Your lat/longs aren't supposed to be formatted as a single string, but as two separate strings, as they are in the example file. However, because I'm an unreasonably nice person, I've decided to help you with all of those problems. So here is the fixed map file, and here is a jsfiddle using it. But I'm sure you'll notice a few funny things happening. The first thing is that all the counties look off on the Y axis. This is because all the coordinates are supposed to be in projected Mercator space, like I mentioned in my last response. You can find the formula for converting your coordinates on the Mercator Projection Wikipedia page. For mercator, you only need to project the latitude, and not the longitude, so it's pretty easy. For simplicity sake, you can just use the formula below:

projectedLatitude = (180 / PI) * log(tan(latitude / 180 * PI / 2 + PI / 4));

The other thing that you may notice is that the regions in my example aren't being highlighted. This is a harder problem to solve. It's happening because the GeoChart tries to geocode the IDs without ever checking if the given IDs match the map IDs. This is a bug. Kind of. Until I figure out a permanent fix, you're going to have to hack around it. The trick here is to fit the format of a province code so that the GeoChart doesn't fall back on geocoding. The GeoChart will fall back on geocoding (in the case of a province) if the ID doesn't match the format of "two letters, followed by a dash, followed by two alphanumeric characters". One way to get around this problem is to encode your provinces as hex, and use AL as the 'country code' (I put it in quotes because it's not really the country code, and using US-AL-XX doesn't work). So, since everything is in the format of US-AL-1DDD (where D's are digits), and all the codes -1000 are under 255, we can encode them as hex. So US-AL-1001 becomes AL-01, US-AL-1005 becomes AL-05, US-AL-1010 becomes AL-0A, and so on. Here is a demo where that works. Note that I'm using a different path there and loading a different map, where all the counties are renamed.

The other polygons in that file are the other states. Good call on leaving them alone, since now you can make sure that your counties match up to them, and you can have some context for what you're looking at.

- Sergey

On Tue, Jul 9, 2013 at 2:48 PM, Bluestreak2k5 <Bluest...@yahoo.com> wrote:

Thanks so much Sergey!

I have converted the KML to a JS file like you linked me to, it is here:

http://chrisdblumberg.com/us_counties/alabama_counties.js

I replaced the polygon id="US-AL" with all the polygons of the individual counties.

Each county is represented by an ID using the FIPS code, such as US-AL-1001 would represent Autauga county in Alabama. This should allow for easy future expansion as this is a Unique identifier to each county.

How would I go about testing this map now, and would this be the correct way of doing it? I wasn't sure about the other polygons that were in that file so I left them all alone and are located at the bottom.

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 google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

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 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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.

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

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Chris Blumberg]

That URL for maps isn't valid, that's why it isn't working. You need a valid URL with valid mapfiles.

My website still works and I can test my maps URL in JSfiddle as well.

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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, 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/CAOtcSJOFbNz4u%3DWvgm%2BNmH2Dex%3Dydzv-ohqOr6aqDW5gL_%2BW_Q%40mail.gmail.com.

[Hardeep Singh]

How about d3 maps?

https://github.com/semerj/d3-zip-code-choropleth

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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/CADvusYQtHkWKrn9dMghDbDPF8ynjLrO5TPOCj-m%2BYk%3DZ5MjqDA%40mail.gmail.com.

[BuzzSpace]

Thanks for the response Bluestreak2k5.  I have seen a fiddle that works.  Do you mind sharing a few tips with me on how to get this working based on your experience? I currently have a couple of questions. 
 I am currently thinking of getting the polygons for the locations from openstreetmaps.  Still havent figured that out completely but that's my current direction. Then I need to figure out a way to convert them to projected Mercator space.  No ideas around that yet.

What do you think?  Is there a better way of going about this?  How did you get KML files that you used?  Can i get KML files from openstreetmaps? Can you share your KML Parser?

Thanks once again.

- Sergey

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-visua...@googlegroups.com.
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

[Chris Blumberg]

Hi Buzzspace,

I could probably do this for you in a somewhat short amount of time (days). Nigeria isn't that big, nothing compared to USA's 3096 counties I had to work with. Depending on how quickly you need this done.

While you could use KML, I would recommend the OSM. I used detailed satellite images which were stored as KML files. Every LAT/LONG down to 10 numbers past the decimal point, and thousands of datapoints per county.

What you may not know is Google charts has a map loading timeout function (not documented) that will just stop attempting to load (6 seconds I believe) and throws the same error "Maps not found" as if the maps URL was invalid. So I basically wrote a converter that I modified per state, to take between 1/40 and 1/500 of the datapoints and convert them into Google format. This is what lead to some counties looking a little weird.

OSM data points seem to be a pretty reasonable amount, and you shouldn't need to remove any datapoints to get this working. I believe the LAT/LON is already in Mercator format, but it's in reversed order of what's needed. The file needs to be valid javascript, so I had to test the file every single time I generated it with an online tool to validate javascript.

Once you get the mapfile in a working state for testing, then you need to modify the mapfiles file and add in the newly defined Province ID's.

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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 google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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/CAOtcSJOFbNz4u%3DWvgm%2BNmH2Dex%3Dydzv-ohqOr6aqDW5gL_%2BW_Q%40mail.gmail.com.

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

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, 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/facc5b9a-1914-4cd0-ac22-dd017d6da45f%40googlegroups.com.

[BuzzSpace]

Hello Bluestreak,

Me again.  I recently got back to this as I took some time off to work on another project.  I am not able to the sample in this http://jsfiddle.net/f3sXW/1/ to work.  For some reason, it does not load the provinces even though it shows the map.  Could it be as a result of the setMapsSource function being disabled? 

- Sergey

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-visua...@googlegroups.com.
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@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/CAOtcSJOFbNz4u%3DWvgm%2BNmH2Dex%3Dydzv-ohqOr6aqDW5gL_%2BW_Q%40mail.gmail.com.

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

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

[Chris Blumberg]

Hey Buzzspace,

It's most likely that your offsets need to be adjusted. Try setting these values to the same bounding box as Nigeria. If that doesn't work, expand it the world bounding box.

        "boundingBox": {
            "hi": ["77.0065", "-102.1900"],
            "lo": ["53.4563", "-131.1100"]
        },

 https://www.gstatic.com/charts/geochart/10/mapfiles/world_COUNTRIES.js

"boundingBox": {"hi": ["165.1534", "186.8392"], "lo": ["-68.0595", "-186.8392"]}

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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 google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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/de02f3f1-63e5-4ecf-bce0-2dc2551dff42%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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/CAOtcSJOFbNz4u%3DWvgm%2BNmH2Dex%3Dydzv-ohqOr6aqDW5gL_%2BW_Q%40mail.gmail.com.

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

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@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/facc5b9a-1914-4cd0-ac22-dd017d6da45f%40googlegroups.com.

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

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, 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/998f5867-b7e6-49b6-a371-37224213b3d1%40googlegroups.com.

[Paul Canning]

Is there an easy/easier way to convert my KML to the JSON format needed for this to work?

On Friday, 28 June 2013 16:41:22 UTC+1, Bluestreak2k5 wrote:

Ok so I know google Charts doesn't support viewing county data, but I would like to know if it would be possible to create my own custom Map that would.

Another Google Team has created an experimental App called Fusion Tables. Not sure why these 2 aren't integrated, but irrelevant...

They have a Map with all the US counties already mapped out in KML located here:

https://www.google.com/fusiontables/DataSource?docid=0IMZAFCwR-t7jZnVzaW9udGFibGVzOjIxMDIxNw#rows:id=1

Could I create a custom map to use this KML data to draw items in Google Charts, which from my understanding uses SVG images.

Things I would like to start off with:

Each state would have an option to load its counties (Loading all counties as a map would be a long term goal, but seems to be more difficult at the moment.)

I could then use the GEO_ID or GEO_ID2 as the unique Identifiers for each county, allowing you to map data to each county the way you currently use State ISO codes to map to each state.

It could alos look something like US-AL-1001 being the country-(State/Region)-(county FIP CODE) to allow for expandability into future countries.

Chris

[Andrew Arnold]

Bluestreak2k5,

Do you have a county map file for Alaska? The US-AK_PROVINCES.js file on your server appears to be for Alberta, Canada. Thanks a lot. I am relying on your county definitions for a project I am working on. Very impressive work.

[bluestreak2k5]

Hey Andrew, 

Let me take a look and see if I have Alaska somewhere. I initially used it as a test for Canada provinces as you see, but I guess I never replaced it.  Sorry

Chris

Sent via the Samsung Galaxy S10, an AT&T 5G Evolution capable smartphone

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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/d5e062d1-f5fd-436f-88a8-cf720be22b67%40googlegroups.com.

[Andrew Arnold]

Chris,

Thanks a lot.  Using your county map files, I have been able to get Geochart to load all counties in the country simultaneously (except for Alaska).

[Andrew Arnold]

I built new county maps for all states and Puerto Rico using KML files maintained by the U.S. Census Bureau in case someone should need them.  The resulting JS map files are approximately 1/6 as large and at least as detailed.

[Chris Blumberg]

Andrew that's awesome work. Good job.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/KVGu--jjUpk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/160ea933-1335-4441-a334-9566c80fbeff%40googlegroups.com.

[Noel]

Hello Andrew,

Thanks for sharing your work.  I sent you a pm asking for more details.  I'd like to see the code behind your map if possible.

Regards,

Noel

[Andrew Arnold]

JS county map files for every state (inc. Puerto Rico) and the United States can be downloaded here:  https://drive.google.com/open?id=1j7yGIG7xmGuQ0yOptkeJK8txBA9aYvMM

These were generated from KML files maintained by the U.S. Census Bureau.

[Donal Harrigan]

I'd like to be able to set the map source through Google Apps Script. From reading this thread it appears that the methodology is through the client-side API. Is there a way to accomplish this by sourcing and html file within Google apps script with a doGet? I set up a simple example:

index.html

<html>

  <head>

    <script>Enter code here...

      google.script.run.doSomething();

    </script>

  </head>

  <body>

  </body>

</html>

test.gs

function doGet(){

  return HtmlService.createHtmlOutputFromFile('Index');

}

function doSomething(){

  Logger.log("What");

}

I published the project to the web and if I visit the link, then doSomething executes but if I call the url with urlfetchapp only the doGet executes but not doSomething

UrlFetchApp.fetch(theURL,{method:"Get", headers: {Authorization: "Bearer "+ScriptApp.getOAuthToken()}, muteHttpExceptions: true});

If I can get that framework working, is it possible then to just include the following line in the html file

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

and then be able to do anything 'google.visualization' within the .gs script?

[Donal Harrigan]

As an update, I did the following but still cannot get the custom map to plot.

created an Index.html in my apps script project:

<html>

  <head>

    <script src="https://www.gstatic.com/charts/loader.js"></script>

    <script>

      google.charts.load('current', {packages: ['geochart']});

      google.charts.setOnLoadCallback(queryGID);

  

      function queryGID() {

        var queryString = encodeURIComponent('SELECT EF,EG');

        var query = new google.visualization.Query(<MY SHEET URL> + queryString);

        query.send(handleQueryResponse);

      }

      function handleQueryResponse(response){

        if (response.isError()) {

          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

          return;

        }

        google.visualization.GeoChart.setMapsSource(<URL TO DRIVE STORED DOWNLOAD OF ANDREW'S MAP FILES>);

        

        var options = {displayMode:'regions',region:'US-FL',resolution:'provinces'};

        var data = response.getDataTable();

        var chart = new google.visualization.GeoChart(document.getElementById("regions_div"));      

        chart.draw(data,options);

        google.visualization.events.addListener(chart, 'regionClick', function(r) {

          console.log(r.region);

        });

      }

    </script>

  </head>

  <body>

    <div id="regions_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

created a doGet in my project:

function doGet(){

  return HtmlService.createHtmlOutputFromFile('Index');

}

Published the project as a webapp.

Results: If I publish without the setMapsSource line then I get a FL zoom map without counties, if I publish with the setMapsSource line then no map shows up at all. I also tried this for the maps db referenced earlier in the email (http://chrisdblumberg.com/maps) with the same results.

Any guidance would be greatly appreciated!

[Daniel LaLiberte]

For the setMapsSource call, it is now essential that the data portion of the returned data is strict JSON, which doesn't allow embedded comments.  I believe the data from http://chrisdblumberg.com/maps does still include comments, so hopefully, Chris Blumberg can update the county data.  Thanks.

--

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-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d44172a8-6e07-4f0a-8c4f-f8c2210052c1o%40googlegroups.com.

--

Daniel LaLiberte

dlaliberte@Google.com   Cambridge MA

[Donal Harrigan]

Are you referring to the mapList.js file in the info subdirectory? I believe that's the only place I see comments. 

Donal Harrigan

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMzBEu0ut9DNwXeUpXwvMtdm9XBHXbgSWSbEGaQvR9CQg%40mail.gmail.com.

[Daniel LaLiberte]

mapList.js would be the first place.  But any subsequently loaded data file as well.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CADsXKFVY9UhSm7Z3CP3qsLWM04WA96Dwb_r-5%3D8CsrdmPycZig%40mail.gmail.com.

[Donal Harrigan]

I downloaded all the files and took the comments out of the mapList.js and couldn't find any in the .js files in the mapfiles subfolder. I put it up on Drive and set that as the map source and it's still blank. Any other thoughts?

 

Donal Harrigan

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMW_aVOw7HLf_%2ByY%2BEOMtCxR9jZg0R3armEm93MySO8iQ%40mail.gmail.com.

[Daniel LaLiberte]

What do you see in your browser debugger?  If there is still a JSON problem, it will likely show up there.

If you are serving these files from your server, you have to configure it so that the server allows cross-origin requests for the data.  This was already true for the chrisblumberg.com site, I believe.   If not allowed, you will see an error about CORS when fetching the data, maybe only in the network tab of the debugger.

If you can post a link to a page demonstrating how you are using GeoChart with this setMapsSource, that would allow me to debug it.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CADsXKFUXmKi5Bbri%2BRQAgyyj1K5%2BdU-quVeuv3MF_%3Dg49Gunvg%40mail.gmail.com.

[Andrew Arnold]

In addition to the comments in the mapList.js file, many (but not all) of the keys in the mapfiles are not surrounded by quotes.  Fixing both of these problems allowed me to load the county maps with version 48 (and 49) for the first time.  You can just do a find & replace of each key in all the mapfiles.  For example, replace polygons: with "polygons":.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJObpLyw2%2BT%3D26dD%3DkQVKH4_Kx9fC-zVjU4YQR332pfgKA%40mail.gmail.com.

[Varsha Gopalakrishnan]

Hi Daniel,

I'm facing the same issue as Donal. I tried pointing the setMapsSource function to both my github page-hosted data (see screenshot 1) as well as chrisdblumberg.com/maps (see screenshot 2), but I'm getting CORS error in both cases. By default, github does support CORS so I'm not sure what else could be the reason for the error below. Any thoughts? Just FYI, my website (maps) was working fine until earlier this year but I'm not sure what changed!

I've posted two screenshot below with the CORS error message.

1) Link: http://varshg.com/county/UrbanGrasslandPM2.5.html

2) http://varshg.com/county/RuralGrasslandNO2.html

Thanks!

[Daniel LaLiberte]

Hi Varsha,

Indeed, I am seeing this error in my chrome devtools debugger when I visit:  http://varshg.com/county/UrbanGrasslandPM2.5.html

"Access to XMLHttpRequest at 'https://varsha2509.github.io/maps/info/mapList.js' from origin 'http://varshg.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

However, when I do: curl -vL varsha2509.github.io/maps/info 2>&1 | fgrep -i access-control-allow-origin

I get:

< Access-Control-Allow-Origin: *

< Access-Control-Allow-Origin: *

So it would seem to be allowed, if that is what the curl output means.  I'm afraid I don't know how to help you further.  Perhaps someone from github can help out.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/889d55e4-98df-45b8-857a-d55937182199n%40googlegroups.com.