Time for action – switching to JSON data

We mentioned earlier that the Flickr feed API supports more than just the KML format. It also supports a variety of RSS versions and JSON. That sounds promising; let's see if we can do better with the JSON version. Refer to the following steps:

First, replace the KML source, flickrSource, with a generic vector source. Reload the page and make sure that everything still works. You should see the base map but no features (we'll add them shortly):
```
var flickrSource = new ol.source.Vector();
```
Next, we'll need to download the JSON version of our data by changing the format in the URL to json. Load the following URL in your browser and save the result to a new file called flickr_data.json:
```
http://api.flickr.com/services/feeds/geo/?format=json&tags=bird
```
Have a look at this file in your text editor. Note that it starts with jsonFlickrFeed (on the first line, this means that it is intended to be loaded as JSONP).
Note
JSONP, or JSON with Padding, is a technique for loading JSON data from a remote server that avoids the restrictions of the same-origin policy. See http://en.wikipedia.org/wiki/JSONP for a good description of why and how JSONP works. For now, it is sufficient to know that JSONP will invoke a callback function and pass the data to it.
The next few lines appear to be metadata about the response—a title, description, date, and so on. What comes next seems to be what we want—an array of objects that represent photos, complete with links to photos and geographic locations. Perfect!
The data isn't in a format that OpenLayers understands; so, we'll have to load the data and turn it into features ourselves. We can use the jQuery ajax method to do this:
```
$.ajax({
  url: '../assets/data/flickr_data.json',
  dataType: 'jsonp',
  jsonpCallback: 'jsonFlickrFeed',
  success: successHandler
});
```

Now, we can add the successHandler function to process the data into features and add them to the map:

function successHandler(data) {
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
  data.items.forEach(function(item) {
    var feature = new ol.Feature(item);
    feature.set('url', item.media.m);
    var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
    var geometry = new ol.geom.Point(coordinate);
    feature.setGeometry(geometry);
    flickrSource.addFeature(feature);
  });
}

Reload and check the result. If we try the code from before in the console, we should see much more useful information:
```
var feature = flickrSource.getFeatures()[0];
feature.getProperties();
```

What just happened?

Allowing for different features in the new data file, the application should look exactly the same as before. The only difference is, we are now using JSON data instead of KML. Let's review how we changed from KML to JSON.

The JSON data is not in a format that is directly usable by OpenLayers; so, we need to do most of the work that a format-specific source would do for us. The first step was to remove the KML source and replace it with a generic vector source, into which we can insert the features as we get them. The next step is to load the data. We've chosen to use jQuery's ajax function to do this. The ajax function needs a URL to load from, a function to call when the data is loaded (successHandler) and a configuration to help it understand that the data is in the JSONP format:

dataType: 'jsonp'

And, that it uses a specific callback function name:

jsonpCallback: 'jsonFlickrFeed'

The final step is to interpret the data once it is loaded and create the features we need. We do this inside successHandler by first creating transform that will convert coordinates from latitude and longitude into the projection we are using for the map's view:

var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

Then, we loop over all the items and turn each one into a feature. Each item is an object literal containing all the information we need for positioning and styling the photo. We create a new feature object and pass it this information, so that we can access it later for styling purposes:

var feature = new ol.Feature(item);

From looking at the properties of each photo, we see that the URL to the photo is stored in the media attribute under a key called m. This will be inconvenient to work with later; so, we create a new property called url with the value we want:

feature.set('url', item.media.m);

We need to create a new geometry object to represent the feature's location using the latitude and longitude of the photo (remembering to also transform the coordinates into the view's projection) and set it as the geometry of the feature:

var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);

Finally, we added the feature to our vector source:

flickrSource.addFeature(feature);

Previous Chapter

Creating a thumbnail style

Next Chapter

Time for action – creating a thumbnail style

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – switching to JSON data

Note

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide