Adding a Traffic Map

Get Help
1

Hi all
I want to add a traffic map to one of my layouts.
I believe I should use Embedded section but I don’t know how.
I checked the documentations but I would appreciate if someone can instruct me specifically for traffic map example.

Thanks and regards
Eced

2

If I remember, you can get examples from google themselves how to show traffic on the map. I then created a web page to show this, then embedded it into xibo to get the result.

Hope it helps.

3

You will need Google Maps js api key - documentation - Traffic Layer  |  Maps JavaScript API  |  Google Developers

Then on your layout you add new embedded html item like this:

HTML to Embed
<div id="map"></div>

Custom Style Sheets

<style>
  #map {
    height: 100%;
  }
</style>

HEAD content to Embed (including script tags)

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 42.6055556, lng: -83.15},
    disableDefaultUI: true
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
function EmbedInit() {
  $("#map").height($(window).height());
}

</script>

Obviously you replace the YOUR_API_KEY ,with, well with your google api key.

zoom and center line should be self-explanatory
disableDefaultUI: true
gets rid off ‘pin man’ and zoom UI - you can leave it at false or delete that line if you’d rather see this UI.

effect:

blob.jpg842×515 210 KB

4

Great, it works. But I want to add Istanbul’s traffic map instead of this screen. How is it possible?

5

The above is just an example.

You will want to change this line to latitude and longitude of what you want to show.

6

Hahaha just realized it. Such a silly question. How can I determine my city’s coordinates on google maps

7

http://www.gps-coordinates.net/

You can put the whole address there or just Istanbul then on the map find the exact region you want to show in Xibo, click the get GPS coordinates button - then put that latitude and longitude in your embedded html.

1 Like
8

Hi,
I want to do same project but a little different.
I use google map. I have a address dataset table.
I want to set “lat” and “Ing” values from the address dataset tables.
How can I do this. Please help me.

center: {lat: 42.6055556, lng: -83.15},

9

For info, 1.8 now comes with a Google Traffic map as standard.

10

You can’t take the data from a dataset.

With the 1.8 module that does this, you can use the Display location as defined in the display record instead, so traffic for the displays location is shown.