{"id":1617,"date":"2016-06-24T23:25:03","date_gmt":"2016-06-24T23:25:03","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1617"},"modified":"2016-06-24T23:25:03","modified_gmt":"2016-06-24T23:25:03","slug":"how-to-rotate-flight-marker-towards-arrival-airport-in-leaflet","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2016\/06\/how-to-rotate-flight-marker-towards-arrival-airport-in-leaflet\/","title":{"rendered":"How to rotate flight marker towards arrival airport in leaflet ?"},"content":{"rendered":"

 <\/p>\n

\"flight_market_heading\"<\/p>\n

First it is important to know how it works –<\/p>\n

    \n
      \n
    1. Check out\u00a0Leaflet Rotated Marker \u00a0plugin\u00a0https:\/\/github.com\/bbecquet\/Leaflet.RotatedMarker<\/li>\n
    2. \n
      L<\/span>.marker<\/span>([48.8631169<\/span>, 2.3708919<\/span>], {\r\n    rotationAngle:<\/span> 45<\/span>\r\n}).addTo<\/span>(map);\r\n\r\n<\/pre>\n<\/li>\n<\/ol>\n<\/ol>\n
      rotationAngle<\/strong> property need a value and this is key. You\u00a0will have to generate that dynamically based on aircraft position and destination airport. \u00a0Function below does the same calculate \u00a0and give\u00a0rotationAngle.<\/strong><\/p>\n
      Function in Python<\/em><\/p>\n
      def computeHeading(lat1, long1, lat2, long2):\r\n    import math\r\n    \r\n    rlat1 = math.radians(lat1)\r\n    rlat2 = math.radians(lat2)\r\n       \r\n    dlong = math.radians(long2 - long1)\r\n    \r\n    y = math.cos(rlat2) * math.sin(dlong)\r\n    x = math.cos(rlat1) * math.sin(rlat2) - math.sin(rlat1) * math.cos(rlat2) * math.cos(dlong)\r\n    heading = round(math.degrees(math.atan2(y, x)) + 360, 4) % 360\r\n    \r\n    return heading\r\n\r\n<\/pre>\n
      Keep in mind that lat1 and long1 are the aircraft’s position. And lat2, long2 are airport destination where aircraft is heading.<\/p>\n
       <\/p>\n
      Function in PHP<\/p>\n
      function computeHeading($lat1, $long1, $lat2, $long2) \/\/ lat1 and long1 are the aircraft's position\r\n{\r\n\r\n    $rlat1 = deg2rad($lat1);\r\n    \/\/$rlat2 = radians($lat2);\r\n\r\n    \/\/$rlat1 = radians($lat1);\r\n    $rlat2 = deg2rad($lat2);\r\n\r\n    $dlong = deg2rad($long2 - $long1);\r\n    \/\/$dlong = radians(long2 - long1);\r\n\r\n    $y = cos($rlat2) * sin($dlong);\r\n    $x = cos($rlat1) * sin($rlat2) - sin($rlat1) * cos($rlat2) * cos($dlong);\r\n    $heading = round(degrees(atan2($y, $x)) + 360, 4) % 360;\r\n\r\n    return $heading;\r\n\r\n}\r\n<\/pre>\n
      Function in JavaScript<\/p>\n
        function computeHeading(lat1, long1, lat2, long2)\r\n    {\r\n\r\n        \/\/ Converts from degrees to radians.\r\n        Math.radians = function(degrees) {\r\n            return degrees * Math.PI \/ 180;\r\n        };\r\n\r\n        \/\/ Converts from radians to degrees.\r\n        Math.degrees = function(radians) {\r\n            return radians * 180 \/ Math.PI;\r\n        };\r\n\r\n\r\n       var rlat1 = Math.radians(lat1);\r\n       var rlat2 = Math.radians(lat2);\r\n\r\n       var dlong = Math.radians(long2 - long1);\r\n\r\n       var y = Math.cos(rlat2) * Math.sin(dlong);\r\n       var x = Math.cos(rlat1) * Math.sin(rlat2) - Math.sin(rlat1) * Math.cos(rlat2) * Math.cos(dlong);\r\n       var heading = Math.round(Math.degrees(Math.atan2(y, x)) + 360, 4) % 360;\r\n\r\n        return heading;\r\n\r\n    }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
        First it is important to know how it works – Check out\u00a0Leaflet Rotated Marker \u00a0plugin\u00a0https:\/\/github.com\/bbecquet\/Leaflet.RotatedMarker L.marker([48.8631169, 2.3708919], { rotationAngle: 45 }).addTo(map); rotationAngle property need a value and this is key. You\u00a0will have to generate that dynamically based on aircraft position and destination airport. \u00a0Function below does the same calculate \u00a0and give\u00a0rotationAngle. Function in Python […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[27,3],"tags":[],"class_list":["post-1617","post","type-post","status-publish","format-standard","hentry","category-javascript","category-php"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1617"}],"version-history":[{"count":1,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1617\/revisions"}],"predecessor-version":[{"id":1619,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1617\/revisions\/1619"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}