To go along with this article on the Nokia Conversations Blog, today, we’re going to look at a simple example of a HERE map mashup. This is aimed at people familiar with at least the basics of HTML and JavaScript.
The map mashup (a.k.a. Location Application/Mapplication/MapHack…) we’re going to build combines the HERE JavaScript API with the Flickr API to display a heatmap of the most popular locations for photographs in an area. You could also use this when planning a trip to a new city to find the ‘must-see’ photo ops. We’ll get into the code in a moment but here’s what we’re going to build:
Flickr Heatmap
Before getting started, you’ll need to register with the Developer Portal and get your own App ID and Authentication Token. It should just take a couple of seconds. Less than a minute, definitely. We’ll wait.
Boilerplate
As with all good projects, it’s useful to have a jumping off point that gets all the boilerplate code out of the way so we can dive straight in as quickly as possible.
This file contains all the things you need to get started using the HERE API
HERE JavaScript API Boilerplate
Download it, open it in your browser and you’ll see the map.
Once we’ve created a map, we try and determine the user’s location. This functionality isn’t supported by older versions of Internet Explorer but recent versions of all the browsers allow the user to decide whether or not to share their location with the web page. If we don’t manage, we’ll just display the map in a default location (the HERE office in Berlin).
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(foundLocation, notFoundLocation);
} else {
notFoundLocation();
} |
If we get the location, set the map center to that
map.setCenter(location.coords); |
Give me all you’ve got
Now we have a map and it’s centered on the user, it’s time to ask Flickr for images. You’ll need to sign up with Flickr to get your authentication token with them, too.
We can make a request to Flickr that returns the 500 most recent photos around a certain point. To do this we make an AJAX call to:
http://www.flickr.com/services/api/explore/flickr.photos.search |
With our API key and the map centre latitude/longitude. In this request, we also need to specify the parameters &extras=geo to ensure that Flickr will return the location tags for the image.
We’re using jQuery in this demo so the code to make the request to Flickr looks like this:
var apiCall = $.get('http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={YOUR_API_KEY}&min_upload_date=1356886856&lat='+map.center.latitude+'&lon='+map.center.longitude+'&extras=geo&format=json&per_page=500&nojsoncallback=1')
.done(function(data) {
// Other stuff
}); |
Note: if this doesn’t return anything or you get an error in your JavaScript console about cross-origin problems, you’ll need to view the demo via a local server. To avoid this check out our previous article “Quick Tip: Simple Servers”
Heatmaps
When the data comes back from Flickr, we need to format it in a way the Heatmap Overlay can process. There are two types of heatmap visualisation available using the API – ‘density’ and ‘value’. By default, a density heatmap will highlight areas where there are more items closely together while a value heatmap will highlight areas where the values are higher. For example, if there are a lot of cheap houses for sale in the north of a city and one expensive house for sale in the south, a density heatmap would highlight the north while a value heatmap would highlight the south. The difference is between “How much?” (value) and “How many?” (density).
We loop over the photos returned by Flickr:
var heatMapData = [];
if(data.photos && data.photos.photo) {
for(var i = 0; i < data.photos.photo.length;i++){
heatMapData.push({
"latitude": data.photos.photo[i].latitude,
"longitude": data.photos.photo[i].longitude
});
}
} |
We’re going to use density here to show where most people take photos so the heatMapData array only contains objects with latitude and longitude.
With the Heatmap Overlay object, we could modify the colours any way we like so that the popular areas show green while the unpopular ones are pale yellow or have them range between neon blue and pink but we’ll stick with the default rainbow colour scheme.
function addHeatMap(heatMapData) {
// First, delete any previous heatmaps
map.overlays.clear();
var heatmap;
// Create the Heatmap
heatmap = new nokia.maps.heatmap.Overlay({
// This is the greatest zoom level for which the overlay will provide tiles
max: 20,
// This is the overall opacity applied to this overlay
opacity: 0.8,
// Defines if our heatmap is value or density based
type: "density",
// Coarseness defines the resolution with which the heat map is created.
coarseness: 2
});
heatmap.addData(heatMapData);
// Rendering the heat map onto the map
map.overlays.add(heatmap);
} |
Once we’ve added the data to the heatmap, we add the heatmap to the actual map (the map.overlays.add(heatmap) line above). Areas where lots of photos have been taken show in orange and red while areas with fewer photos are pale yellow. We can now see at a glance where the most popular places for photos are.
Check out the finished map
The full source for the FlickrHeat demo is available on GitHub along with our other examples.
Other maps
We can easily do the same mashup using other APIs.
This is exactly the same as the Flickr example but with the Instagram API instead. This would be handy to highlight areas where people are hanging out.
Use the Foursquare API and heatmaps to visualize on the map the areas where your neighbors like to hang out and the spots that people like the most in your neighborhood.
Note: this requires a modern browser that supports the Web Audio API
This little application uses the Web Audio API together with the concert information available from the Last FM API to create an immersive, directional soundscape of a city. Fly around and discover the sounds of upcoming gigs. Best with headphones.
This video gives some technical insight into the Soundscape demo
