Leaflet Map Markers with API Caching
LeafLet Map showing Flickr and Panoraimo Photos with Caching
Caching can be complex but our use case here is quite simple. Plotting photos on a map requires either an individual geo coordinate or more ideally, the bounds of the map or 4 geo coordinates. This is really all we need to send to the server, which will initiate the API calls based on that geo location data and send the information back to the client. If you are not caching, every page refresh or a new user that lands on the same area of the map will trigger the same API request multiple times.
So, all we really need is to store the API requests to a file, write a conditional to check if the request was made previously (by just checking if a file exists), and serve the request from the file instead of making an API request. It could be as easy as this or this or we could just leverage an already created API Cache class. My choice is for this super simple PHP cache function and here is my implementation for caching both Flickr and Panoraimo API calls:
I think it is pretty self explanatory. Now, let’s consider the client side. We define a leaflet map with cloudmate layer and constrain zoom to 9 so that we don’t send huge bounds to Flickr and Panoraimo servers. Since Leaflet has a Geo Location function, I used that to center the map on the page to the user’s location. If there is any error, we handle that in our onLocationError function that just sets the map view to some arbitrary geo coordinate.
Since the GeoLocation function is asynchronous, I had trouble retrieving the center geo location of the map from the “map load” event. So, I made a viewreset event and retrieved the center of the map at this starting point. I am doing this because, in addition to server-side caching, I want to limit the amount of Ajax requests on the client side. I am going to do this with distance, similar to my SongKick API example with Modest Maps. So, we track the first center point when the map loads and then, on a dragend event (when someone moves the map), we compare the new center location to the previous point. I have used the point.distanceTo function to measure the distance between the two points and I am only sending requests to the server if the drag/pan was more than some arbitrary distance.
Initially, if someone drags the map by a good amount, I send them to my start function which first, removes any markers that have already been placed on the map, and second, gets the bounds of the map and makes an Ajax request to the api-cache.php script above. Both Flickr and Panoraimo take the same geo coords, so we don’t need to consider any extra parameters, but the response will need to be parsed differently. We could do the parsing server side but some level of parsing will always be required to place the markers on the map, so I decided to let the server handle caching while the client does the parsing.
I have used a different icon for Flickr vs Panoraimo and the photos pop up in a little Leaflet tooltip. Check out the LeafLet with Photo Markers and API caching demo.
PHP Caching Twitter
Caching API Responses