Hello all,
since my last postings (Coronavirus & Water Level) with local data (of the Cologne region) were so well received, I would like to share another possibility with you.
Since I regularly commute between Aachen and Cologne I have provided myself Lovelace maps for the current traffic situation. I mainly use GoogleMaps for this. However, since Google broke new ground a few months ago with its Google Cloud Platform, charging for everything over 200 API requests per month, I switched to using the free map from the Ministry of Transportation of my State (NRW).
The Google Maps API and its integration has already been described in other places postings here in the community.
Here I would like to show you briefly both ways.
Verkehr.NRW: Ministry of Transport of the State of North Rhine-Westphalia
This way is much faster. Simply configure the map from www.verkehr.nrw for your own purposes and embed the link as an iframe/web page. Et voilà!
type: iframe
url: >-
https://www.verkehr.nrw/web/vipnrw/karte/?center=50.93922,6.94709&zoom=11&car=true&publicTransport=false&bike=false&layer=Verkehrslage,Verkehrsmeldungen,Baustellen&highlightRoute=false
aspect_ratio: 75%
GoogleMaps: Be Careful with any more requests then 200 per month!
Create an HTML file with the following content in your config/www folder. Here you can adjust position, zoom factor and other map elements. For the correct function an API key is necessary!
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Verkehr</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.8609, lng: 6.5577},
zoom: 9,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap"
async defer type="text/javascript"></script>
</body>
</html>
Google Introducing Google Maps Platform
Maybe you should set a quota before facing an unexpected bill
type: iframe
url: /local/gmap.html
aspect_ratio: 75%
I hope I could help you with this post again to use more local data for your dashboard 