Concerts Map with SongKick API and ModestMaps
Final Demo: Find Concerts per Geo Location on a Map
Simple Map Example with ModestMaps
User GeoLocation with ModestMaps
ModestMaps with Map Drawn Callback
ModestMaps with Map Marker
Calculating Geo Distance with ModestMaps
Before we dig into SongKick API calls, I wanted to figure out how to limit these calls in general. Requests for concerts do not have to occur with every map interaction (drag and zooming) so I wanted to setup some sort of distance threshold before I would process new Ajax requests to SongKick. So, I created a global variable previousCenter and used the ModestMaps MM.Location.distance function to measure the distance between two geographical points. This will allow me to define a custom distance variable and check if the user has dragged the map far enough from a previous location to initiate some extra calls. Here is the ModestMaps Distance Demo.
Using SongKick API with ModestMaps
I added jQuery to handle the JSONP requests to SongKick and I am limiting the zoom with ModestMaps map.setZoomRange() function because we don’t want to move the map too far away in distance with each drag. In the reprocess function, I am only requesting another call to SongKick if the total distance panned from one center point to another center point is larger than 40,000 meters. I also put an if statement there so we don’t process a distance change in the initial relocation call (as that just locates the end user on the map). Everything seemed to work but I noticed that even though the zoom is limited, redraw is still called when you keep trying to zoom out. So, that if statement also checks to see if the previous and current geo location is the same, in which case we skip the distance processing.
Concerts per Geo Location with SongKick API and ModestMaps
We are still missing the biggest part of the demo, the actual concerts and festivals getting listed on the page. So, I added some CSS to the panel element and added anther request to SongKick API for upcoming events according to the most frequent metro id from the selected map location. When I create the listing, I added a “Map It” element with a click event that plots any event on the list as a marker on the map. I used HTML 5 data- attributes to store latitude and longitude values and I reposition the map to that geo location when the element is clicked.
As a result of repositioning the map, I have to wait for the redrawn function to complete before I can accurately place the marker on the map. So, marker placement lives in the reprocess function and I use a flag to identify this action. All of this asynchronous functionality results in a lot of information living in the global namespace which is not ideal, and this could be improved or written differently. But, it works for a demo and here is the final example, a map build with ModestMaps that lets you explore concerts by location provided by SongKick API.
Other Documentation for ModestMaps
HyperText Plugin for ModestMaps
Easey – Simple Maps Animation Library
Parallax demo with ModestMaps