With the data from Flickr from the previous example, we have enough to get started. We'll create our simple application with an OSM base layer and a vector layer filled with the Flickr data on top of it:
Create a new HTML page for the application in the sandbox folder. For the sake of this chapter, we'll refer to this as
flickr.html
. We'll use the familiar structure. Also, we'll start withol-debug.js
and optimize it later:<!doctype html> <html> <head> <title>Flickr App</title> <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css"> <link rel="stylesheet" href="../assets/css/samples.css" type="text/css"> </head> <body> <div id="map" class="map"></div> <script src="../assets/ol3/js/ol-debug.js></script> <script> </script> </body> </html>
Now, add the following code to create our vector layer using...