You might be wondering “what they heck does this have to do with Champaign schools?” Good question. 🙂 I tend to be a picture-oriented person, so let me draw your attention back to the Kindergarten overlap map:
http://lottery.cb-pta.com/other/cu-k-maps.html
There are several steps involved here. If you take a peek at the javascript (including the drawDistrictLine.js file), you will see that I am hardcoding all the geocodes for the school addresses and the school district boundary line. I am doing that for speed – otherwise, I have to resolve all those points when you load the page. I like speed.
The School District Boundary line
To get the school district boundary line, I started asking a bunch of questions (seems to be my modus operandi). I was not able to find anyone within Unit 4 that had the exact data points for the district boundary, so I started looking around http://www.census.gov/. There is a ton of crazy stuff out there and it completely blew me away. But for the most part, it is largely unintelligible, even for me. *grin* I poked around with some local resources: Tom Laue with the Champaign GIS Consortium, Karen Hogenboom of the UI’s Library Gov Information department, and Marilyn Ruiz of Pathobiology (not sure how Vet Med got such a huge interest in Spatial relationships, but hey). Ms. Hogenboom took the time to show me the ArcGIS system that the University has a license for. Wow, is that beast complicated. I tried to play with it for a little while, but ultimately gave up in light of easier solutions. What easier solutions, you say? Ms. Hogenboom also pointed me to the TIGER/Line shapefiles. Mumbo jumbo, I know. So I needed a way to convert these shapefiles to something I could read. Thanks (again) to Google, I came across two utilities, Shape2Text and shp2text. Don’t bother with the former (I did not even include a link for it). I like the second better for a couple different reasons; 1) it works, 2) the source code is included so I can see what it is actually doing. This utility will read the complex shapefile that you download from TIGER and spit out a human-readable text file. The format is a bit strange, but workable. I grabbed the shapefile for Illinois Unified School Districts, converted it with shp2text and stripped out the information that was pertinent to Unit 4. Oddly enough, the school districts is technically defined as two separate sections, which you can see on the map. What did I strip out? I grabbed all the geocode points that define the boundary. These are lat/long (latitude and longitude) pairs, for example 40.10620700 -88.35058900 (40 degrees north, 88 degrees east, or negative 88 degrees west). More about these geocodes in a second.
School circles
For the schools, I had several things to overcome. At first, I grabbed all the addresses and called a Google Map API function to resolve them to geocodes. However, I found that the page was taking a few microseconds to load them, not to mention that the API call is execute asncronously, thus if I want to attach them to the map with special identifying information, I have to somehow build a DOM array to keep track of the asynchronous calls. Big pain in the arse. So to massively simply things, I opted to make the geocodes static. The next part is actually drawing the circle. Fortunately, I found an example to follow. I love examples! So I altered the code from the example and drew 1.5 mile circles around the center, marked by the geocode for each school, with its appropriate marker. Next, I wanted a dynamic way to shade the circles. I came across a fading menu button example, which I adopted for my circles. I am not entirely happy with it, yet – you will see that there is a precedence if you mouse-over the circles, and some circles are really hard to light up due to the low precedence and high amount of overlap (especially South Side – there is only a small area that will allow you to see the brown circle).
Putting it all on the map
So, finally, adding the pieces together. Chronologically, I did the circles first, so I simply reused the circle idea to draw the district boundary line(s). Basically, you build an array of lat/long pairs and pass that into a polygon generator function that Google provides. Google also provides a polyline function, but polygons can be filled. 🙂 All the lat/long pairs are passed into the the polygon function to created that crazy, all-over-the-place district boundary. Next, I use some math (again, copied from the example) to generate an array of points – if you look closely at the circle (max zoom) and the source code, you will see that I only use 52 points to describe the circle, much like a 52-sided polygon. After generating the polygons, I have to add them to the map. Or, more accurately, pass the map into the polygon with the “setMap” function. I found that I had to add the district boundaries first, or else they would have higher precedence and you would not be able to mouse-over the circles.
I still want to pop up an info tab, much like what the fine folks at LocalSchoolDirectory have done. Their site is really slick, and I hope to make mine a little more fresh in terms of colors, shapes and general appeal. Maybe some day….. (/me has design envy). On the other hand, if you want that extra info, you can always go visit them. =)
Citizen4: A citizen's blog about Champaign Unit 4 