The best traffic report apps and widgets are lean, load quickly, and are loaded with customer-oriented features for easy everyday use. Bing Maps API provides developers all the resources they need to build a robust traffic report app.
Let’s work through a few tips and fun ideas to help you build your own traffic app.
Add multi-mode navigation
Navigation doesn’t have to be a part of a traffic report app, but it’s always great to have. Adding accurate navigational features to your app gives your users the option to take the app on the go, from the Windows Feed on their desktops to their handheld devices. Bing Maps API makes adding these features easy with the Routes API.
The Routes API is a REST service that packs multiple useful features for a traffic widget. On a basic level, you can create routes for two or more locations with a single URL request, but the API also allows for seamless routing for commercial vehicles.
In practice, your users won’t always be using the same transport method to get from point A to B. In fact, travelers could just as easily change from public transit to walking the rest of the way during their journey. You can account for different transport modes like driving, walking, and public transit using the Routes API. Additionally, routing improvements like predictive traffic ensure that your traffic app’s reporting stays practical and relevant for everyday users.
Build infoboxes
Infoboxes are small windows that pop up when a user clicks on a pushpin on the map. You can add a considerable amount of value for your users by incorporating these infoboxes in your traffic widget. They’re a great tool for relaying location-based information in an organic and concise way.
The Bing Maps API code samples repository has multiple different interactive infobox samples, from creating custom HTML boxes to adding shape events with GeoJSON modules. We’ll be taking a look at a basic infobox sample here, but feel free to experiment and create a more complex variation for your traffic report app once you’ve got the hang of things.
<!DOCTYPE html>
<html>
<head>
<title>Basic Infobox Sample</title>
<meta charset="utf-8" />
<script type='text/javascript'>
var map;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var center = map.getCenter();
//Create an infobox that will render in the center of the map.
var infobox = new Microsoft.Maps.Infobox(center, {
title: 'Map Center',
description: 'Seattle'
});
//Assign the infobox to a map instance.
infobox.setMap(map);
}
</script>
<script type='text/javascript'
src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
async defer>
</script>
</head>
<body>
<div id="myMap"
style="position:relative;width:600px;height:400px;">
</div>
</body>
</html>
Similar to many other Windows Feeds widgets, infoboxes can be built into your traffic solutions by using simple JavaScript. Our sample creates a basic infobox in the center of the map with the description ‘Seattle’. You can easily customize the dimensions of this map by adjusting the ‘style’ parameter to suit your needs
This sample doesn’t have any extra bells and whistles, but you can add a range of useful features like a hide button to your traffic report app with minimal effort. The only thing you’ll need to add these boxes to your maps is a Bing Maps API key. Your key will be verified before your requested map gets rendered, create one for free to try it out!
Get creative!
Infoboxes are map controls–a core part of the Bing Maps V8 Web Control. Interoperability is a key benefit of the Bing Maps API platform allowing you to complement features like predictive traffic and infoboxes with dynamic mapping solutions like animated tile layers and batch geocoding.
Most traffic widgets simply use colored paths to represent different levels of traffic. Why not get creative and take it a step further with heatmaps? You can use a simple heatmap layer to display congested hotspots and areas of lesser traffic with historical traffic data.
Similarly, you could also use the clustering module to create groups of push pins that are close to each other, improving the overall user experience. This is particularly useful if you’re going to be creating a large number of infoboxes for your traffic report app.
A different perspective
For an even more immersive experience, consider using Streetside to give your users a unique street-level perspective. This feature can be used both for sightseeing as well as for planning alternative routes in advance. Users can spot congested roads using the traffic widget and look for other routes or destinations without having to leave the house.
Alternatively, consider taking to the skies with Bird’s Eye! Bing Maps API’s location data powers this popular feature, giving users multiple angles of their intended destinations. The best part? We’re always adding more high-res imagery. Developers will be pleased to know that these features can be seamlessly implemented into web apps with the V8 Web Control’s fast-loading HTML5 canvas grid.
Retrieve traffic incident data
Leave no stone unturned with the Traffic API. A truly comprehensive reporting app is going to go beyond just measuring traffic, and will include other important factors like traffic incident information. Use the Traffic API to request incident data, including road closures, accidents, and even hazards.
You can further customize your data by including parameters like ‘severity’, this will specify the importance of the incident from ‘Low impact’ to ‘Serious’. Small touches like this can help your traffic report app stand out among other popular Windows Feeds solutions.
.png)
Build with Bing Maps API
Whether you’re working on a basic infobox or implementing Streetside imagery, there’s always room for creativity with Bing Maps API. Create a key today to build and scale your own traffic widget.
