Time for action – adding dynamic tags to your map

Let's add some more interaction to our map now. We'll add an input box that will change the requested Flickr data based on the user's input:

First, we'll add an input box and button to the HTML page. We'll put them into a div after the map and before the photo information:

<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
  <input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
  <button type="button">Search</button>
</div>

Next, we'll need to replace our $.ajax call with a function that will get called when the button is clicked. This function will do three things. First, it will clear the existing features from the map. Next, it will clear any selected photo info. Finally, it will request new data from Flickr with the appropriate tags:

function loadFlickrFeed(tags) {
  selectedFeatures.clear();
  flickrSource.clear();
  $('#photo-info').empty();
  $.ajax({
    url: 'http://api.flickr.com/services/feeds/geo',
    data: {
      format: 'json',
      tags: tags
    },
    dataType: 'jsonp',
    jsonpCallback: 'jsonFlickrFeed',
    success: successHandler
  });
}

Now, we'll need to make the button call this function when it is clicked. We'll use jQuery for this. Add the following after the loadFlickrFeed function:

$(document).on('click', '#search button', function() {
  var value = $('#search input').val();
  var tags = value.split(' ').join(',');
  loadFlickrFeed(tags);
});

Open up the page and you should see an input box over the map. When you change the value and hit the button next to it, the loadFlickrFeed function will get called and refresh the vector layer. Try typing in various tags (or multiple tags separated by a comma) and hitting the button:

What just happened?

We just updated our Flickr application to allow user input that affects what data is shown. We did this in a sort of modular way—we didn't have to change any of the previous code we wrote. Instead, we just created a function that clears the existing features and loads new ones based on the selected tags. Now that we've written an application, let's talk a little bit about how to deploy it.

Previous Chapter

Wrapping up the application

Next Chapter

Deploying an application

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – adding dynamic tags to your map

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide