Further Ideas: Using Dynamic Jump Lists

Article
03/03/2016

This topic discusses the idea of using dynamic Jump Lists for a local events site by using geolocation and the Bing Maps API. Other ideas for using dynamic Jump Lists are also discussed.

Examples
Using Location-Aware Jump Lists for a Local Events Site
Using Dynamic Jump Lists for a Music Site
Using Dynamic Jump Lists for a Movie Information Site
Using Dynamic Jump Lists for a Shopping Site
Related topics

Examples

The following table provides examples of dynamic Jump Lists that have been customized for various types of websites:

Type of site	Usage
News Site	Post headlines for the section that the user pinned Post headlines for the most discussed articles
Sports Site	Post times for upcoming games that the user is interested in Post articles about the user's favorite teams and players
Video Site	Recommend videos based on what the user has watched before Recommend the most popular videos
Local Events Site	Dynamically populate a Jump List category with events near the user's location by using the Geolocation API. (See example later in this topic.)

Using Location-Aware Jump Lists for a Local Events Site

You can use a combination of geolocation and dynamic Jump Lists to create a Pinned site that stays current with local events in the user's area. This example uses the Geolocation API and the Bing Maps API to determine the locality of your browser.

By using the Geolocation API, which is supported by Windows Internet Explorer 9, you can approximate a user's location (latitude and longitude). The user can decide whether to allow the site to use geolocation, and the user can save these settings for each site.

In the following example, the getCurrentPosition method returns the user's current location as latitude and longitude. Next, the script passes the location to the Bing Maps REST service, and retrieves the locality (city name) from the XML response. Finally, the setJumpListLocation function creates the title of the Jump List category from the corresponding city name.

The script requires a Bing Maps Key, which you can acquire without charge by following the directions described in Getting a Bing Maps Key. To test the script, you must replace the YourBingMapsKeyHere placeholder with your key.

<script type="text/javascript">
window.onload = function() {
    if (window.external.msIsSiteMode()) {
        navigator.geolocation.getCurrentPosition(successCallback);
    }
}

function successCallback(position){
    // Use the position to locate the user geographically
    try {
        var point = position.coords.latitude + "," + position.coords.longitude;
        var addr = "http://dev.virtualearth.net/REST/v1/Locations/" + point +
                 "?o=xml&key=YourBingMapsKeyHere";
        var xhr = new XMLHttpRequest();
        xhr.open( "GET", addr, true );
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 && xhr.status == "200" ) {
                var city = xhr.responseXML.selectSingleNode("//ResourceSet/Resources/Location/Address/Locality");
                document.getElementById('output').innerHTML = city.text;
                setJumpListLocation(city.text);
            }
        };
        xhr.send(null);
    }
    catch(ex) {
        alert(ex.message);
    }
}

function setJumpListLocation(city) {
    window.external.msSiteModeCreateJumpList(city + " Events");
    // Add events here.
    window.external.msSiteModeAddJumpListItem("TEST","TEST","TEST");
    window.external.msSiteModeShowJumpList();
}
</script>
</head>

<body>
<p>Your location is: <span id="output">unknown</span>. </p>
</body>

Note For simplicity, this example uses a cross-domain request, which is subject to the browser's same origin policy. Websites often work around this restriction by using a simple web proxy service on the web server to request content from another domain in the backend, thus circumventing the check within the browser.