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...