Photo Map Challenge

By now you've gotten familiar with clickable icons and shapes.
Look at this as a challenge or a direct assignment for you to dig deeper into OpenLayers.

Here are a few online map sites with plenty of user-contributed content:
- http://panoramio.com
- http://wikilocation.org/
- http://wikimapia.org
- http://www.readwriteweb.com/archives/twitter_location_api_possible_uses.php
- http://foursquare.com
- http://www.u-shahid.org/cr/
- http://oilreporter.org/

Wouldn't you like that information on your maps?
Fortunately, each of these websites lets you link up to their map through a system known as an API (Application Programming Interface) or an RSS feed.  OpenLayers is one example of an API.

How do you find APIs?
- On a website, look for links such as "Developers" "Technical" "Community" "API"; possibly at bottom of the page
- Search on http://www.programmableweb.com/
http://www.programmableweb.com/apis/directory/1?apicat=Mapping
http://www.programmableweb.com/api/openlayers/mashups

The Challenge
I'll walk you through adding articles from WikiLocation.org.
- You can use similar code to load photos from Panoramio.
- If you're new to web programming and up for a challenge, try loading polygons/shapes from WikiMapia instead ( polygon walkthrough article coming soon )
- If you're already a web programmer, try connecting to a social site such as Twitter or an activist site such as Ushahidi.

Mapping Wikipedia

• Start with a map that has clickable icons, such as http://jsfiddle.net/UAxun/73/ from Clickable Icons in OpenLayers: http://p2pu.org/webcraft/node/12927/document/26306
• Set the map up on your own computer or website, instead of using jsFiddle.  Download map.html from the example document, and edit it using Notepad, Notepad++, DreamWeaver, or another text editor.  You'll be able to view it by sending your browser to its file location such as file:///C:/map.html

• Look up the API documentation at http://wikilocation.org/documentation/

From that page, I determined that I want to make this request up to 10 nearby articles within 3000 metres of the center, and send it to a new function which I'll be writing, called mapWiki.

apiAddress = "http://api.wikilocation.org/articles?lat=27.173768&lng=78.042068&limit=10&radius=3000&jsonp=mapWiki";

• Once you've put all the parts together to form a complete request from the API, create a <script> object, set it to that address, and append it to the page.

apiScript = document.createElement("script");
apiScript.src = apiAddress;
document.body.appendChild(apiScript);

• Now WikiLocation is calling the mapWiki function and sending it an object full of data, as described on their page under "Response".  Here's a result with one response:

{
    "articles": [
        {
            "id": "7290308",
            "lat": "51.5006",
            "lng": "-0.124611",
            "title": "Big Ben",
            "url": "http:\/\/en.wikipedia.org\/w\/index.php?curid=7290308",
            "distance": "17m"
        }
    ]
}

• Now I need to create the mapWiki function to receive these responses and add them to the map.
• Note that an object (such as Big Ben, and the response itself) is enclosed in curly brackets { }
• "articles": [ ... ] is using square brackets
• This means articles is an array - a list of objects.  In this case there's only one, but there could be any number between 0 and 10 objects in the list.
• We're going to use a FOR loop to repeat the same instructions for each and every object in the articles list.

What is a FOR loop?

• We can get an item out of the array using square brackets.  For example articles[1] will give us one object, and articles[2] will give us another object
• The first object in an array is the zero-th.  That means that in the example above, articles[0] will give us Big Ben, and articles[1] doesn't exist.
• articles.length is a count of objects in an array.  In the above example, articles.length=1 but the highest possible article is [0].  This means that the farthest we can go in any list is [ articles.length - 1 ].
• The for loop requires these components:
  • a variable that we're using for articles[0], articles[1]... we'll use the variable i
  • a starting point: i = 0;
  • a limit to repeating: i <= articles.length - 1
  • and an instruction on how to move from the start to the end: i = i + 1

function mapWiki(response){
    articles = response.articles;
    // create style for all article points
    articleStyle= OpenLayers.Util.extend({}, layerStyle);
        articleStyle.fillColor = "blue";
        articleStyle.graphicName = "circle";
        articleStyle.pointRadius = 10;
        articleStyle.strokeColor = "blue";
        articleStyle.strokeWidth = 3;
        articleStyle.fillOpacity = 1;
        
    for( i = 0; i <= articles.length - 1; i = i + 1 ){
        // get the article's location
        lat = articles[ i ].lat;
        lon = articles[ i ].lng;
        
        // create a point at that location
        myPoint = new OpenLayers.Geometry.Point( lon, lat ).transform(                  
              map.displayProjection, map.projection );
        // transfer information from articles[ i ] to myPoint
        myPointFeature.attributes = {
             name: articles[ i ].title
        };
        
        // make it into a Feature ( adding a style )
        myPointFeature = new OpenLayers.Feature.Vector( myPoint,null,articleStyle);
        
        // add feature to the pointLayer
        pointLayer.addFeatures( [ myPointFeature ] );
    }
}

Make some revisions

Now go back to your onFeatureSelect function and change what appears when you click one of these points.  We want it to be an <iframe>, which embeds another webpage inside our own. Let's load the mobile Wikipedia article ( http://en.m.wikipedia.org ) so that it fits inside the bubble.

Taking care with the quotes, set the HTML content of the bubble to be:

"<iframe src='http://en.m.wikipedia.org/wiki/" + clickedFeature.attributes.name +" ' height='300' width='300' style='border:none;'></iframe>"