How to get a map into your app...
I have always been interested in maps. They are often beautiful fusions of information, art and design.
Google maps are probably the most-recognizable and most-used maps today. They are exhaustive, free, and highly-customizable.Â
+
My latest team project led my team and me to explore google map implementation yet again. The objective of our week-long development 'sprint' was to create an event-promotion app, which tracked a event's hashtag activity on Twitter, automatically moving and zooming a google map on that event's page, until a tweet threshold was passed, and an address was revealed.Â
The app is based off of similar buzz-building promotional sites, and aims to whip up interest by inviting participants into a solving a mystery live, using social media. The app, if still live, can be visited here.
+
Including Google Maps in a rails app is as easy as including a javascript file in your assets/javascripts folder...
..where you can customize such elements as the maps default center position (line 7), its zoom (lower number is more zoomed out)(line 8), whether you can scroll to zoom in (line 9), whether you can pan or drag a map (line 11 and 12), whether you can double-click to zoom in (line 14), as well as define a custom style (line 15).
You also have to including a map div on the view page where you'd like to add a map...
...and you've got a map!Â
If you are talented as writing google map style, you can include your own style javascript in the file as well, or use a custom style generator, such as the one here, which spits out JSON you can include right in your file.Â
Here, for example, is the first element to be styled in a custom style:
The "water" on this map style called 'mapStyle', will be set to color #19a0d8 (the hex color bright blue). More changes are added below, after the comma.
Linking map zoom activity to a tweet count is accomplished through a little more code in the map javascript file, and by making a call to the Twitter API through our controller file, and counting hashtag usage.
Here, the controller makes the result of a certain Twitter request (identified by secret keys) equal to a variable called @client (line 48)...
...Then we simply search our results, look for "recent" tweets of the desired hashtags, and count them up! (line 54) The resulting number is set equal to a variable called "@count".
Then we return to the maps javascript file.
Back in the maps file, we can set a condition 'if'Â (line 30) -- if the count of the tweets is more than or equal to 1/3 of our 'tweet goal' (defined elsewhere) then we do the following:
Set 'lat' to a random latitude closely related to our actual final lat (line 31), (random to hide the ultimate final location) Â Â
Set 'long' to a longitude closely and randomly related to our final longitude (line 32), (again, random to hide a final location)
Set the maps location equal to our newly defined lat and long,
Center the map on this new location,
Increase the zoom to 13 (zoom in!),
And set a timeout of 1500 milliseconds (15 seconds), during which the map will pause before showing the next, more-zoomed-in map (if applicable) (line 38).
We set several conditions like these, waiting for different tweet thresholds, to create an interactive, tweet-driven map page.
This defines roughly how a map can be stripped of its controls, given custom styles, and linked to a tweet count, through javascript and ruby in a rails app.
My groups project can be visited live here: WildFyre
And explored in code-form at our Git-hub repo here.
