Show ISS Position with OpenStreetmap and OH (Just for fun)

Tutorials & Examples Solutions
1

Show ISS Position with OpenStreetmap and OH (Just for fun)

OH 2.5.8
OpenHabian

Project:
Show the current position of the ISS space station on the OpenStreetmap map with the current geo-coordinates. To show the OpenStreetmap map I use a WebView where a html page is embedded inside a double iFrame. I get the necessary angularJS library from the OH PaperUI directory. The current ISS position comes from the free API http://api.open-notify.org/iss-now.json The position in this html side will refresh every 30 seconds.

OpenHAB-ISS-Position
OpenHAB-ISS-Position910Ă—702 46 KB

.sitemap

// ISS Position
Webview url="http://192.168.x.xxx:8080/static/issposition.html" icon="none" height=20

html: issposition.html

<html>
 <head>
  <meta http-equiv="refresh" content="30" >
 </head>
 <body ng-app="isspositionApp" ng-controller="isspositionCtrl" >
  <div><span>Logitude: {{longitude_m}} </span><span> Latitude: {{latitude_m}} </span></div>
  <iframe width="800" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ng-src="{{isspositionFrame}}" style="border: 1px solid black"></iframe>
  <script type="text/javascript" src="/paperui/js/angular.min.js"></script>
  <script type="text/javascript" src="app/issposition.js"></script> 
 </body>
</html>

html/app: issposition.js 

/**
* AngularJS App 
* issposition.js  
* Position der ISS Raumstation auf OpenStreetmap anzeigen
* 09.08.2020
* https://community.openhab.org/t/google-map/31059/5
* https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Lon..2Flat._to_bbox
*/
var app = angular.module( 'isspositionApp', [] ); 

/* AngularJS Controller */
app.controller(
 "isspositionCtrl",
 function( $scope, $http, $sce ) {
  
  // Init Variable ISS Position
  $scope.longitude = 0;
  $scope.latitude = 0;
  
  // Init BBox koordinaten
  $scope.links = 0;
  $scope.unten = 0;
  $scope.rechts = 0;
  $scope.oben = 0;
  
  $scope.isspositionFrame = '';
  
  // API ISS Position abholen
  $scope.issposition = function() {
  
    $http({
        method : 'GET',
        url : 'http://api.open-notify.org/iss-now.json'
    }).then(function(response) {
       // First function handles success
       if (response.data.message === 'success') {

         console.log('success long:', response.data.iss_position.longitude);             
         console.log('success lat:', response.data.iss_position.latitude); 
     
         // position ISS
         $scope.longitude = Math.round(response.data.iss_position.longitude);
         $scope.latitude = Math.round(response.data.iss_position.latitude);
         
         $scope.longitude_m = response.data.iss_position.longitude;
         $scope.latitude_m = response.data.iss_position.latitude;         
         
         //bbox koordinaten grobe annäherung
         $scope.links = $scope.longitude - 80;
         $scope.unten = $scope.longitude + 80;
         $scope.rechts = $scope.latitude - 80;
         $scope.oben = $scope.latitude + 80;
         
         //bbox koordinaten grobe annäherung
         $scope.links = $scope.longitude - 5;
         $scope.unten = $scope.longitude + 5;
         $scope.rechts = $scope.latitude - 5;
         $scope.oben = $scope.latitude + 5;         
         

         // OpenStreetmap mit ISS Position aufrufen
         $scope.link = 'https://www.openstreetmap.org/export/embed.html?bbox='+$scope.links+'%2C'+$scope.oben+'%2C'+$scope.rechts+'%2C'+$scope.unten+'&layer=mapnik&marker='+response.data.iss_position.latitude+'%2C'+response.data.iss_position.longitude
         // $scope.link = 'https://www.openstreetmap.org/?mlat='+$scope.latitude+'&mlon='+$scope.longitude+'#map=3/'+$scope.latitude_m+'/'+$scope.longitude_m;
         $scope.isspositionFrame = $sce.trustAsResourceUrl($scope.link);
         console.log($scope.link);
       }

    }, function(response) {
       // Second function handles error
       console.log('error:');
       console.log(response);
    });   
    
  };
  
  // Calculate OSM bbox
  // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Lon..2Flat._to_bbox
  // https://wiki.openstreetmap.org/wiki/DE:Bounding_Box
  // vereinfacht hier
  // https://forum.openstreetmap.org/viewtopic.php?pid=797977#p797977
  $scope.long2tile = function(lon, zoom) {
   return (Math.floor((lon+180)/360*Math.pow(2,zoom)));
  };
  
  $scope.lat2tile = function(lat, zoom) {
   return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom)));
  }
  
  $scope.issposition();
  
  
  
});

Problems:
The calculation of the OpenStreetMap BBox to show the ISS position in the center of the map is difficult, so I used only a rough simplification. Because of this the map view is sometimes very large or the ISS position is just outside. I did not understand the correct calculation of the BBox coordinates.

Have fun…

Regards,
Thomas

7 Likes
2

Super cool idea Thomas, thanks for sharing

1 Like