leaflet.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="">

    <title>Map</title>

    <!-- Bootstrap core CSS -->
    
  </head>

  <body>

  <link rel="stylesheet" href="qrc:///css/leaflet.css" />
  <script type="text/javascript" src="qrc:///js/qwebchannel.js"></script>
  <script type="text/javascript" src="qrc:///js/jquery.min.js"></script>
  <script type="text/javascript" src="qrc:///js/leaflet.js"></script>
  <script type="text/javascript" src="qrc:///js/geotagging.js"></script>

<script type="text/javascript" >
$( document ).ready(function() {
    initialize();
});
</script>

<body>
  <div id="map" style="position: absolute; top:0; left:0; width: 100%; height:100%; z-index: 0; "></div>
  <div id="distance_camera" style="position: absolute; top:0; right:0; z-index: 1; "></div>
  <div id="distance_object" style="position: absolute; top:1.5em; right:0; z-index: 1; "></div>
</body>
</html>