Tag Archives: web mapping

building research

Back at it again: Tinkering with Maps

I played with Google Map API v.3 in OpenLayers today with the mission to fix a couple things broken on my Myspace Friendship Web Map. All of this is inspired by my recent revisit of my spatial (ethno)musicology at my UCLA talk on digital ethnography and the NCCSEM roundtable on alternative careers for ethnomusicology PhDs at Santa Clara University this past weekend. I also want to make some new visualizations for my talk at the upcoming EMP/IASMP meeting in New York in a couple of weeks.

More significantly, I’ve been preoccupied with how I can build on my music-map project. With the goal to develop tools to visualize the relationship between music and space, I want to go a step further than visualizing socio-musical communities to find a way to visualize the spatial patterns in the sound and lyrics of songs. This constellation of impulses and mini codling practices will contribute to my eventually goal of building a site, web hub for music scholars to rethink how the digital would enhance the spatial understanding of music and music-cultures.

I set aside a large chunk of time today to read and code today. I read Julie Meloni’s webcraft book to learn the syntax of JavaScript so that I could decipher the OpenLayers script that Joe and I worked on at the Scholars’ Lab. I read about DOM and reviewed some introduction to the basic structure, objects, and syntax of JavaScript. I also found out the some time early last year, Google came out with a Google Map API version 3. They are in the process of phasing out, or to use their language, “deprecating” version 2. So I set out to learn how to make the Google Map API version 3 work with the OpenLayers script that I came up with, while working with Joe (Gilbert) at the Scholars’ Lab.

I read the source code of the OpenLayers Google Map V.3 example and inserted parts of it into my original OL script. By the end of the day, I was able to get V3 to work in a new version [Kominasmap5.html]. In this version, Google Map layers download properly with the Spherical-Mercator projection. The loading time for the GM layers is much faster than better. The block-by-block layer download is replaced by a much faster download of the entire map. But the WMS layers (such as world_regions and muslim_majority) that the Scholars Lab created, however, are currently malfunctioning at this point. I took those parts of the script [var Layers] out to avoid brokenness.

I also learned how to center the map on specific lat-long coordinates. I decided to center the map with Singapore (103.8, 1.3667). I figured this way I can concentrate the friendship patterns in Asia, in particular South and Southeast Asia.

Here is the snippet of code that’s related to centering and projection:

new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 5);

I have no idea why “EPSG:4326″ is used in the OpenLayers Google Map v.3 example. This is especially puzzling when it explains in its comments that “Google.v3 uses EPSG:900913 as projection, so we have to // transform our coordinates.” In order to solve this puzzle, I may need to read about how projection works in OpenLayers.

In addition, the zoom is still broken (as it is in the previous version–kominasmap3–the public one hosted on beingwendyhsu.info) in the new version. The map can’t be zoomed all the out to the inter-continental level as before. I was not able to fix this in this iteration. A perhaps related problem is that the zoom bar on the left side of the map panel disappeared in this version.

I’m happy to be back at hacking, coding, and building again. It makes me feel incredibly productive. It feeds my inner child who loves to learn new things and imagine possibilities.

Goals for the next round:
– place a continent layer back into the map
– insert a zoom bar
– read parts of Julie M’s book on variables, functions, etc (ch 16 + 17)

Some OpenLayers zoom examples:
http://openlayers.org/dev/examples/fractional-zoom.html
http://openlayers.org/dev/examples/zoom.html
http://openlayers.org/dev/examples/fractional-zoom.html